The background of writing the article

Blog system is summarized and common ways of learning, I also spend time writing a blog system, the plan long-term maintenance, common blog system will display the visitor’s list and comment of the entrance, the beginning is not going to do site comments, because don’t know how, feel is more complex, have a chat with friends, He asked why not add a comment interactive function, I said I would not ah! Haha, I summed up some ideas when I read the article recently and share them with you. This article will be updated later.

Character classification

  • W: (the site visited by the visitor)
    • Web site at the front desk
    • Website backstage
  • G :(github)

Github is used as an example to describe how third-party authorization works

The principle of summary

When visitors want to make comments on W website, they will request G, and G will check whether they log in or not. If they log in, G will request authorization. If they confirm authorization, they will return W authorization code and be redirected to W. You need to obtain the access_token based on the authorization code, and then obtain the github information of the visitor based on the access_token. During the process, several different interfaces are accessed, which will be described in detail in the following sections.

The implementation steps

1. If visitors want to make comments, they need to github OAuth first, because Github needs to know some information about associated applications. Fill in the following figure to obtain client_id and client_secret.

The representative items are as follows

  1. Application Name: indicates the Application name
  2. Homepage Url: indicates the Homepage of the app
  3. Application description: description
  4. Authorization Callback URL: redirection address after Authorization
  5. Results obtained:

My personal understanding is that these two things are only generated to identify the application to be associated, and at most we can know the Github account that generated the client information. Of course, we can’t see this step, but at first I thought, shouldn’t everyone input the application on github first, and then proceed to the next step? Later, I realized what the purpose was. I just filled in some information about website A on Github, but there was no real connection between the two

2. The external API

Github also provides a number of external interfaces to communicate with Github. Github also provides a partial address for the authorization chapter

3. Trigger the associated action

This is a common comment system trigger. When you want to comment, you need to check if you have the visitor’s github_user information. If not, you will not allow the visitor to comment, and if you do, you will allow the current visitor to visit.

The key is how to determine whether to get the visitor’s github_user information, at this time, it is necessary to truly associate github, how to truly associate, naturally by the current application and Github establish communication

Take the example of a visitor not getting github_user

Comments are not allowed at this time, exposing a link to Github that requires an authorization code to trigger.

 window.location.href = 'https://github.com/login/oauth/authorize?client_id=6625cb27769b1bc52415&redirect_uri=http://localhost:3000/login&scope= user:email'; The client_id of OAuth is needed in the first placeCopy the code

After authorization is confirmed, the system automatically redirects to the correct redirection path

 http://xxxx/login?code=aa043845e6b80253919f
Copy the code

The code in this URL is the authorization code that Github automatically concatenates to the back of our path. We can get this code value by intercepting address bar parameters or obtaining routing parameters and then proceed to the next step.

Get access_token

Now that you’ve got the license code up here you can get the access_token based on the license code

Post code

const tokenResponse = await axios({
  method: 'post',
  url: 'https://github.com/login/oauth/access_token?' +
    `client_id=${clientID}&` +
    `client_secret=${clientSecret}&` +
    `code=${requestToken}`,
  headers: {
    accept: 'application/json'}});Copy the code

I’m not going to elaborate on the three parameters that we’ve been given before.

At this point, we have a token to get the visitor’s github_user information, also known as an access_token

Get github_user

Take the access_token as an argument to get the user information

Post code

const result = await axios({
  method: 'get',
  url: `https://api.github.com/user`,
  headers: {
    accept: 'application/json',
    Authorization: `token ${accessToken}`}});Copy the code

If the user information can be obtained, it proves that the current site has been successfully associated with Github and can get some information of the visitor’s Github, including the name of the avatar, and personal website, etc., using this information you can publish comments, insert the comments into the database, and render the comment list and a series of operations.

conclusion

The above is my personal understanding of github authorization, comment important steps, and the whole idea, is not very complicated, but relatively close. If your blog has not carried on the comment system development, may wish to refer to this idea, if the article has any summary is not good, welcome everyone to comment I will improve in time.

Attach the git code address