摘要：本文講解的就是授權登錄的教程。從拿到的用戶信息如下圖最終效果參與文章如何設計第三方授權登錄的用戶表第三方授權登錄的時候，第三方的用戶信息是存數據庫原有的表還是新建一張表呢答案這得看具體項目了，做法多種，請看下文。

需求：在網站上想評論一篇文章，而評論文章是要用戶注冊與登錄的，那么怎么免去這麻煩的步驟呢？答案是通過第三方授權登錄。本文講解的就是 github 授權登錄的教程。

效果體驗地址： http://biaochenxuying.cn

先來看下 github 授權的完整流程圖 1：

或者看下 github 授權的完整流程圖 2：

首先我們必須登錄上 github 申請一個 OAuth App，步驟如下：

登錄 github

點擊頭像下的 Settings -> Developer settings 右側 New OAuth App

填寫申請 app 的相關配置，重點配置項有2個

Homepage URL 這是后續需要使用授權的 URL ，你可以理解為就是你的項目根目錄地址

Authorization callback URL 授權成功后的回調地址，這個至關重要，這是拿到授權 code 時給你的回調地址。

具體實踐如下：

首先登錄你的 GitHub 賬號，然后點擊進入Settings。

點擊 OAuth Apps , Register a new application 或者 New OAuth App 。

輸入信息。

應用信息說明。

流程也可看 GitHub 設置的官方文檔-Registering OAuth Apps。

github 文檔：building-oauth-apps/authorizing-oauth-apps

授權登錄的主要 3 個步驟：

web 端重定向 http://github.com/login/oauth...

根據 code 獲取 access_token

根據 access_token 獲取用戶信息

筆者這次實踐中，項目是采用前后端分離的，所以第 1 步在前端實現，而第 2 步和第 3 步是在后端實現的，因為第 2 個接口里面需要Client_secret 這個參數，而且第 3 步獲取的用戶信息在后端保存到數據庫。

筆者項目的技術是 react。

// config.js

// ***** 處請填寫你申請的 OAuth App 的真實內容
 const config = {
  "oauth_uri": "https://github.com/login/oauth/authorize",
  "redirect_uri": "http://biaochenxuying.cn/",
  "client_id": "*****",
  "client_secret": "*******",
};

// 本地開發環境下
if (process.env.NODE_ENV === "development") {
  config.redirect_uri = "http://localhost:3001/"
  config.client_id = "******"
  config.client_secret = "*****"
}
export default config; 

代碼參考 config.js

redirect_uri 回調地址是分環境的，所以我是新建了兩個 OAuth App 的，一個用于線上生產環境，一個用于本地開發環境。

一般來說，登錄的頁面應該是獨立的，對應相應的路由 /login , 但是本項目的登錄 login 組件是 nav 組件的子組件，nav 是個全局用的組件, 所以回調地址就寫了 http://biaochenxuying.cn/。

所以點擊跳轉是寫在 login.js 里面；

授權完拿到 code 后，是寫在 nav.js 里面

nav.js 拿到 code 值后去請求后端接口，后端接口返回用戶信息。

其中后端拿到 code 還要去 github 取 access_token ，再根據 access_token 去取 github 取用戶的信息。

// login.js

// html

      github 授權登錄


// js
handleOAuth(){
    // 保存授權前的頁面鏈接
    window.localStorage.preventHref = window.location.href
    // window.location.
    window.location.href = `${config.oauth_uri}?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`
}

代碼參考 login.js

// nav.js

componentDidMount() {
    // console.log("code :", getQueryStringByName("code"));
    const code = getQueryStringByName("code")
    if (code) {
      this.setState(
        {
          code
        },
        () => {
          if (!this.state.code) {
            return;
          }
          this.getUser(this.state.code);
        },
      );
    }
  }

