我的博客开发系列：评论功能之GitHub帐号OAuth受权

前言

​ 由于年前换工做（新工做也没以前那么闲了）以及过年的缘由，评论功能的开发进度一直很慢，一点一点的也算是完成了一部分功能，此次先写第一篇关于GitHub帐号OAuth受权的过程，以后会再写受权以后如何评论以及评论回复之类的。

​ 16年写第一个博客的时候，评论时只须要输入昵称以及邮箱便可。此次考虑了下，仍是使用GitHub的帐号来进行访客用户的管理比较好，顺便练下这类受权登陆（QQ、微信等第三方帐号受权登陆相似）。

源码

前端页面: Talk is cheap.

后端接口: Show me the code.

GitHub受权过程

1. 在本身的GitHub中注册OAuth Apps。

2.点击触发登陆，跳转到受权页面

// components/Comment.vue 页面
githubLogin: function () {
      window.location.href = 'https://github.com/login/oauth/authorize?client_id=6625cb27769b1bc52415&redirect_uri=http://localhost:3000/login&scope=user:email';
      window.localStorage.setItem('GITHUB_LOGIN_REDIRECT_URL', `${this.$route.path}?comment=new`);
    }
复制代码

​ 其中：https://github.com/login/oauth/authorize是须要跳转的受权地址，client_id和redirect_uri都是在GitHub设置中的内容，保持一致便可。scope是获取用户信息的范围，更多的值能够参考官方文档。

​ localStorage中存储当前页面的地址，是为了后续受权登陆成功以后跳转到当前的页面，comment=new参数是为了与正常访问的当前页面做区分。

4. 跳到官方提供的受权页面

5. 确认受权后会跳转到http://localhost:3000/login?code=aa043845e6b80253919f页面

​ 跳转到login页面是为了显示等待页面，同事为了存储后续接口的返回值，并进行相应的跳转。最开始是以前跳转到一个接口的，但处理起来会更麻烦一些。

// pages/login.vue 页面
mounted () {
    return axios.get(`/oauth/github/github_oauth?code=${this.$route.query.code}`).then(res => {
      if (res.data.success === 1) {
        let guest = {
          userName: res.data.userName,
          avatar: res.data.avatar
        };
        window.localStorage.setItem('GITHUB_LOGIN_TOKEN', res.data.token);
        window.localStorage.setItem('GITHUB_LOGIN_GUEST', JSON.stringify(guest));
        
        let redirectUrl = window.localStorage.getItem('GITHUB_LOGIN_REDIRECT_URL');
        this.$router.push({ path: redirectUrl });
      }
   	});
}
复制代码

6. 后端接口根据返回的code值处理受权

​ 此处须要在后端中发起两个请求：

​ 1.第一个请求用来获取到用户受权后的access_token

​ 2.第二个请求会根据第一个请求获取到的access_token来取得用户信息

// server/api/oauth/github.controller.js
exports.githubOAuth = async(ctx) => {
  const code = ctx.query.code;
  let path = 'https://github.com/login/oauth/access_token';
  const params = {
    client_id: config.oAuth.github.client_id,
    client_secret: config.oAuth.github.client_secret,
    code: code
  };
  await fetch(path, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  })
  .then(res => {
    return res.text();
  })
  .then(body => {
    const args = body.split('&');
    let arg = args[0].split('=');
    return arg[1];
  })
  .then(async(token) => {
    const url = ' https://api.github.com/user?access_token=' + token;
    await fetch(url)
        .then(res => {
          return res.json();
        })
        .then(async(res) => {
          let userId = 0;
          /** * 用户保存过程，有须要可查看源码 */
          if (userId > 0) {
            ctx.session.user = res.login;
            // 用户token
            const userToken = {
              name: res.login,
              id: userId
            };
            // 签发token
            const token = jwt.sign(userToken, config.tokenSecret, { expiresIn: '2h' });
            ctx.body = {
              success: 1,
              token: token,
			  userName: res.login,
     		  avatar: res.avatar_url,
              message: ''
            };
          } else {
            ctx.body = {
              success: 0,
              token: '',
              message: 'GitHub受权登陆失败'
            };
          }
        });
  })
  .catch(e => {
    console.log(e);
    ctx.body = {
      success: 0,
      token: '',
      message: 'GitHub受权登陆失败'
    };
  });
};
复制代码

总结

​ 通过以上几个步骤，GitHub的受权流程已经走完，这时咱们的数据库中也保存下了用户的一些信息，就能够继续进行以后评论的操做了。