設定 Alipay 社交登入 (Web)
Logto 官方的 Alipay 社交登入連接器，用於網頁應用程式。
提示:
本指南假設你已對 Logto 連接器 (Connectors) 有基本了解。若不熟悉，請參閱 連接器 (Connectors) 指南以開始使用。
開始使用
Alipay Web 連接器專為桌面網頁應用程式設計。它利用 Alipay 的 OAuth 2.0 驗證流程，讓 Alipay 使用者可以使用公共 Alipay 使用者資料登入其他應用程式，而無需經過繁瑣的註冊過程。
註冊 Alipay 開發者帳戶
註冊一個 Alipay 開發者帳戶 如果你還沒有的話。
建立並配置 Alipay 應用程式
- 使用剛註冊的帳戶登入 Alipay 控制台。
- 在「我的應用」(我的应用) 面板中，進入「網頁&移動應用」(网页&移动应用) 標籤。
- 點擊「立即創建」(立即创建) 按鈕開始配置你的應用程式。
- 在「應用名稱」(应用名称) 中按照命名規範命名你的應用程式，並上傳你的「應用圖標」(应用图标)，確保選擇「網頁應用」(网页应用) 作為「應用類型」(应用类型)。
- 完成應用程式創建後，進入概覽頁面，點擊「添加能力」(添加能力) 以添加「第三方應用授權」(第三方应用授权)、「獲取會員信息」(获取会员信息) 和「App 支付寶登入」(App 支付宝登录)，以啟用 Alipay 登入。
- 前往 Alipay 客戶中心，使用 Alipay 開發者帳戶登入。點擊頂部欄的「帳戶中心」(账号中心)，進入側邊欄底部的「APPID 綁定」(APPID 绑定)。輸入你在步驟 4 創建的網頁應用程式的 APPID，點擊「添加綁定」(添加绑定)。
- 點擊「App 支付寶登入」的「簽署」按鈕，按照指引完成簽署流程。完成此步驟後，你應該會看到在步驟 5 中添加的能力生效。
- 回到 Alipay 開放平台控制台頁面，你可以在「開發信息」(开发信息) 部分找到「接口加簽方式（密鑰/證書）」(接口加签方式（密钥/证书）)。點擊「設置」(设置) 按鈕，進入設置加簽方式的頁面。「公鑰」(公钥) 是首選的加簽模式，並在文本輸入框中填入你生成的公鑰文件的內容。
- 在 Alipay 控制台頁面底部點擊「設置」(设置) 按鈕設置「授權回調地址」(授权回调地址)。
${your_logto_origin}/callback/${connector_id}是 Logto 核心使用的預設回調 URI。connector_id可以在 Logto 管理控制台連接器詳細信息頁面的頂部欄找到。 - 完成所有這些步驟後，回到 Alipay 控制台頁面的右上角，點擊「提交審核」(提交审核)。一旦審核通過，你就可以順利進行 Alipay 登入流程。
備註:
你可以使用 openssl 在本地機器上生成密鑰對，通過在終端執行以下代碼片段。
openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem
在 Alipay 應用程式設置網站填寫公鑰時，需要移除 public.pem 的標頭和尾部，刪除所有換行符，並將其餘內容粘貼到「公鑰」的文本輸入框中。
設定 Logto Alipay Web 連接器設置
- 在 Alipay 控制台工作區 進入「我的應用」(我的应用) 面板，點擊「網頁&移動應用」(网页&移动应用) 標籤，你可以找到所有應用程式的 APPID。
- 在前一部分的步驟 7 中，你已經生成了一對密鑰，包括私鑰和公鑰。
- 填寫 Logto 連接器設置：
- 在
appId欄位中填入你從步驟 1 獲得的 APPID。 - 在
privateKey欄位中填入步驟 2 中提到的私鑰文件的內容。請確保使用 '\n' 替換所有換行符，並且不要移除私鑰文件的標頭和尾部。 - 在
signType欄位中填入 'RSA2'，因為我們在「建立並配置 Alipay 應用程式」的步驟 7 中選擇了公鑰加簽模式。 - 在
charset欄位中填入 'gbk' 或 'utf8'。此欄位為可選項，可以留空，預設值為 'utf8'。 - 在
scope欄位中填入 'auth_base' 或 'auth_user'。此欄位為可選項，可以留空，預設值為 'auth_user'。你可以查看不同值之間的差異。
- 在
配置類型
| 名稱 | 類型 | 枚舉值 |
|---|---|---|
| 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 連接器，你可以構建並運行你的網頁應用程式來查看它是否正常運作。