Liên kết tài khoản người dùng (JavaScript phía máy khách)

Ví dụ về hộp thoại yêu cầu người đăng ký liên kết gói thuê bao

Với tính năng Liên kết gói thuê bao, javascript phía máy khách là cách duy nhất để tạo mối liên kết mới giữa PPID và Tài khoản Google của độc giả. Trên một trang đã định cấu hình, người đọc sẽ thấy một hộp thoại yêu cầu họ liên kết gói thuê bao. Sau khi nhấp vào nút "Tiếp tục bằng Google", người đọc có thể chọn một tài khoản để liên kết và được chuyển lại đến trang đã định cấu hình sau khi hoàn tất.

Tính năng Liên kết gói thuê bao không yêu cầu người đọc sử dụng cookie của bên thứ ba hoặc phiên hoạt động trên Google. Điều này cho phép bạn linh hoạt chuyển sang trải nghiệm liên kết bất cứ lúc nào trong trải nghiệm của người đọc, chứ không chỉ sau khi mua hàng. Nếu chưa đăng nhập vào Tài khoản Google, người đọc sẽ có cơ hội đăng nhập trong quy trình này.

Ví dụ về mã

Các ví dụ về mã phía máy khách này minh hoạ cách bắt đầu một đường liên kết, phản hồi hợp lệ trông như thế nào và (không bắt buộc) cách sử dụng eventManager swg.js để theo dõi các sự kiện phân tích và định tuyến chúng cho phù hợp.

Việc liên kết PPID với tài khoản của người đọc cho một ấn phẩm duy nhất được thực hiện bằng phương thức linkSubscription trong swg.js. Cách sử dụng tương tự như tính năng Liên kết tài khoản trước đây (ví dụ), nhưng thay vì truyền một lời hứa, phương thức này chấp nhận một đối tượng chứa PPID.

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

Phản hồi mẫu (giao diện)

Các phản hồi hợp lệ từ một tài khoản được liên kết thành công sẽ chứa cả PPID đã dùng trong đường liên kết và trạng thái boolean success.

{
  publisherProvidedId: 6789,
  success: true
}

Gói nhiều ấn phẩm

Ví dụ về hộp thoại yêu cầu người đăng ký liên kết nhiều gói thuê bao với các ấn phẩm

Bạn có thể liên kết nhiều ấn phẩm cùng lúc bằng cách truyền một đối tượng làm đối số cho hàm linkSubscriptions. Thuộc tính linkTo là một mảng các đối tượng, trong đó mỗi đối tượng đại diện cho một publicationId cụ thể và publisherProvidedId (PPID) tương ứng cần được liên kết.

const result = await subscriptions.linkSubscriptions({linkTo: [
  { publicationId: 'pubId1', publisherProvidedId: 'ppid1' },
  { publicationId: 'pubId2', publisherProvidedId: 'ppid2' },
  
]});

Phản hồi mẫu (giao diện)

Các trường anyFailure (boolean) và anySuccess (boolean) cho biết có thất bại hay thành công nào trong lần thử Liên kết gói thuê bao hay không. Trường links chứa thông tin chi tiết về kết quả của từng ấn phẩm.

Đã liên kết thành công với tất cả các ấn phẩm
{
  "anyFailure": false,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": true
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}
{
  "anyFailure": true,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": false
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

Ví dụ hoàn chỉnh về phía máy khách cho linkSubscription

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

Tạo mã ứng dụng OAuth

Mặc dù không bắt buộc phải có ứng dụng OAuth để Liên kết với gói thuê bao, nhưng bạn có thể dùng ứng dụng OAuth để tạo danh sách cho phép gồm các miền được uỷ quyền cho dự án của mình. Miền được uỷ quyền là danh sách các miền mà javascript phía máy khách của bạn được phép thực hiện các lệnh gọi. Ấn phẩm của bạn có thể đã được định cấu hình một Mã ứng dụng OAuth trong Publisher Center để dùng với swg.js.

  • Nếu các lệnh gọi javascript phía máy khách của Subscription Linking bắt nguồn từ một tên miền đã được xác thực trước đó, thì bạn không cần làm gì cả.
  • Nếu javascript của bạn chạy từ một tên miền mới, hãy làm theo hướng dẫn định cấu hình mã ứng dụng OAuth SwG.

Thử nghiệm

Để kiểm thử việc triển khai phía máy khách của tính năng Liên kết với gói thuê bao, mã phải được chạy từ một máy chủ có nguồn gốc javascript được uỷ quyền.

  1. Để sử dụng trong thực tế, các nguồn gốc được uỷ quyền có thể đến từ Ứng dụng OAuth đã định cấu hình hoặc từ danh sách các miền đã xác minh trong phần cài đặt ấn phẩm trong Publisher Center.
  2. Đối với mục đích phát triển hoặc dàn dựng, với một miền không xác minh được (ví dụ: localhost hoặc một máy chủ không công khai), miền đó phải được liệt kê trong OAuth Client đã định cấu hình.

Khắc phục lỗi

Vấn đề phổ biến nhất khi kiểm thử javascript phía máy khách là nhận được lỗi 403 - Not Authorized khi cố gắng chạy javascript. Để giải quyết vấn đề này, hãy đảm bảo rằng bạn đang chạy javascript từ một miền đã xác thực trong Publisher Center hoặc bạn đang chạy mã trên một máy chủ nằm trong nguồn gốc js được uỷ quyền của ứng dụng OAuth được liên kết.

Bước tiếp theo

Xin chúc mừng bạn đã hoàn tất quy trình tích hợp JavaScript phía máy khách. Giờ đây, bạn có thể chuyển sang quy trình tích hợp phía máy chủ. Đây là bước bắt buộc để đồng bộ hoá các quyền của độc giả. Khi triển khai và sử dụng hàm UpdateReaderEntitlements bắt buộc phía máy chủ, bạn sẽ đảm bảo rằng các bài viết phù hợp được làm nổi bật cho đúng người đăng ký.