componentWillReceiveProps(nextProps) {
    const code = getQueryStringByName("code")
    if (code) {
      this.setState(
        {
          code
        },
        () => {
          if (!this.state.code) {
            return;
          }
          this.getUser(this.state.code);
        },
      );
    }
  }
  getUser(code) {
    https
      .post(
        urls.getUser,
        {
          code,
        },
        { withCredentials: true },
      )
      .then(res => {
        // console.log("res :", res.data);
        if (res.status === 200 && res.data.code === 0) {
          this.props.loginSuccess(res.data);
          let userInfo = {
            _id: res.data.data._id,
            name: res.data.data.name,
          };
          window.sessionStorage.userInfo = JSON.stringify(userInfo);
          message.success(res.data.message, 1);
          this.handleLoginCancel();
          // 跳轉到之前授權前的頁面
          const href = window.localStorage.preventHref
          if(href){
            window.location.href = href 
          }
        } else {
          this.props.loginFailure(res.data.message);
          message.error(res.data.message, 1);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

參考 nav.js

筆者項目的后端采用的技術是 node.js 和 express。

后端拿到前端傳來的 code 后，還要去 github 取 access_token ，再根據 access_token 去取 github 取用戶的信息。

然后把要用到的用戶信息通過 注冊 的方式保存到數據庫，然后返回用戶信息給前端。

// app.config.js

exports.GITHUB = {
    oauth_uri: "https://github.com/login/oauth/authorize",
    access_token_url: "https://github.com/login/oauth/access_token",
    // 獲取 github 用戶信息 url // eg: https://api.github.com/user?access_token=******&scope=&token_type=bearer
    user_url: "https://api.github.com/user",

    // 生產環境
    redirect_uri: "http://biaochenxuying.cn/",
    client_id: "*****",
    client_secret: "*****",

    // // 開發環境
    // redirect_uri: "http://localhost:3001/",
    // client_id: "*****",
    // client_secret: "*****",
};

代碼參考 app.config.js

// 路由文件  user.js

const fetch = require("node-fetch");
const CONFIG = require("../app.config.js");
const User = require("../models/user");

// 第三方授權登錄的用戶信息
exports.getUser = (req, res) => {
  let { code } = req.body;
  if (!code) {
    responseClient(res, 400, 2, "code 缺失");
    return;
  }
  let path = CONFIG.GITHUB.access_token_url;
  const params = {
    client_id: CONFIG.GITHUB.client_id,
    client_secret: CONFIG.GITHUB.client_secret,
    code: code,
  };
  // console.log(code);
  fetch(path, {
    method: "POST",
    headers: {
      "Content-Type": "application/json", 
    },
    body: JSON.stringify(params),
  })
    .then(res1 => {
      return res1.text();
    })
    .then(body => {
      const args = body.split("&");
      let arg = args[0].split("=");
      const access_token = arg[1];
      // console.log("body:",body);
      console.log("access_token:", access_token);
      return access_token;
    })
    .then(async token => {
      const url = CONFIG.GITHUB.user_url + "?access_token=" + token;
      console.log("url:", url);
      await fetch(url)
        .then(res2 => {
          console.log("res2 :", res2);
          return res2.json();
        })
        .then(response => {
          console.log("response ", response);
          if (response.id) {
            //驗證用戶是否已經在數據庫中
            User.findOne({ github_id: response.id })
              .then(userInfo => {
                // console.log("userInfo :", userInfo);
                if (userInfo) {
                  //登錄成功后設置session
                  req.session.userInfo = userInfo;
                  responseClient(res, 200, 0, "授權登錄成功", userInfo);
                } else {
                  let obj = {
                    github_id: response.id,
                    email: response.email,
                    password: response.login,
                    type: 2,
                    avatar: response.avatar_url,
                    name: response.login,
                    location: response.location,
                  };
                  //注冊到數據庫
                  let user = new User(obj);
                  user.save().then(data => {
                    // console.log("data :", data);
                    req.session.userInfo = data;
                    responseClient(res, 200, 0, "授權登錄成功", data);
                  });
                }
              })
              .catch(err => {
                responseClient(res);
                return;
              });
          } else {
            responseClient(res, 400, 1, "授權登錄失敗", response);
          }
        });
    })
    .catch(e => {
      console.log("e:", e);
    });
};

代碼參考 user.js

至于拿到 github 的用戶信息后，是注冊到 user 表，還是保存到另外一張 oauth 映射表，這個得看自己項目的情況。

從 github 拿到的用戶信息如下圖：

最終效果：

參與文章：

https://www.jianshu.com/p/a9c...

https://blog.csdn.net/zhuming...

第三方授權登錄的時候，第三方的用戶信息是存數據庫原有的 user 表還是新建一張表呢 ？

答案：這得看具體項目了，做法多種，請看下文。

第三方授權登錄之后，第三方用戶信息一般都會返回用戶唯一的標志 openid 或者 unionid 或者 id，具體是什么得看第三方，比如 github 的是 id

1. 直接通過 注冊 的方式保存到數據庫

第一種：如果網站 沒有 注冊功能的，直接通過第三方授權登錄，授權成功之后，可以直接把第三的用戶信息 注冊 保存到自己數據庫的 user 表里面。典型的例子就是 微信公眾號的授權登錄。

第二種：如果網站 有 注冊功能的，也可以通過第三方授權登錄，授權成功之后，也可以直接把第三的用戶信息 注冊 保存到自己數據庫的 user 表里面（但是密碼是后端自動生成的，用戶也不知道，只能用第三方授權登錄），這樣子的第三方的用戶和原生注冊的用戶信息都在同一張表了，這種情況得看自己項目的具體情況。筆者的博客網站暫時就采用了這種方式。

2. 增加映射表

現實中很多網站都有多種賬戶登錄方式，比如可以用網站的注冊 id 登錄，還可以用手機號登錄，可以用 QQ 登錄等等。數據庫中都是有映射關系，QQ、手機號等都是映射在網站的注冊 id 上。保證不管用什么方式登錄，只要去查映射關系，發現是映射在網站注冊的哪個 id 上，就讓哪個 id 登錄成功。

3. 建立一個 oauth 表，一個 id 列，記錄對應的用戶注冊表的 id

建立一個 oauth 表，一個 id 列，記錄對應的用戶注冊表的 id，然后你有多少個第三方登陸功能，你就建立多少列，記錄第三方登陸接口返回的 openid；第三方登陸的時候，通過這個表的記錄的 openid 獲取 id 信息，如果存在通過 id 讀取注冊表然后用 session 記錄相關信息。不存在就轉向用戶登陸/注冊界面要用戶輸入本站注冊的賬戶進行 openid 綁定或者新注冊賬戶信息進行綁定。

具體代碼實踐請參考文章：

1. 第三方登錄用戶信息表設計

2. 淺談數據庫用戶表結構設計，第三方登錄

筆者的 github 博客地址：https://github.com/biaochenxuying/blog

如果您覺得這篇文章不錯或者對你有所幫助，請給個贊或者星唄，你的點贊就是我繼續創作的最大動力。

對 全棧修煉 有興趣的朋友可以掃下方二維碼關注我的公眾號

我會不定期更新有價值的內容，長期運營。

關注公眾號并回復 福利 可領取免費學習資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript