github 授權(quán)登錄教程與如何設(shè)計第三方授權(quán)登錄的用戶表

Acceml 發(fā)布于2019-08-23 15:37 / 2580人閱讀

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

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

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

1. github 第三方授權(quán)登錄教程

先來看下 github 授權(quán)的完整流程圖 1：

或者看下 github 授權(quán)的完整流程圖 2：

1.1 申請一個 OAuth App

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

登錄 github

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

填寫申請 app 的相關(guān)配置，重點配置項有2個

Homepage URL 這是后續(xù)需要使用授權(quán)的 URL ，你可以理解為就是你的項目根目錄地址

Authorization callback URL 授權(quán)成功后的回調(diào)地址，這個至關(guān)重要，這是拿到授權(quán) code 時給你的回調(diào)地址。

具體實踐如下：

首先登錄你的 GitHub 賬號，然后點擊進(jìn)入Settings。

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

輸入信息。

應(yīng)用信息說明。

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

1.2 授權(quán)登錄

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

授權(quán)登錄的主要 3 個步驟：

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

根據(jù) code 獲取 access_token

根據(jù) access_token 獲取用戶信息

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

1.3. 代碼實現(xiàn) 1.3.1 前端

筆者項目的技術(shù)是 react。

// config.js

// ***** 處請?zhí)顚懩闵暾埖?OAuth App 的真實內(nèi)容
 const config = {
  "oauth_uri": "https://github.com/login/oauth/authorize",
  "redirect_uri": "http://biaochenxuying.cn/",
  "client_id": "*****",
  "client_secret": "*******",
};

// 本地開發(fā)環(huán)境下
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 回調(diào)地址是分環(huán)境的，所以我是新建了兩個 OAuth App 的，一個用于線上生產(chǎn)環(huán)境，一個用于本地開發(fā)環(huán)境。

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

所以點擊跳轉(zhuǎn)是寫在 login.js 里面；

授權(quán)完拿到 code 后，是寫在 nav.js 里面

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

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

// login.js

// html


// js
handleOAuth(){
    // 保存授權(quán)前的頁面鏈接
    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();
          // 跳轉(zhuǎn)到之前授權(quán)前的頁面
          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

1.3.2 后端

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

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

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

// 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",

    // 生產(chǎn)環(huán)境
    redirect_uri: "http://biaochenxuying.cn/",
    client_id: "*****",
    client_secret: "*****",

    // // 開發(fā)環(huán)境
    // 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");

// 第三方授權(quán)登錄的用戶信息
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) {
            //驗證用戶是否已經(jīng)在數(shù)據(jù)庫中
            User.findOne({ github_id: response.id })
              .then(userInfo => {
                // console.log("userInfo :", userInfo);
                if (userInfo) {
                  //登錄成功后設(shè)置session
                  req.session.userInfo = userInfo;
                  responseClient(res, 200, 0, "授權(quán)登錄成功", 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,
                  };
                  //注冊到數(shù)據(jù)庫
                  let user = new User(obj);
                  user.save().then(data => {
                    // console.log("data :", data);
                    req.session.userInfo = data;
                    responseClient(res, 200, 0, "授權(quán)登錄成功", data);
                  });
                }
              })
              .catch(err => {
                responseClient(res);
                return;
              });
          } else {
            responseClient(res, 400, 1, "授權(quán)登錄失敗", response);
          }
        });
    })
    .catch(e => {
      console.log("e:", e);
    });
};

代碼參考 user.js

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

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

最終效果：

參與文章：

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

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

2. 如何設(shè)計第三方授權(quán)登錄的用戶表

第三方授權(quán)登錄的時候，第三方的用戶信息是存數(shù)據(jù)庫原有的 user 表還是新建一張表呢？

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

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

1. 直接通過注冊的方式保存到數(shù)據(jù)庫

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

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

2. 增加映射表

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

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

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

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

1. 第三方登錄用戶信息表設(shè)計

2. 淺談數(shù)據(jù)庫用戶表結(jié)構(gòu)設(shè)計，第三方登錄

4. 最后

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

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

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

我會不定期更新有價值的內(nèi)容，長期運(yùn)營。

關(guān)注公眾號并回復(fù) 福利可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript

GPU云服務(wù)器云服務(wù)器授權(quán)登錄授權(quán)子賬號登錄 php 網(wǎng)頁授權(quán)登錄 php微信登錄授權(quán)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102342.html

發(fā)表評論

登陸后可評論

0條評論

Acceml

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow_compression

閱讀 2669·2023-04-26 00:42
racknerd：cpanel新加坡虛擬主機(jī)上線，最低配$17.98/年，可托管4個域，贈送ssl證

閱讀 2815·2021-09-24 10:34
?機(jī)器學(xué)習(xí)?中Python實現(xiàn)可視化三維熱力圖（地形圖）

閱讀 3827·2021-09-24 09:48
操作系統(tǒng)中的IO控制方式詳解

閱讀 4163·2021-09-03 10:28
【HTML/CSS】什么是盒子模型

閱讀 2584·2019-08-30 15:56
過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

閱讀 2781·2019-08-30 15:55
「CSS3」ImageMagick - 從gif建立雪碧圖動畫 - Sprite Sheet Ani

閱讀 3272·2019-08-29 12:46
Web開發(fā)者不容錯過的20段CSS代碼

閱讀 2251·2019-08-28 17:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

github 授權(quán)登錄教程與如何設(shè)計第三方授權(quán)登錄的用戶表

相關(guān)文章

**python實現(xiàn)微信第三方網(wǎng)站掃碼登錄(Django)**

**基于 github issues 實現(xiàn)第三方評論系統(tǒng)**

Authing 是什么及實現(xiàn)了哪些國際身份協(xié)議

**詳解 Github App 的玩法**

發(fā)表評論

0條評論

Acceml

男|高級講師

TA的文章

tensorflow_compression

racknerd：cpanel新加坡虛擬主機(jī)上線，最低配$17.98/年，可托管4個域，贈送ssl證

?機(jī)器學(xué)習(xí)?中Python實現(xiàn)可視化三維熱力圖（地形圖）

操作系統(tǒng)中的IO控制方式詳解

【HTML/CSS】什么是盒子模型

過節(jié)很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

「CSS3」ImageMagick - 從gif建立雪碧圖動畫 - Sprite Sheet Ani

Web開發(fā)者不容錯過的20段CSS代碼

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

github 授權(quán)登錄教程與如何設(shè)計第三方授權(quán)登錄的用戶表

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！