ตั้งค่าการเข้าสู่ระบบโซเชียลด้วย Alipay (Web) (Set up social login with Alipay (Web))

ตัวเชื่อมต่อ Logto อย่างเป็นทางการสำหรับการเข้าสู่ระบบโซเชียล Alipay ในเว็บแอป

เคล็ดลับ:

คู่มือนี้สมมติว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ ตัวเชื่อมต่อ (Connectors) ของ Logto หากคุณยังไม่คุ้นเคย โปรดดูคู่มือ ตัวเชื่อมต่อ (Connectors) เพื่อเริ่มต้น

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

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

ลงทะเบียนบัญชีนักพัฒนา Alipay

ลงทะเบียนบัญชีนักพัฒนา Alipay หากคุณยังไม่มีบัญชี

สร้างและตั้งค่าแอป Alipay

1. ลงชื่อเข้าใช้ คอนโซล Alipay ด้วยบัญชีที่คุณเพิ่งลงทะเบียน
2. ไปที่แท็บ "Web & Mobile Apps" (网页&移动应用) ในแผง "My Application" (我的应用)
3. คลิกปุ่ม "Create an App" (立即创建) เพื่อเริ่มตั้งค่าแอปพลิเคชันของคุณ
4. ตั้งชื่อแอปพลิเคชันใน "Application Name" (应用名称) ตามข้อกำหนดการตั้งชื่อ และอัปโหลด "Application Icon" (应用图标) ของคุณ ตรวจสอบให้แน่ใจว่าเลือก "web application" (网页应用) เป็น "App type" (应用类型)
5. หลังจากสร้างแอปพลิเคชันเสร็จแล้ว จะเข้าสู่หน้า Overview ให้คลิก "add ability" (添加能力) เพื่อเพิ่ม "Third-party application authorization" (第三方应用授权), "Get member information" (获取会员信息) และ "App Alipay login" (App 支付宝登录) ก่อนเปิดใช้งานการเข้าสู่ระบบ Alipay
6. ไปที่ Alipay Customer Center และลงชื่อเข้าใช้ด้วยบัญชีนักพัฒนา Alipay คลิก "Account Center" (账号中心) ที่แถบด้านบนและไปที่ "APPID binding" (APPID 绑定) ซึ่งสามารถพบทางเข้าได้ที่ด้านล่างของแถบด้านข้าง "Add binding" (添加绑定) โดยกรอก APPID ของเว็บแอปที่คุณสร้างในขั้นตอนที่ 4
7. คลิกปุ่ม "Sign" ของ "App Alipay login" และดำเนินการตามขั้นตอนการลงนามตามคำแนะนำ หลังจากเสร็จสิ้นขั้นตอนนี้ คุณจะพบว่าความสามารถที่คุณเพิ่มในขั้นตอนที่ 5 ถูกเปิดใช้งาน
8. กลับไปที่หน้า Alipay open platform console และคุณจะพบ "Interface signing method" (接口加签方式（密钥/证书）) ในส่วน "development information" (开发信息) คลิกปุ่ม "set up" (设置) และคุณจะเข้าสู่หน้าตั้งค่าวิธีการลงนาม "Public Key" (公钥) เป็นโหมดการลงนามที่แนะนำ และกรอกเนื้อหาจากไฟล์ public key ที่คุณสร้างลงในกล่องข้อความ
9. ตั้งค่า "Authorization Redirect URI" (授权回调地址) โดยคลิกปุ่ม "set up" (设置) ที่ด้านล่างของหน้า Alipay console ${your_logto_origin}/callback/${connector_id} คือ redirect URI เริ่มต้นที่ใช้ใน Logto core โดย connector_id สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console
10. หลังจากเสร็จสิ้นทุกขั้นตอนนี้ ให้กลับไปที่มุมขวาบนของหน้า Alipay console แล้วคลิก "Submit for review" (提交审核) เมื่อผ่านการตรวจสอบแล้ว คุณก็พร้อมใช้งานการเข้าสู่ระบบ Alipay ได้อย่างราบรื่น

บันทึก:

คุณสามารถใช้ openssl เพื่อสร้างคู่กุญแจบนเครื่องของคุณเองได้โดยรันโค้ดต่อไปนี้ในเทอร์มินัล

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem

เมื่อกรอก public key ในหน้าเว็บตั้งค่าแอป Alipay คุณต้องลบ header และ footer ของ public.pem ลบอักขระขึ้นบรรทัดใหม่ทั้งหมด และวางเนื้อหาที่เหลือลงในกล่องข้อความสำหรับ "public key"

ตั้งค่าการเชื่อมต่อ Logto Alipay Web

1. ใน พื้นที่ทำงานคอนโซล Alipay ไปที่แผง "My application" (我的应用) และคลิกแท็บ "Web & Mobile Apps" (网页&移动应用) คุณจะพบ APPID ของทุกแอปพลิเคชัน
2. ในขั้นตอนที่ 7 ของส่วนก่อนหน้า คุณได้สร้างคู่กุญแจ (private key และ public key) เรียบร้อยแล้ว
3. กรอกการตั้งค่าตัวเชื่อมต่อ Logto:
   • กรอกช่อง appId ด้วย APPID ที่ได้จากขั้นตอนที่ 1
   • กรอกช่อง privateKey ด้วยเนื้อหาจากไฟล์ private key ที่กล่าวถึงในขั้นตอนที่ 2 โปรดตรวจสอบให้แน่ใจว่าใช้ '\n' แทนอักขระขึ้นบรรทัดใหม่ทั้งหมด และอย่าลบ header และ footer ในไฟล์ private key
   • กรอกช่อง signType ด้วย 'RSA2' เนื่องจากเราเลือกโหมดการลงนามแบบ Public key ในขั้นตอนที่ 7 ของ "สร้างและตั้งค่าแอป Alipay"
   • กรอกช่อง charset ด้วย 'gbk' หรือ 'utf8' คุณสามารถเว้นว่างช่องนี้ได้เพราะเป็นตัวเลือก ค่าเริ่มต้นคือ 'utf8'
   • กรอกช่อง scope ด้วย 'auth_base' หรือ 'auth_user' คุณสามารถเว้นว่างช่องนี้ได้เพราะเป็นตัวเลือก ค่าเริ่มต้นคือ 'auth_user' คุณสามารถดู ความแตกต่าง ระหว่างค่าแต่ละแบบได้

ประเภทของการตั้งค่า (Config types)

Name	Type	Enum values
appId	string	N/A
privateKey	string	N/A
signType	enum string	'RSA' | 'RSA2'
charset	enum string (OPTIONAL)	'gbk' | 'utf8' | undefined
scope	enum string (OPTIONAL)	'auth_user' | 'auth_base'

ทดสอบตัวเชื่อมต่อ Alipay web

เรียบร้อยแล้ว อย่าลืม เปิดใช้งานตัวเชื่อมต่อโซเชียลในหน้าสมัครและเข้าสู่ระบบ

เมื่อเปิดใช้งานตัวเชื่อมต่อ Alipay web แล้ว คุณสามารถ build และรันเว็บแอปของคุณเพื่อตรวจสอบการทำงานได้

แหล่งอ้างอิง

เอกสาร Alipay - การเตรียมความพร้อม - วิธีสร้างแอป

เอกสาร Alipay - Web & Mobile Apps - สร้างแอป