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