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

Question

我的雇主要求我使用用户的 GitHub 帐户为我们的 Web 应用程序实施登录系统。我在网上四处张望，但未能找到关于如何使用 GitHub 帐户（而不是 Facebook 或 Google 帐户）执行此操作的明确解释。

Answer 1

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

简短（呃）答案

您需要遵循 GitHub 的文档（“授权 OAuth 应用程序”）中的 this guide，添加一些内容（如下所述）以允许它作为用户的方法工作身份验证。

我实施了“web application flow" for when our application will be deployed on our company's servers (where we can keep our company's GitHub app's "client secret" a secret), and the "device flow”，用于确定何时将我们的应用程序部署到客户的计算机上（因为在那种情况下，我们将无法对“客户机密”保密）。
GitHub 的指南没有提到以下步骤（因为该指南并非专门用于实现社交登录），但为了使社交登录正常工作，我还执行了以下操作：
1. 我创建了一个 users 数据库 table，其想法是用于登录的每个 GitHub 帐户在此 table 中都有自己的对应行。
  - 示例 users table 架构：
```
id - INTEGER
email - VARCHAR
name - VARCHAR
github_username - VARCHAR
```
2. 我创建了一个 oauth_tokens 数据库 table 来存储我们的 back-end 从 GitHub 收到的所有 GitHub 访问令牌的副本。
  - 这是 prevent other malicious websites from impersonating our users with valid GitHub access tokens generated by the user authorizing an access token for the malicious website 所必需的。
  - 示例 oauth_tokens table 架构：
```
id - INTEGER
user_id - INTEGER
access_token - VARCHAR
expires_at - DATETIME
refresh_token - VARCHAR
refresh_token_expires_at - DATETIME
device_code - VARCHAR <-- Used for the "device flow". I have the back-end send the
    front-end the device code immediately upon starting the device flow, and I then
    have the front-end poll the back-end with it until the back-end has received
    the access token from GitHub, at which point the front-end discards the device
    code and uses the access token as its authentication token.
```
3. 我让 back-end 向 front-end（用户）发送 GitHub 访问令牌，以便它在未来的请求中作为其身份验证机制。
  - 如果您希望用户在关闭浏览器选项卡后仍保持登录状态，front-end 应将令牌存储在 localStorage 中。
4. 我在 back-end 上添加了中间件——对于每个传入请求——在我们的数据库中查找提供的访问令牌以查看它是否已过期，如果已过期，则尝试刷新它。如果它成功刷新令牌，它会照常处理请求，并在自定义响应 header 中对 front-end 的响应中包含新的访问令牌 front-end 正在密切关注出于（我将其命名为 x-updated-access-token）。如果刷新令牌失败，它会中止请求并发送 401 响应，front-end 将其作为将用户重定向到登录页面的信号。
  - 将您的应用程序设置为仅允许未过期的访问令牌作为一种身份验证方法是必要的，这样用户就可以从 GitHub.com 的设置页面远程退出应用程序。
5. 我添加了 front-end 代码来处理 GitHub 访问令牌的保存/更新/删除，to/from localStorage 以及对 [=430= 的所有请求]，如果 front-end 没有找到“access_token”localStorage 变量集，则重定向到 /login 路由。
  - 如果您需要 in-depth 解释，代码在下面，但基本上我将这篇文章用作 front-end 代码如何为“Web 应用程序流程”工作的粗略指南： OpenID Connect Client by Example - Codeburst.io

示例代码

我正在开发的应用程序在 front-end 上使用 Vue + Quasar + TypeScript，在 back-end 上使用 Python + aiohttp。显然，您可能无法直接使用代码，但希望将其用作参考将使您对最终产品的外观有足够的了解，以便您可以 more-quickly 让自己的代码正常工作。
由于 Stack Overflow 的 post 长度限制，我不能将代码包含在这个答案的 body 中，所以我 link 单独编写代码GitHub要点。
App.vue
- 这是 'parent component'，整个 front-end 应用程序都包含在其中。它具有处理“Web 应用程序流程”期间用户在授权我们的应用程序后被 GitHub 重定向回我们的应用程序的情况的代码。它从 URL 查询参数中获取授权代码，并将其发送到我们应用程序的 back-end，后者又将授权代码发送到 GitHub，以换取访问令牌和刷新令牌。
axios.ts
- 这是 axios.ts 中的大部分代码。这是我放置代码的地方，该代码将 GitHub 访问令牌添加到我们应用程序 back-end 的所有请求（如果 front-end 在 localStorage 中找到这样的令牌），以及代码查看来自我们应用程序 back-end 的任何响应，以查看访问令牌是否已刷新。
auth.py
- 这是 back-end 文件，其中包含在“Web 应用程序流”和“设备流”的登录过程中使用的所有路由。如果路由 URL 包含“oauth”，则用于“web 应用程序流”，如果路由 URL 包含“device”，则用于“设备流”；我只是按照 GitHub 的例子。
middleware.py
- 这是 back-end 文件，其中包含评估所有传入请求的中间件功能，以查看所提供的 GitHub 访问令牌是否在我们应用程序的数据库中，并且尚未过期。刷新访问令牌的代码在这个文件中。
Login.vue
- 这是显示“登录页面”的 front-end 组件。它具有“Web 应用程序流”和“设备流”的代码。

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

Web 应用程序流程

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

设备流量

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

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

How do I implement social login with GitHub accounts?

authentication

github

oauth-2.0

github-api

简短（呃）答案

更多信息

示例代码

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

Web 应用程序流程

设备流量