ลิงก์บัญชีผู้ใช้ (JavaScript ฝั่งไคลเอ็นต์)

ตัวอย่างกล่องโต้ตอบที่ขอให้ผู้ติดตามลิงก์การติดตาม

เมื่อใช้การลิงก์การสมัครใช้บริการ จาวาสคริปต์ฝั่งไคลเอ็นต์เป็นวิธีเดียวที่จะสร้างการเชื่อมโยงใหม่ระหว่าง PPID กับบัญชี Google ของผู้อ่าน ในหน้าที่กําหนดค่าไว้ ผู้อ่านจะเห็นกล่องโต้ตอบที่ขอให้ลิงก์การติดตาม หลังจากคลิกปุ่ม "ดำเนินการต่อด้วย Google" แล้ว ผู้อ่านจะเลือกบัญชีที่จะลิงก์ได้ และระบบจะส่งกลับไปยังหน้าที่กําหนดค่าไว้เมื่อดำเนินการเสร็จสิ้น

การลิงก์การติดตามไม่จำเป็นต้องใช้คุกกี้ของบุคคลที่สามหรือเซสชัน Google ที่ใช้งานอยู่สำหรับผู้อ่าน ซึ่งช่วยให้ผู้อ่านเริ่มลิงก์ได้ทุกเมื่อในประสบการณ์การอ่าน ไม่ใช่แค่หลังจากซื้อ หากไม่ได้เข้าสู่ระบบบัญชี Google ระบบจะแจ้งให้ผู้ใช้เข้าสู่ระบบในขั้นตอนดังกล่าว

ตัวอย่างโค้ด

ตัวอย่างโค้ดฝั่งไคลเอ็นต์เหล่านี้แสดงวิธีเริ่มลิงก์ ลักษณะของคําตอบที่ถูกต้อง และ (ไม่บังคับ) วิธีใช้ swg.js eventManager เพื่อรอฟังเหตุการณ์ Analytics และกำหนดเส้นทางให้เหตุการณ์เหล่านั้น

การเชื่อมโยง PPID กับบัญชีของผู้อ่านสําหรับสิ่งพิมพ์รายการเดียวจะทําได้โดยใช้วิธีการ linkSubscription ใน swg.js การใช้งานจะคล้ายกับฟีเจอร์การลิงก์บัญชีก่อนหน้านี้ (example) แต่เมธอดนี้จะรับออบเจ็กต์ที่มี PPID แทนการส่ง Promise

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

ตัวอย่างการตอบกลับ (อินเทอร์เฟซ)

การตอบกลับที่ถูกต้องจากบัญชีที่ลิงก์สําเร็จจะมีทั้ง PPID ที่ใช้ในลิงก์ และสถานะบูลีน success

{
  publisherProvidedId: 6789,
  success: true
}

รวมสื่อเผยแพร่หลายรายการ

ตัวอย่างกล่องโต้ตอบที่ขอให้ผู้สมัครใช้บริการลิงก์การติดตามหลายรายการกับสื่อเผยแพร่

คุณสามารถรวมสิ่งพิมพ์หลายรายการสำหรับการลิงก์การสมัครใช้บริการพร้อมกันได้โดยส่งออบเจ็กต์เป็นอาร์กิวเมนต์ไปยังฟังก์ชัน linkSubscriptions พร็อพเพอร์ตี้ linkTo เป็นอาร์เรย์ของออบเจ็กต์ โดยแต่ละออบเจ็กต์แสดง publicationId ที่เฉพาะเจาะจงและ publisherProvidedId (PPID) ที่เกี่ยวข้องที่จะลิงก์

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

ตัวอย่างการตอบกลับ (อินเทอร์เฟซ)

ช่อง anyFailure (บูลีน) และ anySuccess (บูลีน) จะระบุว่าการพยายามลิงก์การสมัครใช้บริการแพ็กเกจประสบความสําเร็จหรือไม่ ช่อง links มีรายละเอียดของผลลัพธ์สำหรับสิ่งพิมพ์แต่ละรายการ

