跳到主要内容

设置支付宝 (Web) 社交登录

Logto 官方为 Web 应用提供的支付宝社交登录连接器。

提示:

本指南假设你对 Logto 连接器 (Connectors) 有基本的了解。对于不熟悉的人,请参考 连接器 (Connectors) 指南以开始了解。

入门指南

支付宝 Web 连接器专为桌面 Web 应用设计。它利用支付宝的 OAuth 2.0 认证 (Authentication) 流程,使支付宝用户能够使用其公开的支付宝用户信息登录其他应用,无需繁琐的注册流程。

注册支付宝开发者账号

注册支付宝开发者账号(如果你还没有的话)。

创建并配置支付宝应用

  1. 使用刚刚注册的账号登录 支付宝控制台
  2. 在“我的应用”面板中,进入“网页&移动应用”标签页。
  3. 点击“立即创建”按钮,开始配置你的应用。
  4. 在“应用名称”中为你的应用命名(需遵循命名规范),并上传“应用图标”,确保“应用类型”选择为“网页应用”。
  5. 创建应用后,进入概览页面,点击“添加能力”,添加“第三方应用授权”、“获取会员信息”和“App 支付宝登录”,以启用支付宝登录。
  6. 前往 支付宝商家中心,使用支付宝开发者账号登录。点击顶部栏的“账号中心”,进入侧边栏底部的“APPID 绑定”,输入你在第 4 步创建的 Web 应用的 APPID,点击“添加绑定”。
  7. 在“App 支付宝登录”处点击“签约”按钮,按照指引完成签约流程。完成后,你会发现第 5 步添加的能力已生效。
  8. 返回支付宝开放平台控制台页面,在“开发信息”部分可以找到“接口加签方式(密钥/证书)”。点击“设置”按钮,进入签名方式设置页面。推荐选择“公钥”模式,并将你生成的公钥文件内容填入文本框。
  9. 在支付宝控制台页面底部,点击“设置”按钮,设置“授权回调地址”。${your_logto_origin}/callback/${connector_id} 是 Logto 核心默认使用的回调地址。connector_id 可在 Logto 管理后台连接器详情页顶部栏找到。
  10. 完成上述所有步骤后,返回支付宝控制台页面右上角,点击“提交审核”。审核通过后,你就可以顺利使用支付宝登录流程了。
备注:

你可以在本地通过以下命令使用 openssl 生成密钥对。

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

在支付宝应用配置页面填写公钥时,需要去除 public.pem 文件的头部和尾部,删除所有换行符,并将剩余内容粘贴到“公钥”文本框中。

配置 Logto 支付宝 Web 连接器设置

  1. 支付宝控制台工作区 的“我的应用”面板,点击“网页&移动应用”标签页,可以找到所有应用的 APPID。
  2. 在前述第 7 步,你已经生成了一对密钥,包括私钥和公钥。
  3. 填写 Logto 连接器设置:
    • appId 字段填写第 1 步获取的 APPID。
    • privateKey 字段填写第 2 步生成的私钥文件内容。请确保用 '\n' 替换所有换行符,并且不要移除私钥文件的头部和尾部。
    • signType 字段填写 'RSA2',因为我们在“创建并配置支付宝应用”第 7 步选择了 公钥 签名模式。
    • charset 字段填写 'gbk' 或 'utf8',此字段为可选项,默认值为 'utf8'。
    • scope 字段填写 'auth_base' 或 'auth_user',此字段为可选项,默认值为 'auth_user'。你可以查看不同取值的区别

配置类型

名称类型枚举值
appIdstringN/A
privateKeystringN/A
signTypeenum string'RSA' | 'RSA2'
charsetenum string (可选)'gbk' | 'utf8' | undefined
scopeenum string (可选)'auth_user' | 'auth_base'

测试支付宝 Web 连接器

就是这样。别忘了在注册和登录中启用社交连接器

启用支付宝 Web 连接器后,你可以构建并运行你的 Web 应用,检查其是否正常工作。

参考资料

支付宝文档 - 接入准备 - 如何创建应用 支付宝文档 - 网页&移动应用 - 创建应用