Example of implementing GitHub's third-party authorization method in Vue

I was recently improving my blog system, and suddenly I thought of changing from temporarily filling in name + email to comment to using GitHub authorization to log in and post comments.
Without further ado, let’s get straight to the point

Tips: This article only meets personal needs. If you need to learn more detailed usage methods, you can visit the official OAuth documentation.

Creating OAuth Apps

First, you need a GitHub account and go to GitHub developers. After filling in the required information, the Client_ID and Client Secret will be automatically generated, which will be used in the following steps.

Get the code

//method
async githubLogin() {
 windows.location.href = 
    "https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri"
}

<a href="https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri">GitHub login</a>

The redirect_uri parameter in the route is optional. If omitted, GitHub will redirect to the callback path you configured in your OAuth apps. If provided, the redirect_uri you fill in must be a subpath of the callback path you configured in your OAuth apps. as follows:

CALLBACK: http://xx.com/github
GOOD: http://xx.com/github
GOOD: http://xx.com/github/path/path
BAD: http://xx.com/git
BAD: http://xxxxx.com/path

If the user accepts your request, it will jump to the redirect_uri, and we can accept the parameter code in the route to proceed to the next step.

your_redirect_uri?code=xxx

Get access_token

We need client_id, client_secret and code to get access_token.

/*
/githubAccessToken:https://github.com/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 a response like this:

access_token=xxxxx&token_type=bearer

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

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

Get user information

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

/*
/githubUserInfo:https://api.github.com/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 the user information.

This is the end of this article about Vue's implementation of GitHub's third-party authorization. For more relevant content about Vue's implementation of GitHub's third-party authorization, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!