個人部落格開發系列：評論功能之GitHub賬號OAuth授權

TDON發表於2018-03-03
GithubOAuth

前言

​ 因為年前換工作（新工作也沒之前那麼閒了）以及過年的原因，評論功能的開發進度一直很慢，一點一點的也算是完成了一部分功能，這次先寫第一篇關於GitHub賬號OAuth授權的過程，之後會再寫授權之後如何評論以及評論回覆之類的。

​ 16年寫第一個部落格的時候，評論時只需要輸入暱稱以及郵箱即可。這次考慮了下，還是使用GitHub的賬號來進行訪客使用者的管理比較好，順便練下這類授權登入（QQ、微信等第三方賬號授權登入類似）。

原始碼

前端頁面: Talk is cheap.

後端介面: Show me the code.

GitHub授權過程

1. 在自己的GitHub中註冊OAuth Apps。

OAuth Apps

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的授權流程已經走完，這時我們的資料庫中也儲存下了使用者的一些資訊，就可以繼續進行之後評論的操作了。

相關文章