Github App 纯前端登录流程实践
我曾经写过一篇使用 Github OAuth 方式进行Github登录的博客，不过时过境迁，Github推出了全新的 App 授权方式，不同于OAuth方式，它的权限控制更加精细，对于个人自用应用来说，OAuth方式已经足够，但是对于面向大众的产品，OAuth一把梭就可能带来隐私安全问题，正好 Cent 全新版本使用了 Github App 方式进行授权，因此记录下纯前端如何实现Github App 登录。
前言
首先需要明确的是，纯前端登录方式只适用于：
1，希望使用Github登录，并通过Github开放API进行操作的应用。
2，不记录任何用户信息，也不需要任何后端数据库存储任何token，但是至少有安全的后端服务可用（例如Cloudflare Workers，Vercel等）。
满足以上几点就可以使用纯前端Github登录。
由于没有任何后端持久化存储服务，例如数据库或者redis，所有的授权信息都需要保留在前端，因此退出登录是通过清除前端本地token来实现的。
使用Github App登录的关键点在于，Github App需要用户手动授权仓库后才能使用，但是如果我们直接使用Github App的安装链接(例如github.com/apps/${GITHUB_APP_SLUG}/installations/new)直接进行授权的话，如果是新用户，能在授权完成后重定向到我们指定的Callback URL，但是如果已经安装过了，用户再次点击安装链接后，会重定向到用户的Github App管理页（https://github.com/settings/installations/xxx），导致无法正确获取code。
因为我们退出登录是靠清除本地数据来实现的，所以在用户登录之前，我们并不知道用户是新用户还是老用户，因此需要使用后端服务进行中转。在登录时，我们会先通过oauth接口获取一次用户的普通token，该token基本没有权限要求，只要能获取用户安装的应用即可，然后在服务端通过token获取到用户是否已安装我们的Github App，然后再进行下一步操作，如此通过一次中转，即可实现新老用户的一键登录。
登录流程图
只需要将Github App的Callback URL配置为我们的后端接口 /api/github-oauth/authorized 即可。
提示词
得益于AI的帮助，可以很轻易地构造提示词来让AI生成最终的代码，我的提示词如下：
我正在使用cloudflare workers部署一个用户 github app 授权服务端流程，使用 nodejs和hono编写，假设目标环境已经包含如下环境变量：
```env
GITHUB_CLIENT_SECRET=xxx
GITHUB_CLIENT_ID=xxx
```
```typescript
function encodeState(value: string): Promise<string>
function decodeState(encryptedState: string): Promise<string>
```
并且提供了简易的加密方法 decodeState, encodeState ，请根据如下流程编写可用的授权程序，实现如下核心的登录接口：
```typescript
app.get("/api/github-oauth/authorize")
app.get("/api/github-oauth/authorized")
```
核心流程如下：
核心 GitHub App 登录/安装分流流程（Prompt 格式）
目标： 在用户登录时，通过服务器端点判断其 GitHub App 安装状态，实现新老用户分流。
核心流程提示词：
模式： GitHub App 授权/安装分流（服务器控制）
前置配置：
GitHub App 授权回调 URL (Callback URL) = 服务器端点 (/api/github-oauth/authorized)。
取消勾选“安装时请求用户授权”。
步骤：
统一入口： 用户从客户端访问 (/api/github-oauth/authorize) 跳转至 GitHub OAuth 授权 URL (github.com/login/oauth/authorize)。
授权回调 (服务器端)： GitHub 重定向到服务器端点 (/api/github-oauth/authorized)，附带 code。
服务器操作（双重检查）： a. 获取 Token： 服务器使用 code 和保密的 client_secret 交换 User Access Token。 b. 检查安装： 服务器使用该 User Access Token 调用 GitHub API (/user/installations) 检查 App 是否已安装。
智能分流重定向：
If 已安装 (老用户)： 服务器将 User Access Token 传给客户端，并重定向到应用首页 AFTER_LOGIN_URL。
If 未安装 (新用户)： 服务器 302 重定向到 App 安装 URL (/apps/YOUR-APP-SLUG/installations/new)。
后续登录： 无论是分流后的首页还是完成安装后的重定向，客户端均使用获得的 User Access Token 建立前端会话。由于Github App登录获取的token存在过期时间，因此还需要一个刷新接口，用于刷新token。也可以直接参考 cent-backend仓库，该仓库部署在Cloudflare Workers中。