在GitHub上创建OAuth登录应用程序并在Cloudflare的 Serverless Functions使用

摘要

正在生成中……

在GitHub上创建一个用于登录的OAuth应用程序的步骤如下：

1. 登录GitHub账户。

2. 进入Settings（设置）> Developer settings（开发者设置）> OAuth Apps。直达链接

3. 点击"New OAuth App"（新建OAuth应用）。

4. 填写应用信息：

   • Application name: 给你的应用起一个名字，如"Cursor React App"
   • Homepage URL: 你的应用主页URL，如https://your-app-name.pages.dev
   • Application description: 简短描述你的应用（可选）
   • Authorization callback URL: 设置为https://your-app-name.pages.dev/auth/github/callback

5. 点击"Register application"（注册应用）。

6. 创建完成后，你会看到Client ID。点击"Generate a new client secret"生成Client Secret。

7. 保存Client ID和Client Secret，这将用于你的应用配置。

关于用户权限授权，GitHub提供了多种权限范围（scopes）。对于基本的用户登录和信息获取，你可能需要以下权限：

1. read:user: 读取用户个人资料信息。
2. user:email: 读取用户的邮箱地址。

要请求这些权限，在你的登录URL中添加scope参数：

export async function onRequestGet(context) {
  const clientId = context.env.GITHUB_CLIENT_ID;
  const redirectUri = `${new URL(context.request.url).origin}/auth/github/callback`;
  const scope = 'read:user user:email';
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${encodeURIComponent(scope)}`;
  
  return Response.redirect(githubAuthUrl, 302);
}

这样设置后，当用户授权你的应用时，你将能够：

• 读取用户的基本信息（如用户名、头像URL等）
• 获取用户的邮箱地址

记住：

1. 保护好你的Client Secret，不要将其暴露在前端代码或公开仓库中。
2. 在生产环境中，确保在Cloudflare Pages的环境变量设置中添加GITHUB_CLIENT_ID和GITHUB_CLIENT_SECRET。
3. 本地开发时，使用.dev.vars文件（记得将其添加到.gitignore中）。

最后，确保你的应用遵守GitHub的开发者政策和条款，尊重用户隐私，只请求必要的权限。