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

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

เคล็ดลับ:

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

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

ตัวเชื่อมต่อ Alipay Native ทำงานร่วมกับ Logto SDK บนแพลตฟอร์มมือถืออย่างใกล้ชิด โดยใช้ประโยชน์จากเวิร์กโฟลว์การยืนยันตัวตน 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" (应用图标) ของคุณ ตรวจสอบให้แน่ใจว่าเลือก "mobile application" (移动应用) เป็น "App type" (应用类型) สำหรับการสร้างแอป iOS จะต้องใช้ "Bundle ID" ที่ไม่ซ้ำกัน และสำหรับแอป Android จะต้องใช้ "application signature" (应用签名) และ "application package name" (应用包名)
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 เพื่อสร้างคู่กุญแจ (key pair) บนเครื่องของคุณเองได้โดยรันโค้ดต่อไปนี้ในเทอร์มินัล

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 Native

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

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

Name	Type	Enum values
appId	string	N/A
privateKey	string	N/A
signType	enum string	'RSA' / 'RSA2'

เปิดใช้งานการเข้าสู่ระบบ Alipay native ในแอปของคุณ

iOS

เราถือว่าคุณได้ผสานรวม Logto iOS SDK ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร Alipay SDK ด้วยซ้ำ:

1. เพิ่ม LogtoSocialPluginAlipay ในโปรเจกต์ Xcode ของคุณ

เพิ่ม framework:

บันทึก:

ปลั๊กอินนี้รวม Alipay "minimalist SDK" (极简版 SDK) มาให้แล้ว คุณสามารถใช้ import AFServiceSDK ได้โดยตรงเมื่อ import ปลั๊กอินนี้

2. เพิ่มปลั๊กอินลงในตัวเลือก init ของ LogtoClient ของคุณ

let logtoClient = LogtoClient(
  useConfig: config,
  socialPlugins: [LogtoSocialPluginAlipay(callbackScheme: "your-scheme")]
)

โดยที่ callbackScheme คือหนึ่งใน custom URL Schemes ที่สามารถนำทางกลับไปยังแอปของคุณ

Android

เราถือว่าคุณได้ผสานรวม Logto Android SDK ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร Alipay SDK ด้วยซ้ำ:

1. ดาวน์โหลด Alipay "minimalist SDK" และเพิ่มลงในโปรเจกต์ของคุณ

ดาวน์โหลด Alipay "minimalist SDK" (极简版 SDK) จาก Logto 3rd-party Social SDKs ไปยังโฟลเดอร์ app/libs ของโปรเจกต์คุณ:

project-path/app/libs/alipaySdk-15.7.9-20200727142846.aar

2. เพิ่ม Alipay "minimalist SDK" เป็น dependency

เปิดไฟล์ build.gradle ของคุณ:

project-path/app/build.gradle

เพิ่ม dependency:

dependencies {
  // ...
  implementation(files("./libs/alipaySdk-15.7.9-20200727142846.aar"))  // kotlin-script
  // หรือ
  implementation files('./libs/alipaySdk-15.7.9-20200727142846.aar')  // groovy-script
}

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

เรียบร้อยแล้ว อย่าลืม เปิดใช้งานตัวเชื่อมต่อโซเชียลใน Sign-up และ sign-in

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

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

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

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