GitHub OAuth 第三方登錄示例教程

這組 OAuth 系列教程，第一篇介紹了基本概念，第二篇介紹了獲取令牌的四種方式，今天演示一個實例，如何通過 OAuth 獲取 API 數據。

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

下面就以 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 [e-mail]: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}`); 

（完）

轉：http://www.ruanyifeng.com/blog/2019/04/github-oauth.html