RDS Supabase AI应用开启GitHub第三方认证登录
操作场景
本章节详细介绍了如何在RDS Supabase实例中接入GitHub OAuth 2.0单点登录能力。通过将GitHub配置为第三方身份提供商，用户无需另行注册账号，直接使用GitHub凭证即可完成安全认证与登录，从而有效降低用户接入门槛并保障身份验证的可靠性。同时，本章节提供一个可运行的演示项目，用于在本地部署前端应用，对接RDS Supabase服务，完整展示了从认证流程配置、会话管理到用户信息展示的前端实现方案，帮助开发者快速理解并复用相同模式。
使用须知
RDS Supabase接入GitHub SSO能力，依赖于Supabase Auth配置开启。相关配置和参数详解，请您先仔细阅读RDS Supabase应用中的对应章节以充分了解业务场景与配置流程。
本实践对应的前端项目使用React+Node.js框架开发，并直接在本地进行部署用以简单展示；也可以将演示项目部署在云上ECS机器中，并开启公网访问。
前提条件
- 已创建RDS Supabase应用且应用状态正常。
由于第三方身份验证提供商（GitHub）的服务器部署在国外，为了保证网络可达性和稳定性，避免延迟过高导致认证与访问超时，建议您购买国外区域的RDS Supabase应用。
- RDS Supabase应用已绑定弹性公网IP。
- 已开启“允许新用户注册”功能。
配置方法：在Supabase应用详情页，选择“Auth配置 > 用户注册配置”，打开配置开关。详见用户认证Auth配置管理。
未开启该配置开关时，不允许新用户注册，将导致GitHub新用户无法成功注册并登录。
- 已配置安全组规则，能够访问/接入公网，要求RDS Supabase与GitHub、前端项目地址网络互通。
- 入方向规则：放通IPV4 TCP 8443端口的入口规则，源地址要包含GitHub、当前浏览器和客户侧前端应用（对应本实践的本地演示网站）的访问地址。
- 出方向规则：放通IPV4 TCP 所有端口的出口策略，目的地址要包含GitHub、当前浏览器和客户侧前端应用（对应本实践的本地演示网站）的访问地址。
- 本地浏览器客户端能正常访问GitHub官网地址，且注册了GitHub账号，绑定了邮箱地址。
- 本地已安装Node.js工具，最低版本要求：Node.js 20 LTS。
- 本地已安装浏览器。不支持IE浏览器，建议使用Chrome或Edge浏览器。
约束限制
- 用户具有操作RDS Supabase的细粒度权限。
- Demo演示场景下，不开启SSL功能，仅使用Http方式访问。
- 本地PC或服务器支持公网访问，且对应的5173端口未被占用。
操作步骤
步骤1：获取RDS Supabase的公网访问地址和Anon API Key
- 登录RDS管理控制台。
- 单击管理控制台左上角的
，选择区域。 - 在左侧导航栏，选择“AI应用开发平台”，在应用列表中找到目标Supabase应用。
- 单击“操作”列的“登录应用”。
- 在弹窗中选择EIP登录方式，单击“立即登录”，进入Supabase Dashboard界面。 图1 公网登录
图2 Supabase Dashboard首页
- 登录用户名为supabase。
- 登录密码在应用创建时由用户自定义设置。
- 在页面左上方，单击“Connect”，进入项目连接配置界面。
- 选择“App Frameworks”，并在Framework下拉框中，勾选“React”选项，查看对应的.env环境变量配置。 图3 RDS Supabase应用环境变量
从环境变量配置中获取对应的公网访问地址和Anon API Key。详见表1。
步骤2：创建GitHub OAuth应用
- 登录并进入GitHub开发者配置页面。
- 单击“New OAuth App”，注册一个新的OAuth应用。 图4 GitHub OAuth创建配置页（旧版）
图5 GitHub OAuth创建配置页（新版）
表2 GitHub OAuth App注册配置项说明 配置项
配置说明
注意事项
取值示例
Application name
OAuth App应用的名称。
建议填写您的网站名、软件名或公司名。
supabase sso demo
Homepage URL
OAuth App应用的官方主页完整地址.
建议填写您开发的应用或网站的线上主页完整地址。
对于本实践，地址格式为：
http://{用户本地PC或服务器的公网IP地址}:5173
请确保该网卡IP与RDS Supabase网络互通，且与GitHub网络互通。
http://10.x.x.x:5173
Authorization callback URL（旧版）
Redirect URI（新版）
授权回调URL。GitHub验证用户登录成功后，GitHub会把一个临时授权码（Code）发送到这个URI，Supabase后端捕获该请求后，在后台完成用户的自动建号或登录流程，最后再把用户安全地重定向回您的项目前端网页（即项目前端URL地址）。
填写格式为：{supabase_publish_address}/auth/v1/callback，其中：
{supabase_publish_address}为Supabase的公网访问地址。取值为步骤1：获取RDS Supabase的公网访问地址和Anon API Key中获取的访问地址。
http://10.x.x.x:8443/auth/v1/callback
- 注册成功后，将自动展示OAuth应用详情页。
在详情页单击“Generate a new client secret”创建安全密钥，单击后，请立即拷贝自动生成的密钥值。因其只会在创建时完整展示一次，如果错过该机会，只能再次单击创建按钮。此时，出于安全考虑，建议单击旧密钥记录的删除按钮，手动移除该密钥。
请您务必妥善保管生成的Client Secret密钥，不慎泄露将会导致严重的安全隐患，造成高危认证风险。
图6 GitHub OAuth App详情页
图7 GitHub OAuth生成的Client配置项
- 获取3中生成的Client ID和Client secret，用于后续在管理控制台中配置Supabase Auth功能，与GitHub OAuth进行对接。
步骤3：RDS Supabase OAuth配置
- 登录RDS管理控制台。
- 单击管理控制台左上角的，选择区域。
- 在左侧导航栏，选择“AI应用开发平台”，在应用列表中找到目标Supabase应用。
- 单击“应用名称”，进入应用详情页面。
- 在左侧导航栏，选择“Auth”，进入OAuth配置页面。
- 单击“访问控制”模块的“修改访问控制”，进入应用访问控制配置。
详细的操作指导和配置项说明，请参见用户认证Auth配置管理。
图8 访问控制配置
- 项目前端地址：填写表2中“Homepage URL”对应的地址。
- 应用外部访问地址：填写步骤1：获取RDS Supabase的公网访问地址和Anon API Key中获取的访问地址。
- 重定向白名单：不填写。
- 单击“身份验证提供商”模块中的GitHub配置开关，进入GitHub身份验证配置。
详细的操作指导和配置项说明，请参见用户认证Auth配置管理。
图9 GitHub身份验证配置
步骤5：GitHub SSO登录认证测试
- 本地浏览器打开Demo项目前端访问地址，对应表2中“Homepage URL”对应的地址。 本实践对应的地址样例如下，其中IP地址为本机的公网IP。
http://10.x.x.x:5173
图10 本地Demo演示项目前端访问
- 单击“使用GitHub登录”，触发GitHub与RDS Supabase的OAuth用户认证。 浏览器地址栏自动回显，并弹出如下认证交互视图。只会出现一次，后续登出再重新登录，不会触发此界面视图展示。
https://github.com/login/oauth/authorize?client_id=***************
图11 GitHub与RDS Supabase的OAuth用户认证
- 单击“Authorize xxx”，认证完成后，系统将自动重定向到Demo前端项目的演示首页，展示登录后用户的凭证信息。 图12 认证重定向后的Demo演示首页
步骤6：RDS Supabase登录用户数据确认
- 从表1中获取访问地址，进入RDS Supabase的Dashboard界面。
- 在左侧导航栏，选择“Authentication”，进入Auth配置视图。
- 在用户列表中，能看到一条新的用户注册和登录记录。
其中，Providers提供商为GitHub，Email邮箱地址为GitHub登录账号关联的邮箱。
图13 查看注册和登录记录