ลิงก์กับสื่อเผยแพร่ทั้งหมดเรียบร้อยแล้ว
{
  "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
  }]
}

ตัวอย่างฝั่งไคลเอ็นต์ที่สมบูรณ์สำหรับ 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>

สร้างรหัสไคลเอ็นต์ OAuth

แม้ว่าจะไม่จำเป็นต้องใช้ไคลเอ็นต์ OAuth สำหรับการลิงก์การสมัครใช้บริการ แต่คุณก็ใช้ไคลเอ็นต์ OAuth เพื่อสร้างรายการที่อนุญาตของโดเมนที่ได้รับอนุญาตสำหรับโปรเจ็กต์ได้ โดเมนที่ได้รับอนุญาตคือรายการโดเมนที่อนุญาตให้เรียกใช้ JavaScript ฝั่งไคลเอ็นต์ สื่อเผยแพร่ของคุณอาจมีการกำหนดค่ารหัสไคลเอ็นต์ OAuth ในศูนย์ผู้เผยแพร่เนื้อหาอยู่แล้วเพื่อใช้กับ swg.js

  • หากการเรียกใช้ JavaScript ฝั่งไคลเอ็นต์ของการลิงก์การสมัครใช้บริการมาจากชื่อโดเมนที่ได้รับการตรวจสอบก่อนหน้านี้ คุณไม่จำเป็นต้องดำเนินการใดๆ
  • หาก JavaScript ทำงานจากชื่อโดเมนใหม่ ให้ทำตามวิธีการกำหนดค่ารหัสไคลเอ็นต์ OAuth ของ SwG

การทดสอบ

หากต้องการทดสอบการติดตั้งใช้งานฝั่งไคลเอ็นต์ของการลิงก์การสมัครใช้บริการ โค้ดต้องทำงานจากเซิร์ฟเวอร์ที่มีต้นทาง JavaScript ที่ได้รับอนุญาต

  1. สำหรับการใช้งานจริง ต้นทางที่ได้รับอนุญาตอาจมาจากไคลเอ็นต์ OAuth ที่กําหนดค่าไว้ หรือมาจากรายการโดเมนที่ยืนยันแล้วในการตั้งค่าการเผยแพร่ภายในศูนย์ผู้เผยแพร่เนื้อหา
  2. สำหรับการพัฒนาหรือการใช้เวอร์ชันที่ใช้งานจริงซึ่งมีโดเมนที่ยืนยันไม่ได้ (เช่น localhost หรือเซิร์ฟเวอร์ที่ไม่ใช่แบบสาธารณะ) โดเมนต้องแสดงอยู่ในไคลเอ็นต์ OAuth ที่กําหนดค่าไว้

แก้ไขข้อผิดพลาด

ปัญหาที่พบบ่อยที่สุดเมื่อทดสอบ JavaScript ฝั่งไคลเอ็นต์คือการได้รับข้อผิดพลาด 403 - Not Authorized เมื่อพยายามเรียกใช้ JavaScript วิธีแก้ปัญหานี้คือตรวจสอบว่าคุณเรียกใช้ JavaScript จากโดเมนที่ตรวจสอบแล้วใน Publisher Center หรือเรียกใช้โค้ดในโฮสต์ที่อยู่ในต้นทาง js ที่ได้รับอนุญาตของไคลเอ็นต์ OAuth ที่ลิงก์

ขั้นตอนถัดไป

ยินดีด้วยที่การผสานรวม JavaScript ฝั่งไคลเอ็นต์เสร็จสมบูรณ์ ตอนนี้คุณก็ไปที่การผสานรวมฝั่งเซิร์ฟเวอร์ได้ นี่เป็นขั้นตอนที่จำเป็นในการซิงค์การให้สิทธิ์ของผู้อ่าน เมื่อคุณติดตั้งใช้งานและใช้งานฟังก์ชัน UpdateReaderEntitlements ฝั่งเซิร์ฟเวอร์ที่จําเป็น คุณจะมั่นใจได้ว่าระบบจะไฮไลต์บทความที่เหมาะสมสําหรับผู้ติดตามที่เหมาะสม