GitHub OAuth 第三方登录实战

ゞ浴缸里的玫瑰 2021-07-25 01:44 520阅读 0赞

**一 参考**

[http://www.ruanyifeng.com/blog/2019/04/github-oauth.html][http_www.ruanyifeng.com_blog_2019_04_github-oauth.html]

**二 流程场景**

A 网站允许 GitHub 登录，整个流程如下。

1 A 网站让用户跳转到 GitHub。
    2 GitHub 要求用户登录，然后询问"A 网站要求获得 xx 权限，你是否同意？"
    3 用户同意，GitHub 就会重定向回 A 网站，同时发回一个授权码。
    4 A 网站使用授权码，向 GitHub 请求令牌。
    5 GitHub 返回令牌.
    6 A 网站使用令牌，向 GitHub 请求用户数据。

**三 GitHub应用登记**

1 登记网址

[https://github.com/settings/applications/new][https_github.com_settings_applications_new]

2 填写如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

3 提交后，github返回信息如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

记录下Client ID和Client Secret

Client ID：c\*\*\*\*\*\*\*\*\*\*\*\*1

Client Secret：d\*\*\*\*\*\*\*\*\*\*\*\*\*\*d

**四 代码位置**

[https://github.com/cakin24/node-oauth-demo][https_github.com_cakin24_node-oauth-demo]

**五 核心代码修改**

1 index,js

// Fill in your client ID and client secret that you obtained
    // while registering the application
    // 主要是修改下面两行
    const clientID = 'c**************1'
    const clientSecret = 'd**********d'
    
    
    const Koa = require('koa');
    const path = require('path');
    const serve = require('koa-static');
    const route = require('koa-route');
    const axios = require('axios');
    
    
    const app = new Koa();
    
    
    const main = serve(path.join(__dirname + '/public'));
    
    
    const oauth = async ctx => {
      const requestToken = ctx.request.query.code;
      console.log('authorization code:', requestToken);
    
    
      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'
        }
      });
    
    
      const accessToken = tokenResponse.data.access_token;
      console.log(`access token: ${accessToken}`);
    
    
      const result = await axios({
        method: 'get',
        url: `https://api.github.com/user`,
        headers: {
          accept: 'application/json',
          Authorization: `token ${accessToken}`
        }
      });
      console.log(result.data);
      const name = result.data.name;
    
    
      ctx.response.redirect(`/welcome.html?name=${name}`);
    };
    
    
    app.use(main);
    app.use(route.get('/oauth/redirect', oauth));
    
    
    app.listen(8080);

2 public/index.html

<!DOCTYPE html>
    <html>
    
    <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Node OAuth2 Demo</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    
    <body>
            <a id="login">Login with GitHub</a>
    <script>
      // 主要是修改这一行
      const client_id = 'c*************1';
      const authorize_uri = 'https://github.com/login/oauth/authorize';
      const redirect_uri = 'http://localhost:8080/oauth/redirect';
      const link = document.getElementById('login');
      link.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`;
    </script>
    </body>
    </html>

**六 安装依赖**

F:\Spring Security\node-oauth-demo-master>cnpm install

**七 启动服务**

F:\Spring Security\node-oauth-demo-master>node index.js

**八 测试**

1 浏览器输入： [http://localhost:8080/][http_localhost_8080]

2 页面显示如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

3 点击该链接到Github

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

点击Authorize cakin24，程序会得到github返回的授权码code：5\*\*\*\*\*\*\*\*\*\*\*\*\*\*a，接着利用client\_id、client\_secret、code 向github请求access\_token，返回access\_token后，再利用[https://api.github.com/user][https_api.github.com_user]和token向github请求用户数据，这个过程都是下面代码自动完成的。

最终控制台输出下面信息，就是我们想得到的用户信息

authorization code: 5*********************a
    access token: a********************3
    {
      login: 'cakin24',
      id: 26600327,
      node_id: 'MDQ6VXNlcjI2NjAwMzI3',
      avatar_url: 'https://avatars1.githubusercontent.com/u/26600327?v=4',
      gravatar_id: '',
      url: 'https://api.github.com/users/cakin24',
      html_url: 'https://github.com/cakin24',
      followers_url: 'https://api.github.com/users/cakin24/followers',
      following_url: 'https://api.github.com/users/cakin24/following{/other_user}',
      gists_url: 'https://api.github.com/users/cakin24/gists{/gist_id}',
      starred_url: 'https://api.github.com/users/cakin24/starred{/owner}{/repo}',
      subscriptions_url: 'https://api.github.com/users/cakin24/subscriptions',
      organizations_url: 'https://api.github.com/users/cakin24/orgs',
      repos_url: 'https://api.github.com/users/cakin24/repos',
      events_url: 'https://api.github.com/users/cakin24/events{/privacy}',
      received_events_url: 'https://api.github.com/users/cakin24/received_events',
      type: 'User',
      site_admin: false,
      name: null,
      company: null,
      blog: '',
      location: null,
      email: null,
      hireable: null,
      bio: null,
      public_repos: 107,
      public_gists: 2,
      followers: 1,
      following: 3,
      created_at: '2017-03-22T13:10:10Z',
      updated_at: '2019-10-18T07:16:46Z'
    }

[http_www.ruanyifeng.com_blog_2019_04_github-oauth.html]: http://www.ruanyifeng.com/blog/2019/04/github-oauth.html
[https_github.com_settings_applications_new]: https://github.com/settings/applications/new
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/f45ecc270fd640e488c415f09a1b8210.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/f1d6f0542612437bab6262368f2601d1.png
[https_github.com_cakin24_node-oauth-demo]: https://github.com/cakin24/node-oauth-demo
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/140a0f4b916c4897b7d526bceb16726a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/d14b9de52ceb403fa622e949db5ad45f.png
[https_api.github.com_user]: https://api.github.com/user