出海建站必备：给网站接入 GitHub 登录，记得用 Org

之前写过详细的怎么给网站接入 Google 登录（传送门），今天把 GitHub 登录也补上。两个加起来，基本覆盖了出海网站最常见的登录方式，技术圈的用户尤其喜欢用 GitHub 登录，感觉更信任一些。

一开始我是直接在自己的 GitHub 账号下建了 OAuth App。App 创建好，功能也跑通了，但测试登录的时候，授权页面上显示的名字是我的个人账号昵称，一看就是个人项目，不够正式。

而且随着项目变多，所有网站的 OAuth App 都挂在个人账号下，管理起来也乱。

所以我改成先建一个 GitHub Organization，OAuth App 挂在 Org 下面。

GitHub → 右上角头像 → Your organizations → New organization

选免费套餐，填个 Org 名字，创建完就有了。

这样有几个好处：授权页面显示的是 Org 名称而不是个人昵称，看起来像一个专业产品而不是个人项目；

而且一个 Org 下可以建多个 OAuth App，每个 App 对应一个网站，各自有独立的 Client ID/Secret 和回调 URL，管理清晰。

建的 Org 名字通用，不绑定具体产品，以后旗下所有项目的 OAuth App 都可以放这里。

在 Org 下创建 OAuth App

进入 Org 页面，路径是：Settings → Developer settings → OAuth Apps。

Org 下的 OAuth Apps 列表

点 "New OAuth App"，填几个基本信息：

Application name 是产品名，用户授权会看到；

Homepage URL 填网站首页地址；

Authorization callback URL 这个很关键，因为我用的是 Supabase 做登录，回调地址要填 Supabase 的，格式是 https://.supabase.co/auth/v1/callback，不是网站本身的域名。

怎么去拿到这个回调地址，

这个路径：Supabase Dashboard → Authentication → Sign In / Providers → GitHub

点开 GitHub 那行，页面里会直接显示一个 "Callback URL (for OAuth)"，格式就是：

https://.supapabase.co/auth/v1/callback

复制这个地址，填到 GitHub OAuth App 的 Authorization callback URL 里就行。

Supabase → Authentication → Sign In / Providers，开启 GitHub

创建完成后，页面会显示 Client ID，同时需要手动点一下生成 Client Secret，生成后复制保存好，这个 Secret 只显示一次。

配置到项目里

因为我用的是 Next.js + Supabase Auth。拿到 Client ID 和 Secret 之后，去 Supabase Dashboard → Authentication → Sign In / Providers → GitHub，把两个值填进去保存就行了。

然后就可以测试下登录。

授权页面

撤销授权怎么操作

如果用户想取消对你网站的 GitHub 授权，通用入口是：GitHub → Settings → Applications → Authorized OAuth Apps，找到对应的应用点撤销就行。

Google 登录的接入方式之前写过，感兴趣的可以看这篇：出海建站必备：一次搞懂 Google 登录 2 种接入方式，One Tap 只要 1 步。两个加起来，出海产品的社会化登录基本就齐了。