ไทย

chrome-extension
monetization
auth

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

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

Gao

Founder

4/2/2024

หยุดเสียเวลาเป็นสัปดาห์กับการยืนยันตัวตนผู้ใช้

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

เริ่มต้นใช้งาน

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

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

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

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

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

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

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

บทนำ

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

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

สร้างแอปฯ Logto

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

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

ตั้งค่าส่วนขยาย 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 เปลี่ยนเส้นทางที่เราเพิ่งสร้าง

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

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

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

Application settings

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

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

ในไฟล์ popup.html:

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

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

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

เปิดป๊อปอัปของส่วนขยาย
คลิกที่ปุ่ม "ลงชื่อเข้าใช้"
คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าของ Logto
ลงชื่อเข้าใช้ด้วยบัญชี Logto ของคุณ
คุณจะถูกเปลี่ยนเส้นทางกลับไปยัง 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 ฟรี

บทนำ#

สร้างแอปฯ Logto#

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

ติดตั้ง Logto SDK#

อัปเดต manifest.json#

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

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

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

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

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

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

บทสรุป#

บทนำ#

สร้างแอปฯ Logto#

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

ติดตั้ง Logto SDK#

อัปเดต manifest.json#

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

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

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

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

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

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

บทสรุป#

บทนำ

สร้างแอปฯ Logto

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

ติดตั้ง Logto SDK

อัปเดต `manifest.json`

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

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

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

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

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

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

บทสรุป

บทนำ

สร้างแอปฯ Logto

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

ติดตั้ง Logto SDK

อัปเดต `manifest.json`

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

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

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

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

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

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

บทสรุป