1. What is third-party login?
Third party login is to quickly obtain user related information through the account and password of the third-party application
For example: QQ login
After clicking the QQ login button, the user will be asked to enter the QQ account and password
As long as the user enters the QQ account and password, we can get the user's QQ information
We can register and log in through the user's QQ information

2. Problems in third-party login
If you ask users to enter QQ account and password on our website,
Then we can steal the user's QQ number and do some shady things

3. How to solve this problem?
Authorization through OAuth protocol

4. What is OAuth protocol? (Open Authorization)
OAuth protocol provides a safe, open and simple standard for the authorization of user resources.
Different from the previous authorization methods, OAuth authorization will not make the third party touch the user's account information (such as user name and password),
That is, the third party can apply for the authorization of the user's resources without using the user's user name and password,
Therefore, OAuth is safe and reliable

5.OAuth authorization process
(1) The third-party application requests authorization from the resource owner (user).
(2) The resource owner agrees to authorize third-party applications.
(3) The third-party application uses the authorization obtained in step 2 to apply for a token from the authorization server.
(4) After the authorization server authenticates the third-party application and confirms that it is correct, it agrees to issue the token.
(5) The third-party application uses the token issued in step 4 to apply to the resource server for obtaining resources.
(6) After confirming that the token is correct, the resource server opens resource access to third-party applications.

Oash authorization implementation process

(1) Go to the website you need to access to apply for access
For example: to realize Github login, go to Github to apply for access
https://github.com/settings/applications/new

Note the error in the figure above: the callback url should be the back-end server of the request, not the front-end server
(2) After applying for access, you will get an Id and Secret
For example: after applying for Github login, we will get
Client ID:xxx
Client Secret:xxxx
(3) Put the corresponding third-party login button on your website

 <li class="iconfont icon-github" style="color: #000">
          <a href="http://127.0.0.1:7001/github"></a>
  </li>

(4) When the user clicks the login button, he / she will obtain the login interface with the id applied according to the requirements of the document. Why do you need to bring the id? You need to know whether you have access permission, because you need to tell the user who is authorized
https://docs.github.com/en/developers/apps/authorizing-oauth-apps
Follow the steps of web application flow in the official document;
(5) When the user clicks the authorization button, it will jump to the callback page we set before and return a code to us. This code is the temporary evidence that the user agrees to the authorization
(6) We take this temporary evidence (code) to the authorization server to exchange for a long-term token. The authorization server will verify whether the user really agrees. If so, an access will be returned_ Give us the token, this access_ A token is a long-term token
(7) We take a long-term token to the resource server to obtain resources related to authorized users
//router.ts

router.get('/github', controller.github.loginView);
router.get('/github/callback', controller.github.getAccessToken);

//controller/github.ts

import { Controller } from 'egg';
const queryString = require('querystring');

export default class GithubController extends Controller {
    public async loginView() {
        // 1. Get the third-party login interface
        // Send get request to https://github.com/login/oauth/authorize Just bring some parameters
        // client_id: Github can use this client_id to determine whether you have applied for access
        //            Github will use this client_id query the corresponding application name and tell the user which program is being authorized
        // Scope: authorization scope
        const baseURL = 'https://github.com/login/oauth/authorize';
        const option = {
            client_id: 'xxx',
            scope: 'user'
        }
        const url = baseURL + '?' + queryString.stringify(option);
        const {ctx} = this;
        //This page is the page for user authorization
        ctx.redirect(url);
    }
    //In the previous step, after the user is authorized to log in, the code will be returned, and the request is the callback address set on github
    public async getAccessToken(){
        const {ctx} = this;
        // 1. code after obtaining the user's consent and authorization
        const {code} = ctx.query;
        // 2. Exchange code for access_token
        // Send POST request to https://github.com/login/oauth/access_token Bring the necessary parameters
        const baseURL = 'https://github.com/login/oauth/access_token';
        const option = {
            client_id:'xxx',
            client_secret:'xxxxx',
            code:code
        }
        const result = await ctx.curl(baseURL, {
            method: 'POST',
            data: option,
            dataType: 'json',
            headers:{
                'Content-Type': 'application/json',
                'Accept':'application/json'
            }
        });
        const accessToken = result.data.access_token;

        console.log("accessToken",accessToken)
        // 3. Take the token to the resource server to obtain data
        this.getGithubUserInfo(accessToken);
    }
    //Get user data
    private async getGithubUserInfo(accessToken){
        const {ctx} = this;
        const baseURL = 'https://api.github.com/user';
        const url = `${baseURL}?access_token=${accessToken}`;
        const result = await ctx.curl(url, {
            method: 'GET',
            headers:{
                Authorization:"token "+accessToken
            }
        });
        console.log("here",JSON.parse(result.data));
    }
}

How to test repeatedly

Select the clear history of the browser, so that the user authorization function can be tested repeatedly