Example of third-party authorization method for vue to implement GitHub

Recently, I was improving my blog system and suddenly I thought of changing from temporarily filling in name + email to using GitHub authorization to log in to post comments.
Without further ado, just go to the topic

Warm reminder: This article only meets personal usage needs. If you need to learn more detailed usage methods, you can access it.OAuth official documentation。

Create OAuth Apps

First, you need a GitHub account and go toGitHub developers, After filling in according to the requirements, Client_ID and Client Secret will be automatically generated, which will be used in subsequent steps.

Get code

//method
async githubLogin() {
  = 
    "/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri"
}

<a href="/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri">GitHubLog in</a>

Redirect_uri is optional in the routing parameters. If omitted, GitHub will redirect to the callback path you configured in OAuth apps. If provided, the redirect_uri you filled in must be a subpath of the callback path you configured in OAuth apps. as follows:

CALLBACK: /github
GOOD: /github
GOOD: /github/path/path
BAD: /git
BAD: /path

If the user accepts your request, it will jump to redirect_uri. We can accept the parameter code in the route to perform the next operation.

your_redirect_uri?code=xxx

Get access_token

We need client_id, client_secret and code to get access_token.

/*
/githubAccessToken:/login/oauth/access_token
*/
this.$axios
 .get('/githubAccessToken',{
 params: {
  client_id: your_client_id,
  client_secret: your_client_secret,
  code: your_code
  }
 })

By default, you will get the following response:

access_token=xxxxx&token_type=bearer

If you want to receive responses in a more convenient format, you can customize Accept in headers:

Accept: "application/json"
=> {"access_token":xxxxx,"token_type":bearer}

Get user information

After obtaining access_token, we can request some information from the user:

/*
/githubUserInfo:/user
*/
this.$axios
 .get('/githubUserInfo', {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    Accept: "application/json",
    Authorization: `token ${access_token}` //Required  }
})

Then you can get user information.

This is the end of this article about vue implementing third-party authorization for GitHub. For more related third-party authorization for vue implementing GitHub, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!