ไทย
  • chrome-extension
  • monetization
  • auth

สร้างรายได้จากส่วนขยาย Chrome ของคุณด้วยการยืนยันตัวตน OpenID Connect (OAuth 2.0)

เรียนรู้วิธีสร้างรายได้จากส่วนขยาย Chrome ของคุณโดยเพิ่มการยืนยันตัวตนของผู้ใช้เข้าไป

Gao
Gao
Founder

ส่วนขยาย Chrome เป็นวิธีที่ยอดเยี่ยมในการขยายความสามารถของเบราว์เซอร์ Chrome เมื่อคุณมีส่วนขยายที่เป็นที่นิยม คุณอาจต้องการสร้างรายได้จากมันโดยการเสนอฟีเจอร์พิเศษให้กับผู้ใช้ที่จ่ายเงิน การยืนยันตัวตนของผู้ใช้เป็นสิ่งจำเป็นเพื่อวัตถุประสงค์นี้:

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

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

สรุปประโยชน์ของการใช้ OpenID Connect (OIDC) สำหรับการยืนยันตัวตน:

  • ไม่มีการล็อกผู้ผลิต: ผู้ใช้ของคุณสามารถใช้วิธีการต่าง ๆ ในการลงชื่อเข้าใช้งานแทนที่จะถูกบังคับให้ใช้ Google
  • การลงชื่อเข้าใช้ครั้งเดียว (SSO): ผู้ใช้สามารถลงชื่อเข้าใช้ครั้งเดียวและเข้าถึงบริการหรือแอปพลิเคชันหลายตัว
  • มาตรฐาน: OIDC เป็นมาตรฐานเปิดที่มีการยอมรับและรองรับอย่างกว้างขวาง และยังปลอดภัย

ในบทเรียนนี้ เราจะใช้ Logto เป็นผู้ให้บริการ OIDC ซึ่งเป็นทางเลือกสำหรับ Auth0 ในการสร้างโครงสร้างพื้นฐานตัวตน

เริ่มกันเลย!

บทนำ

สมมติว่าคุณใส่ปุ่ม "ลงชื่อเข้าใช้" ในป๊อปอัปของส่วนขยาย Chrome ของคุณ กระบวนการยืนยันตัวตนจะเป็นดังนี้:

สำหรับหน้าอินเตอร์แอคทีฟอื่น ๆ ในส่วนขยายของคุณ คุณเพียงแค่ต้องแทนที่ผู้เข้าร่วม Extension popup ด้วยชื่อของหน้า ในบทเรียนนี้เราจะมุ่งเน้นไปที่หน้า Popup

สร้างแอปฯ Logto

เพื่อเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "แอปฯ หน้าเดียว" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:

  1. ลงชื่อเข้าใช้ Logto Console.
  2. คลิกที่ สร้างแอปพลิเคชัน
  3. ในหน้าที่เปิดขึ้นมา ให้หาปุ่ม "สร้างแอปฯ โดยไม่มีเฟรมเวิร์ก" ที่ด้านล่างและคลิก
  4. เลือกประเภท "แอปฯ หน้าเดียว" และกรอกชื่อแอปพลิเคชันของคุณ
  5. คลิกที่ สร้าง

ตั้งค่าส่วนขยาย Chrome ของคุณ

ติดตั้ง Logto SDK

ติดตั้ง Logto SDK ในโปรเจกต์ส่วนขยาย Chrome ของคุณ:

อัปเดต manifest.json

Logto SDK ต้องการสิทธิ์ต่อไปนี้ใน manifest.json:

  • permissions.identity: จำเป็นสำหรับ API ระบุตัวตนของ Chrome ซึ่งใช้เพื่อเข้าสู่ระบบและออกจากระบบ
  • permissions.storage: จำเป็นสำหรับการจัดเก็บเซสชันของผู้ใช้
  • host_permissions: จำเป็นสำหรับ Logto SDK ในการสื่อสารกับ API ของ Logto

ตั้งค่าสคริปต์เบื้องหลัง (service worker)

ในสคริปต์พื้นหลังของส่วนขยาย Chrome ของคุณ ให้เริ่มต้นใช้งาน Logto SDK:

แทนที่ <your-logto-endpoint> และ <your-logto-app-id> ด้วยค่าจริง คุณสามารถหาได้ในหน้าของแอปพลิเคชันที่คุณเพิ่งสร้างใน Logto Console

หากคุณไม่มีสคริปต์พื้นหลัง คุณสามารถติดตาม คู่มืออย่างเป็นทางการ เพื่อสร้างสคริปต์ได้

จากนั้นเราจำเป็นต้องฟังข้อความจากหน้าส่วนขยายอื่น ๆ และจัดการกระบวนการยืนยันตัวตน:

คุณอาจสังเกตเห็นว่ามี URI เปลี่ยนเส้นทางสองตัวที่ถูกใช้ในโค้ดด้านบน ถูกสร้างโดย chrome.identity.getRedirectURL ซึ่งเป็น API ในตัวของ Chrome เพื่อสร้าง URL เปลี่ยนเส้นทางสำหรับกระบวนการยืนยัน ตัว URI ทั้งสองจะเป็น:

  • https://<extension-id>.chromiumapp.org/callback สำหรับการลงชื่อเข้าใช้
  • https://<extension-id>.chromiumapp.org/ สำหรับการออกจากระบบ

