I. Final effect preview

It took a few days to complete the log-in and comment function of the blog after resignation. Let’s see the effect first

  • Landing effect:
  • Comments on the effect of

Second, detailed process

The whole process is really much simpler than imagined, so do not want to do an event, do it!

1. Apply for Github OAuth Apps (too many pictures affect reading, most steps will be directly written)

  • 1.1 log in making
  • 1.2 Enter Settings — Developer Settings (the last one)
  • 1.3 Click the new OAuth Apps button on the right, and the following form appears

Fill in the rest as you see fit, except for the last Authorization Callback URL

Github will redirect the page to the Authorization callback URL after obtaining the user’s Authorization information. Therefore, front-end routing is required to receive the URL

  • 1.4 Fill in the form and submit it, then OAuth Apps can apply. It’s as simple as that!
  • 1.5 Check the result. After clicking in, you can set the logo and modify the interface. The most important ones are Client ID and Client Secret.

2. Obtain user information

Here’s the document address on the official website, so you can look at the document directly, but of course, if you don’t want to look at the document, you can go on.

2.1 Login process sorting

After clicking the login button, the user will go through the following four steps to obtain the user information. The apis involved are listed in parentheses

  • 1. Users are redirected to request authorization of their GitHub identity (github.com/login/oauth… ‘)

    The client_id here is provided in the OAuth Apps obtained in the first step; Scope content represents the user information to be obtained. Here, it represents the need to obtain additional mailbox.

  • 2, users are redirected to your website by GitHub (blog.yuanaaa.top/github_logi…

    Note: The link here is the Authorization callback URL set in the first step. What is shown here is the Authorization callback URL set by myself, which needs to be modified accordingly. The following code= 49e65FEa9348FAeb9ec0 is the access token returned with Github. The access token is different each time and can only be used once;

  • 3. Use the user’s access token to obtain access_token (github.com/login/oauth…

    This interface is fixed, followed by three parameters; Client_id and client_secret See the obtained OAuth Apps. See the previous step for code; Return access_token text, about the following ‘access_token = 53909 e2de4b8c1d4eede05f235c903e067c37ccd & scope = user % 3 aemail & token_type = bearer’

  • 4. Use access_token access API to obtain user information (api.github.com/user?access…

    In order to demonstrate the convenience, I changed the interface and directly accessed it in the browser. The result is shown in the following figure

At this point we have successfully obtained the user information, can save the information to the local database to create user information or directly back to the page.

2.2 Points needing attention
  • Are requests processed at the front end or back end?

Steps 3 and 4 in 2.1 suggest that operations should be carried out at the back end. The front end only needs to receive routes in the Authorization callback URL and send the code value to the back end on the receiving page. After receiving the code value for 3 or 4 steps, the back end can directly return user data to the front end

  • The page before login is displayed

You are advised to save the current page to localStorage during login. After obtaining user information from the Authorization Callback URL page, redirect the route to the page before login.

  • Set the request header

Step 4 in 2.1 needs to set the request header of ‘user-agent’ for back-end processing

request({
  url: tokenUrl,
  headers: {
  'User-Agent': 'http://developer.github.com/v3/#user-agent-required'}}Copy the code

To complete!

Generally speaking, it is very simple, after the user login, then you can happily add the comment function, imitation of the gold did the blog login style, here to see the effect.