如何使用 GitHub 帐户实现社交登录？

Question

如何使用 GitHub 帐户实现社交登录？

Nat*_*les 25 authentication github github-api oauth-2.0

我的雇主要求我使用用户的 GitHub 帐户为我们的 Web 应用程序实现一个登录系统。我在网上查了一下，但无法找到如何使用 GitHub 帐户（而不是 Facebook 或 Google 帐户）执行此操作的明确说明。

Answer 1

Nat*_*les 42

我刚刚花了大约一周的时间来弄清楚如何做到这一点，所以我想我应该写一个解释来节省未来开发人员的时间。

\n

简短的（呃）答案

\n

您需要遵循GitHub 文档中的本指南（“授权 OAuth 应用程序”），并添加一些内容（如下所述）以使其能够作为用户身份验证的方法。

\n

我实现了“ Web 应用程序流程”，以便我们的应用程序部署在我们公司的服务器上（我们可以将公司的 GitHub 应用程序的“客户端机密”保密），以及“设备流程” “当我们的应用程序将部署在客户的计算机上时（因为在这种情况下，我们将无法保守我们的“客户秘密”）。
GitHub 的指南没有提及以下步骤（因为该指南并不是专门用于实现社交登录），但为了让社交登录正常工作，我还执行了以下操作：\n
1. 我创建了一个users数据库表，其想法是用于登录的每个 GitHub 帐户都会在此表中拥有自己的相应行。\n
  - 表架构示例users:\n
```
id - INTEGER\nemail - VARCHAR\nname - VARCHAR\ngithub_id - VARCHAR\n
```
    Run Code Online (Sandbox Code Playgroud)\n
  \n
2. 我创建了一个oauth_tokens数据库表来存储我们的后端从 GitHub 接收的所有 GitHub 访问令牌的副本。\n
  - 这是为了防止其他恶意网站使用用户为恶意网站授权访问令牌生成的有效 GitHub 访问令牌来冒充我们的用户。
  - 表架构示例oauth_tokens:\n
```
id - INTEGER\nuser_id - INTEGER\naccess_token - VARCHAR\nexpires_at - DATETIME\nrefresh_token - VARCHAR\nrefresh_token_expires_at - DATETIME\ndevice_code - VARCHAR <-- Used for the "device flow". I have the back-end send the\n    front-end the device code immediately upon starting the device flow, and I then\n    have the front-end poll the back-end with it until the back-end has received\n    the access token from GitHub, at which point the front-end discards the device\n    code and uses the access token as its authentication token.\n
```
    Run Code Online (Sandbox Code Playgroud)\n
  \n
3. 我让后端向前端（用户）发送 GitHub 访问令牌，以便其将未来的请求作为其身份验证机制。\n
  - localStorage如果您希望用户即使在关闭登录的浏览器选项卡后仍保持登录状态，则前端应存储令牌。
  \n
4. 我在后端添加了中间件，对于每个传入请求，它都会在数据库中查找提供的访问令牌以查看它是否已过期，如果是，则尝试刷新它。如果成功刷新令牌，它将正常处理请求，并将新的访问令牌包含在前端正在关注的自定义响应标头中（我将其命名为）x-updated-access-token。如果刷新令牌失败，它将中止请求并发送 401 响应，前端将其视为将用户重定向到登录页面的信号。\n
  - 将您的应用程序设置为仅允许未过期的访问令牌作为身份验证方法，这样用户就可以从 GitHub.com 的设置页面远程退出应用程序。
  \n
5. 我添加了前端代码来处理 GitHub 访问令牌的保存/更新/删除，无论是到 localStorage 还是从 localStorage 以及到后端的所有请求，以及重定向到 /login 路由（如果前端） end 找不到“access_token”localStorage 变量集。\n
  - 如果您想要深入的解释，代码在下面，但基本上我使用这篇文章作为前端代码如何为“Web 应用程序流程”工作的粗略指南：OpenID Connect Client by Example - Codeburst.io
  \n
6. [更新] - 我的主管最终要求我更改代码的工作方式（根据我在上面的步骤中描述的内容），以便我们不使用数据库来存储和验证我们创建的访问令牌，而是向用户颁发我们的访问令牌自己签名的包含访问令牌的 JWT，并且用户通过每个 API 请求向我们发送该 JWT，而不是 GitHub 访问令牌本身。因为它是签名的 JWT（由我们使用私钥签名），所以我们可以确定它包含的访问令牌是用户登录我们的 Web 应用程序时生成的。我已经很久没有写代码了，无法写出详细信息，但我想在这里添加一个注释，以便人们至少知道可以通过这种方式实现事情。这种方法在概念上类似于 OpenID Connect，其中用户拥有一个令牌，可以检查该令牌由谁颁发。
\n