โปรดจำไว้ว่า URI เหล่านี้ไม่สามารถเข้าถึงได้ และใช้เฉพาะสำหรับ Chrome เพื่อกระตุ้นการดำเนินการเฉพาะสำหรับกระบวนการยืนยันตัวตน

อัปเดตการตั้งค่าแอปฯ Logto

ตอนนี้เราจำเป็นต้องอัปเดตการตั้งค่าแอปพลิเคชัน Logto ให้อนุญาต URI เปลี่ยนเส้นทางที่เราเพิ่งสร้าง

  1. ไปยังหน้าของแอปพลิเคชันใน Logto Console
  2. ในส่วน "Redirect URIs" ให้เพิ่ม URI: https://<extension-id>.chromiumapp.org/callback
  3. ในส่วน "Post sign-out redirect URIs" ให้เพิ่ม URI: https://<extension-id>.chromiumapp.org/
  4. ในส่วน "CORS allowed origins" ให้เพิ่ม URI: chrome-extension://<extension-id> SDK ในส่วนขยาย Chrome จะใช้ต้นทางนี้ในการสื่อสารกับ API ของ Logto
  5. คลิกที่ บันทึกการเปลี่ยนแปลง

อย่าลืมแทนที่ <extension-id> ด้วย ID ของส่วนขยายที่แท้จริง คุณสามารถหา ID ของส่วนขยายได้ที่หน้า chrome://extensions

หลังจากอัปเดตการตั้งค่าแล้ว การตั้งค่าแอปพลิเคชัน Logto ของคุณควรเป็นดังนี้:

Application settings

เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป

เราเกือบจะเสร็จแล้ว! มาเพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบและตรรกะอื่น ๆ ที่จำเป็นในหน้าป๊อปอัปกันเถอะ

ในไฟล์ popup.html:

ในไฟล์ popup.js (สมมติว่า popup.js ถูกรวมใน popup.html):

จุดตรวจสอบ: ทดสอบกระบวนการยืนยันตัวตน

ตอนนี้คุณสามารถทดสอบกระบวนการยืนยันตัวตนในส่วนขยาย Chrome ของคุณได้:

  1. เปิดป๊อปอัปของส่วนขยาย
  2. คลิกที่ปุ่ม "ลงชื่อเข้าใช้"
  3. คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าของ Logto
  4. ลงชื่อเข้าใช้ด้วยบัญชี Logto ของคุณ
  5. คุณจะถูกเปลี่ยนเส้นทางกลับไปยัง Chrome

ตรวจสอบสถานะการยืนยันตัวตน

เนื่องจาก Chrome มี API การจัดเก็บแบบรวมศูนย์ แทนที่จะเป็นการลงชื่อเข้าใช้และออกจากระบบ ฟังก์ชันอื่น ๆ ของ Logto SDK สามารถใช้ได้ในหน้า Popup โดยตรง

ใน popup.js ของคุณ คุณสามารถใช้ตัวอย่าง LogtoClient ที่สร้างในสคริปต์พื้นหลังหรือสร้างใหม่ที่มีการตั้งค่าเดียวกัน:

จากนั้นคุณสามารถสร้างฟังก์ชันเพื่อโหลดสถานะการยืนยันตัวตนและโปรไฟล์ของผู้ใช้:

คุณสามารถรวมฟังก์ชัน loadAuthenticationState กับตรรกะการลงชื่อเข้าใช้และออกจากระบบ:

นี่คือตัวอย่างของหน้าป๊อปอัปที่มีสถานะการยืนยันตัวตน:

Popup page

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ SDK คุณสามารถอ้างอิงจาก คู่มืออย่างเป็นทางการของ SDK ของเบราว์เซอร์ SDK ของเบราว์เซอร์มี API เดียวกันกับ SDK ของส่วนขยาย Chrome

ข้อพิจารณาอื่นๆ

  • การรวมสคริปต์พื้นหลัง: หากคุณใช้ bundler เช่น Webpack หรือ Rollup คุณจำเป็นต้องระบุเป้าหมายเป็น browser หรือคล้ายกันเพื่อหลีกเลี่ยงการรวมโมดูล Node.js
  • การแก้ไขโมดูล: Logto Chrome extension SDK เป็นโมดูล ESM เท่านั้น

ดู ตัวอย่างโปรเจกต์ของเรา สำหรับตัวอย่างสมบูรณ์ด้วย TypeScript, Rollup, และการตั้งค่าอื่นๆ

บทสรุป

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

ผสมผสานพลังของส่วนขยาย Chrome และ Logto คุณสามารถสร้างส่วนขยายที่ยืดหยุ่นและปรับแต่งได้มากขึ้นที่ทั้งคุณและผู้ใช้ของคุณจะรัก

ลองใช้ Logto Cloud ฟรี