GitHub OAuth 第三方登入示例教程

阮一峰發表於2019-04-21
GithubOAuth

很多網站登入時，允許使用第三方網站的身份，這稱為"第三方登入"。

下面就以 GitHub 為例，寫一個最簡單的應用，演示第三方登入。

一、第三方登入的原理

所謂第三方登入，實質就是 OAuth 授權。使用者想要登入 A 網站，A 網站讓使用者提供第三方網站的資料，證明自己的身份。獲取第三方網站的身份資料，就需要 OAuth 授權。

舉例來說，A 網站允許 GitHub 登入，背後就是下面的流程。

  1. A 網站讓使用者跳轉到 GitHub。
  2. GitHub 要求使用者登入，然後詢問"A 網站要求獲得 xx 許可權，你是否同意？"
  3. 使用者同意，GitHub 就會重定向回 A 網站，同時發回一個授權碼。
  4. A 網站使用授權碼，向 GitHub 請求令牌。
  5. GitHub 返回令牌.
  6. A 網站使用令牌，向 GitHub 請求使用者資料。

下面就是這個流程的程式碼實現。

二、應用登記

一個應用要求 OAuth 授權，必須先到對方網站登記，讓對方知道是誰在請求。

所以，你要先去 GitHub 登記一下。當然，我已經登記過了，你使用我的登記資訊也可以，但為了完整走一遍流程，還是建議大家自己登記。這是免費的。

訪問這個網址，填寫登記表。

應用的名稱隨便填，主頁 URL 填寫http://localhost:8080，跳轉網址填寫 http://localhost:8080/oauth/redirect。

提交表單以後，GitHub 應該會返回客戶端 ID（client ID）和客戶端金鑰（client secret），這就是應用的身份識別碼。

三、示例倉庫

我寫了一個程式碼倉庫，請將它克隆到本地。


$ git clone [email protected]:ruanyf/node-oauth-demo.git
$ cd node-oauth-demo

兩個配置項要改一下，寫入上一步的身份識別碼。

  • index.js：改掉變數clientID and clientSecret
  • public/index.html：改掉變數client_id

然後，安裝依賴。


$ npm install

啟動服務。


$ node index.js

瀏覽器訪問http://localhost:8080，就可以看到這個示例了。

四、瀏覽器跳轉 GitHub

示例的首頁很簡單，就是一個連結，讓使用者跳轉到 GitHub。

跳轉的 URL 如下。


https://github.com/login/oauth/authorize?
  client_id=7e015d8ce32370079895&
  redirect_uri=http://localhost:8080/oauth/redirect

這個 URL 指向 GitHub 的 OAuth 授權網址，帶有兩個引數：client_id告訴 GitHub 誰在請求，redirect_uri是稍後跳轉回來的網址。

使用者點選到了 GitHub，GitHub 會要求使用者登入，確保是本人在操作。

五、授權碼

登入後，GitHub 詢問使用者，該應用正在請求資料，你是否同意授權。

使用者同意授權， GitHub 就會跳轉到redirect_uri指定的跳轉網址，並且帶上授權碼，跳轉回來的 URL 就是下面的樣子。


http://localhost:8080/oauth/redirect?
  code=859310e7cecc9196f4af

後端收到這個請求以後，就拿到了授權碼（code引數）。

六、後端實現

示例的後端採用 Koa 框架編寫，具體語法請看教程。

這裡的關鍵是針對/oauth/redirect的請求，編寫一個路由，完成 OAuth 認證。


const oauth = async ctx => {
  // ...
};

app.use(route.get('/oauth/redirect', oauth));

上面程式碼中，oauth函式就是路由的處理函式。下面的程式碼都寫在這個函式里面。

路由函式的第一件事，是從 URL 取出授權碼。


const requestToken = ctx.request.query.code;

七、令牌

後端使用這個授權碼，向 GitHub 請求令牌。


const tokenResponse = await axios({
  method: 'post',
  url: 'https://github.com/login/oauth/access_token?' +
    `client_id=${clientID}&` +
    `client_secret=${clientSecret}&` +
    `code=${requestToken}`,
  headers: {
    accept: 'application/json'
  }
});

上面程式碼中，GitHub 的令牌介面https://github.com/login/oauth/access_token需要提供三個引數。

  • client_id：客戶端的 ID
  • client_secret：客戶端的金鑰
  • code：授權碼

作為回應，GitHub 會返回一段 JSON 資料，裡面包含了令牌accessToken。


const accessToken = tokenResponse.data.access_token;

八、API 資料

有了令牌以後，就可以向 API 請求資料了。


const result = await axios({
  method: 'get',
  url: `https://api.github.com/user`,
  headers: {
    accept: 'application/json',
    Authorization: `token ${accessToken}`
  }
});

上面程式碼中，GitHub API 的地址是https://api.github.com/user，請求的時候必須在 HTTP 頭資訊裡面帶上令牌Authorization: token 361507da。

然後，就可以拿到使用者資料，得到使用者的身份。


const name = result.data.name;
ctx.response.redirect(`/welcome.html?name=${name}`);

（完）

相關文章