\n

示例代码

\n

我正在开发的应用程序在前端使用 Vue + Quasar + TypeScript，在后端使用 Python + aiohttp。显然，您可能无法直接使用代码，但希望使用它作为参考将使您对最终产品应该是什么样子有足够的了解，以便您可以更快地让自己的代码工作。
由于 Stack Overflow 的帖子长度限制，我无法将代码包含在本答案的正文中，因此我将代码链接到各个 GitHub Gists 中。
应用程序.vue \n
- 这是包含整个前端应用程序的“父组件”。它的代码可以处理“Web 应用程序流程”期间的情况，即用户在授权我们的应用程序后被 GitHub 重定向回我们的应用程序。它从 URL 查询参数中获取授权代码并将其发送到我们应用程序的后端，后端又将授权代码发送到 GitHub 以换取访问令牌和刷新令牌。
\n
axios.ts \n
- 这是来自的大部分代码axios.ts。这是我放置代码的地方，该代码将 GitHub 访问令牌添加到我们应用程序后端的所有请求（如果前端在 localStorage 中找到这样的令牌），以及查看来自的任何响应的代码我们的应用程序的后端查看访问令牌是否已刷新。
\n
auth.py \n
- 这是后端文件，其中包含“Web 应用程序流”和“设备流”登录过程中使用的所有路由。如果路由 URL 包含“oauth”，则适用于“Web 应用程序流”；如果路由 URL 包含“device”，则适用于“设备流”；我只是按照 GitHub 的示例进行操作。
\n
中间件.py \n
- 这是包含中间件函数的后端文件，该函数评估所有传入请求，以查看所提供的 GitHub 访问令牌是否在我们应用程序的数据库中，并且尚未过期。刷新访问令牌的代码位于此文件中。
\n
登录.vue \n
- 这是显示“登录页面”的前端组件。它具有“Web 应用程序流程”和“设备流程”的代码。
\n

\n

我的应用程序中实现的两个登录流程的摘要：

\n

Web 应用程序流程

\n

用户访问http://mywebsite.com/
前端代码检查是否有access_tokenlocalStorage 变量（这表明用户已经登录），但没有找到，因此将用户重定向到 /login 路由。\n
- 参见App.vue:mounted()和App.vue:watch:authenticated()
\n
在登录页面/视图中，用户单击“使用 GitHub 登录”按钮。
前端设置一个随机的statelocalStorage 变量，然后使用我们应用的客户端 ID 和随机变量作为 URL 查询参数将用户重定向到 GitHub 的 OAuth 应用授权页面state。\n
- 看Login.vue:redirectUserToGitHubWebAppFlowLoginLink()
\n
用户登录 GitHub（如果尚未登录），授权我们的应用程序，并使用身份验证代码和状态变量作为 URL 查询参数重定向回http://mywebsite.com/ 。
应用程序每次加载时都会查找这些 URL 查询参数，当它看到它们时，它会确保该state变量与其存储在 localStorage 中的内容相匹配，如果是这样，它会将授权代码 POST 到我们的后端。\n
- 参见App.vue:mounted()和App.vue:sendTheBackendTheAuthorizationCodeFromGitHub()
\n
我们的应用后端收到 POST 的授权代码，然后很快：\n
- 注：以下步骤在auth.py:get_web_app_flow_access_token_and_refresh_token()
\n
1. 它将授权代码发送到 GitHub，以换取访问令牌和刷新令牌（及其过期时间）。
2. 它使用访问令牌查询 GitHub 的“/user”端点，以获取用户的 GitHub ID、电子邮件地址和姓名。
3. 它会在我们的数据库中查找是否有具有检索到的 GitHub ID 的用户，如果没有，则创建一个。
4. 它为新检索的访问令牌创建新的“oauth_tokens”数据库记录，并将其与用户记录关联。
5. 最后，它在响应前端请求时将访问令牌发送到前端。
\n
前端收到响应，access_token在 localStorage 中设置一个变量，并将authenticatedVue 变量设置为true，应用程序会不断监视该变量，并触发前端将用户从“登录”视图重定向到“ app”视图（即应用程序中要求用户进行身份验证的部分）。\n
- 参见App.vue:sendTheBackendTheAuthorizationCodeFromGitHub()和App.vue:watch:authenticated()
\n

