如何使用GitHub帳戶實作社交登錄？

我的雇主要求我使用用戶的 GitHub 帳戶為我們的 Web 應用程式實施登錄系統。我在網上環顧四周，但我無法找到關于如何使用 GitHub 帳戶（而不是 Facebook 或 Google 帳戶）進行此操作的明確解釋。

uj5u.com熱心網友回復：

我剛剛花了大約一周的時間來弄清楚如何做到這一點，所以我想我會寫一個解釋來節省未來開發人員的時間。

簡短的（呃）答案

您需要遵循GitHub 檔案（“授權 OAuth 應用程式”）中的

Example code

• The app I'm working on uses Vue Quasar TypeScript on the front-end, and Python aiohttp on the back-end. Obviously you may not be able to use the code directly, but hopefully using it as a reference will give you enough of an idea of what the finished product should look like that you can more-quickly get your own code working.
• Because of Stack Overflow's post length limits, I can't include the code in the body of this answer, so instead I'm linking the code in individual GitHub Gists.
• App.vue
  • This is the 'parent component' which the entire front-end application is contained within. It has code that handles the situation during the "web application flow" where the user has been redirected by GitHub back to our application after authorizing our application. It takes the authorization code from the URL query parameters and sends it to our application's back-end, which in turn sends the authorization code to GitHub in exchange for the access token and refresh token.
• axios.ts
  • This is most of the code from axios.ts. This is where I put the code that adds the GitHub access token to all requests to our app's back-end (if the front-end finds such a token in localStorage), as well as the code that looks at any responses from our app's back-end to see if the access token has been refreshed.
• auth.py
  • This is the back-end file that contains all the routes used during the login process for both the "web application flow" and the "device flow". If the route URL contains "oauth" it's for the "web application flow", and if the route URL contains "device" it's for the "device flow"; I was just following GitHub's example there.
• middleware.py
  • This is the back-end file that contains the middleware function that evaluates all incoming requests to see if the presented GitHub access token is one in our app's database, and hasn't yet expired. The code for refreshing the access token is in this file.
• Login.vue
  • This is the front-end component that displays the "Login page". It has code for both the "web application flow" as well as the "device flow".

Summary of the two login flows as implemented in my application:

The web application flow

1. The user goes to http://mywebsite.com/
2. The front-end code checks whether there's an access_token localStorage variable (which would indicate the user has already logged in), and doesn't find one, so it redirects the user to the /login route.
   • See App.vue:mounted() and App.vue:watch:authenticated()
3. At the Login page/view, the user clicks the "Sign in with GitHub" button.
4. The front-end sets a random state localStorage variable, then redirects the user to GitHub's OAuth app authorization page with our app's client ID and the random state variable as URL query parameters.
   • See Login.vue:redirectUserToGitHubWebAppFlowLoginLink()
5. The user signs into GitHub (if they're not already signed in), authorizes our application, and is redirected back to http://mywebsite.com/ with an authentication code and the state variable as URL query parameters.
6. The app is looking for those URL query parameters every time it loads, and when it sees them, it makes sure the state variable matches what it stored in localStorage, and if so, it POSTs the authorization code to our back-end.
   • See App.vue:mounted() and App.vue:sendTheBackendTheAuthorizationCodeFromGitHub()
7. Our app's back-end receives the POSTed authorization code and then very quickly:
   • Note: the steps below are in auth.py:get_web_app_flow_access_token_and_refresh_token()
   1. It sends the authorization code to GitHub in exchange for the access token and refresh token (as well as their expiration times).
   2. It uses the access token to query GitHub's "/user" endpoint to get the user's GitHub username, email address, and name.
   3. It looks in our database to see if we have a user with the retrieved GitHub username, and if not, creates one.
   4. It creates a new "oauth_tokens" database record for the newly-retrieved access tokens and associates it with the user record.
   5. Finally, it sends the access token to the front-end in the response to the front-end's request.
8. The front-end receives the response, sets an access_token variable in localStorage, and sets an authenticated Vue variable to true, which the app is constantly watching out for, and which triggers the front-end to redirect the user from the "login" view to the "app" view (i.e. the part of the app that requires the user to be authenticated).
   • See App.vue:sendTheBackendTheAuthorizationCodeFromGitHub() and App.vue:watch:authenticated()

The device flow

1. The user goes to http://mywebsite.com/
2. The front-end code checks whether there's an access_token localStorage variable (which would indicate the user has already logged in), and doesn't find one, so it redirects the user to the /login route.
   • See App.vue:mounted() and App.vue:watch:authenticated()
3. At the Login page/view, the user clicks the "Sign in with GitHub" button.
4. The front-end sends a request to our app's back-end asking for the user code that the user will enter while signed into their GitHub account.
   • See Login.vue:startTheDeviceLoginFlow()
5. The back-end receives this request and:
   • See auth.py:get_device_flow_user_code()
   1. Sends a request to GitHub asking for a new user_code.
   2. Creates an asynchronous task polling GitHub to see if the user has entered the user_code yet.
   3. Sends the user a response with the user_code and device_code that it got from GitHub.
6. The front-end receives the response from our app's back-end and:
   1. It stores the user_code and device_code in Vue variables.
      • See Login.vue:startTheDeviceLoginFlow()
      • The device_code is also saved to localStorage so that if the user closes the browser window that has the "log in" page open and then opens up a new one, they won't need to restart the login process.
   2. It displays the user_code to the user.
      • See Login.vue in the template code block starting <div v-if="deviceFlowUserCode">
   3. It shows a button that will open the GitHub URL where the user can enter the user_code (it will open the page in a new tab).
   4. It shows a QR code that links to the same GitHub link, so that if the user is using the application on a computer and wants to enter the code on their phone, they can do that.
   5. The app uses the received device_code to set a deviceFlowDeviceCode variable. A separate part of the code in the app is constantly checking to see if that variable has been set, and when it sees that it has, it begins polling the back-end to see if the back-end has received the access_token yet from GitHub.
      • See Login.vue:watch:deviceFlowDeviceCode() and Login.vue:repeatedlyPollTheBackEndForTheAccessTokenGivenTheDeviceCode()
7. The user either clicks the aforementioned button or scans the QR code with their phone, and enters the user code at https://github.com/login/device while logged into their GitHub account, either on the same device this application is running on or some other device (like their phone).
8. The back-end, while polling GitHub every few seconds as previously mentioned, receives the access_token and refresh_token, and as mentioned while describing the "web app flow", sends a request to GitHub's "/user" endpoint to get user data, then gets or creates a user db record, and then creates a new oauth_tokens db record.
   • See auth.py:_repeatedly_poll_github_to_check_if_the_user_has_entered_their_code()
9. The front-end, while polling our application's back-end every few seconds, finally receives a response from the back-end with the access_token, sets an access_token variable in localStorage, redirects the user to the "app" view (i.e. the part of the app that requires the user to be authenticated).
   • See Login.vue:repeatedlyPollTheBackEndForTheAccessTokenGivenTheDeviceCode()

標籤：验证 github oauth-2.0 github-api

上一篇：GitHub操作的作業流檔案無效

下一篇：CSS和影像在GitHub頁面上不起作用