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

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

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

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

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

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

เริ่มกล่องโต้ตอบการลิงก์การสมัครใช้บริการ

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

ตัวอย่างการตอบกลับ

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

console.log(result) //{publisherProvidedId: 6789, success: true}

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

ตัวอย่างฝั่งไคลเอ็นต์ที่สมบูรณ์

<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 จากโดเมนที่ผ่านการตรวจสอบความถูกต้องใน ศูนย์ผู้เผยแพร่เนื้อหา หรือคุณกำลังเรียกใช้โค้ดบนโฮสต์ที่อยู่ใน ต้นทาง js ที่ได้รับอนุญาตของไคลเอ็นต์ OAuth ที่ลิงก์

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

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