\n

设备流程

\n

用户访问http://mywebsite.com/
前端代码检查是否有access_tokenlocalStorage 变量（这表明用户已经登录），但没有找到，因此将用户重定向到 /login 路由。\n
- 参见App.vue:mounted()和App.vue:watch:authenticated()
\n
在登录页面/视图中，用户单击“使用 GitHub 登录”按钮。
前端向我们应用的后端发送请求，询问用户在登录其 GitHub 帐户时将输入的用户代码。\n
- 看Login.vue:startTheDeviceLoginFlow()
\n
后端收到此请求并：\n
- 看auth.py:get_device_flow_user_code()
\n
1. 向 GitHub 发送请求，请求新的user_code.
2. 创建一个异步任务轮询 GitHub 以查看用户是否已进入user_code。
3. 向用户发送从 GitHub 获得的带有user_code和的响应。device_code
\n
前端接收来自我们应用后端的响应并且：\n
1. user_code它将和存储device_code在 Vue 变量中。\n
  - 看Login.vue:startTheDeviceLoginFlow()
  - 该信息device_code也会保存到 localStorage 中，这样，如果用户关闭打开“登录”页面的浏览器窗口，然后打开一个新页面，则无需重新启动登录过程。
  \n
2. 它user_code向用户显示。\n
  - 请参阅Login.vue模板代码块中的开头<div v-if="deviceFlowUserCode">
  \n
3. 它显示一个按钮，该按钮将打开 GitHub URL，用户可以在其中输入user_code（它将在新选项卡中打开页面）。
4. 它显示了一个链接到同一 GitHub 链接的二维码，因此，如果用户在计算机上使用该应用程序并想要在手机上输入该代码，他们就可以这样做。
5. 应用程序使用接收到的数据device_code来设置deviceFlowDeviceCode变量。应用程序中代码的一个单独部分不断检查该变量是否已设置，当它发现已设置时，它开始轮询后端以查看后端是否已从access_tokenGitHub 接收到 Yet。 \n
  - 参见Login.vue:watch:deviceFlowDeviceCode()和Login.vue:repeatedlyPollTheBackEndForTheAccessTokenGivenTheDeviceCode()
  \n
\n
用户可以单击上述按钮或使用手机扫描二维码，然后在https://github.com/login/device登录其 GitHub 帐户时输入用户代码，无论是在运行此应用程序的同一设备上还是在其他设备（例如手机）上。
后端在如前所述每隔几秒轮询 GitHub 时，接收access_token和refresh_token，并且如在描述“Web 应用程序流程”时提到的，向 GitHub 的“/user”端点发送请求以获取用户数据，然后获取或创建用户数据库记录，然后创建新的oauth_tokens数据库记录。\n
- 看auth.py:_repeatedly_poll_github_to_check_if_the_user_has_entered_their_code()
\n
前端每隔几秒轮询我们应用程序的后端，最终收到后端的响应，在 localStorage 中access_token设置一个access_token变量，将用户重定向到“app”视图（即部分要求用户进行身份验证的应用程序的名称）。\n
- 看Login.vue:repeatedlyPollTheBackEndForTheAccessTokenGivenTheDeviceCode()
\n

\n

这个答案值得写在自己的博客文章中:) (7认同)
tl;dr GitHub 不支持 id_token，因此您必须针对其用户配置文件 API 端点硬编码使用访问令牌才能获得“sub”的等效项。 (4认同)
当用户更改 github 用户名时，您如何处理这种情况？ (3认同)
@leangaurav 嗯...非常好的问题。该代码不处理这种情况。最好使用用户的 GitHub `id` 字段作为唯一标识符，因为这似乎应该通过调用 GitHub 的 `/user` 端点返回：https://docs.github.com/en/rest/ users/users?apiVersion=2022-11-28 我更新了答案以使用 GitHub ID 而不是用户名。 (2认同)

归档时间：	3 年，11 月前
查看次数：	5563 次
最近记录：	2 年，9 月前

如何使用 GitHub 帐户实现社交登录？

简短的（呃）答案

更多信息

示例代码

我的应用程序中实现的两个登录流程的摘要：

Web 应用程序流程

设备流程