前后端分离项目OAuth第三方登录怎么做（以Github举例）

OAuth是一种授权机制。OAuth过程中，系统会询问数据所有者，是否同意授权第三方应用进入系统获取这些数据，同意，则系统将产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。

# OAuth流程（假设你的站点是A网站）
1. 用户事件触发（一般点击事件）跳转，到 Github
2. Github 要求用户登录，并询问用户是同意 Github 下放授权码给 A 网站
3. 用户同意，则 Github 重定向到 A 网站，同时携带一个授权码（code，以url拼接形式下放）
4. A 网站使用授权码（code）向 Github 请求令牌（token）
5. Github 返回令牌（token）
6. A 网站使用令牌，向 Github 请求用户数据
7. A 网站取得用户 Github 数据，前端展示登陆，后端存储更新用户数据，并记录登录状态

本示例中，项目前后端分离开发，前端采用大家熟知的vue，后端采用koa2，OAuth逻辑和前后端框架其实无关，只会因为前后端分离在写法和前后端不分离项目上略有不同。下面分别来说说进行OAuth开发前做的准备，以及在前后端项目中如何编写代码。

一、配置Github

链接：https://github.com/settings/applications/new

Application name：站点名称，这里假设是a

Homepage URL: 主站链接，本地测试，这里是localhost:8001

Authorization callback URL：Github重定向链接，本地测试，这里是localhost:8001/login

确认后，github将生成OAuth所需要的 clientID 和 clientSecret

二、前端编写

// 将登录方法封装为插件 oauth.js
const getQuery = require('./getQuery') // 个人编写用来获取url query的方法

const oauthGithub = {
   
  getCode() {
   
    const authorize_uri = 'https://github.com/login/oauth/authorize';

    const client_id = 'b82f7274e2e996a2cecc';
    const redirect_uri = 'http://localhost:8001/login';

    location.href = `${
     authorize_uri}?client_id=${
     client_id}&redirect_uri=${
     redirect_uri}`;
  },
  async getUser(_this) {
   
    const code = getQuery('code');
    if (code) {
   
      try {
   
        const res = await _this.$axios.post(`/api/oauth/github?code&#