基于Supabase实现第三方登录

更新时间:

阿里云AnalyticDB for PostgreSQL深度集成开源Supabase身份认证系统,并在此基础上进行了增强,支持支付宝、微信、GitHub等多种第三方身份提供商。通过阿里云AnalyticDB for PostgreSQL托管的Supabase Auth服务,您可快速为应用启用安全、可扩展的第三方登录功能,实现用户“一键登录”。本文以支付宝为例,介绍使用Supabase为您的应用配置第三方授权登录的操作步骤。

前提条件

  • 创建Supabase项目。已开通的AnalyticDB for PostgreSQLSupabase项目,创建时间需晚于以下日期:

    • 中国地域:20250904日。

    • 新加坡:20250829日。

    说明

    实际支持的地域请以控制台显示为准。您可以登录Supabase Dashboard,查看左侧导航栏中是否存在Authentication>Sign In/Providers菜单选项,若存在,则代表支持项目所在地域。

  • 开通AnalyticDB for PostgreSQL实例所在VPC公网NAT网关,并创建SNAT条目绑定Supabase项目所在的VPC或交换机,使Supabase具备公网访问能力。创建公网NAT网关会收取费用,详情请参见NAT 网关计费

操作步骤

步骤一:获取支付宝登录的配置信息

  1. 登录支付宝开放平台,注册您的网页/移动应用。

    image.png

  2. 登录开放平台控制台,单击网页/移动应用页签,获取网页/移动应用的ID。

    image

  3. 设置密钥加签方式,并保存应用私钥。具体操作请参见支付宝文档

步骤二:配置Supabase项目

  1. 登录Supabase Dashboard

  2. Dashboard侧边栏单击Authentication>Sign In/Providers

    image

  3. 设置支付宝登录信息。

    开启Alipay,根据步骤一获取的信息设置以下参数,复制回调地址并单击Save

    image

步骤三:配置支付宝授权回调地址

  1. 支付宝开放平台进入应用详情页,单击开发设置

  2. 设置授权回调地址。将步骤二中获取的回调地址设置为授权回调地址。

    Supabase第三方Auth的回调地址格式为http://<SUPABASE_PUBLIC_URL>/auth/v1/callback

    image

步骤四:设置应用首页地址

  1. Supabase Dashboard侧边栏,单击Authentication>URL Configuration

  2. 修改Site URL为您的应用首页,作为第三方登录后跳转的地址。

    image

登录方式

配置完成后,您的应用即可使用Supabase实现支付宝第三方登录。

  • 通过URL调用接口。

    Supabase Dashboard页面左上角单击Connect,在弹出窗口中单击App Frameworks,即可获取SUPABASE_PUBLIC_URL

    http://<SUPABASE_PUBLIC_URL>/auth/v1/authorize?provider=alipay
  • 通过supabase-js的方式调用。

    supabase-js的安装与使用,请参见supabase-js

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'alipay'
    })

相关文档

更多第三方身份提供商的登录步骤,请参见Supabase官方文档