我的博客接入 github 登錄功能詳細過程

1、最終效果預覽

辭職後花了幾天時間總算把博客的登錄以及評論功能完成了，先看看效果

• 登錄效果：

  

• 評論效果

  

2、詳細過程

整個流程下來真的比想象中簡單多了，因此想作一件事件仍是不要幹想，作就完了！

一、申請 github 的 OAuth Apps（圖太多影響閱讀，大部分步驟就直接寫了）

• 1.1 登錄 github
• 1.2 依次進入 settings -- Developer settings（最後一個）
• 1.3 點擊右邊的 new OAuth Apps 按鈕，出現以下表單

其餘都看着填就好，重要的是最後一條Authorization callback URL

Authorization callback URL是在獲取到用戶的受權信息後 github 會將頁面從新定向至這個 url，因此須要前端路由作好接收

• 1.4 填好表單提交後 OAuth Apps 就申請好了，對就是這麼簡單！
• 1.5 看看結果，點進去後能夠進行 logo 設置以及接口的修改，最主要的是 Client ID 和 Client Secret；

二、獲取用戶信息

這裏是官網文檔地址，能夠直接看文檔，固然，不想看文檔能夠接着往下看。

2.1 登錄流程梳理

用戶點擊登錄按鈕後會經歷下面四個步驟才能獲取到用戶信息，涉及的 API 在括號裏

• 一、用戶被重定向以請求他們的 GitHub 身份受權（github.com/login/oauth…'）

  此處的 client_id 是第一步獲取到的 OAuth Apps 裏提供的；
  scope 內容表示須要附加獲取的用戶信息，這裏表示須要額外獲取郵箱；

• 二、用戶被GitHub重定向回你的網站（blog.yuanaaa.top/github_logi…

  注意：此處的連接爲第一步設置的 Authorization callback URL 這裏展現的是我本身設置，須要配套修改；
  後面的 code=49e65fea9348faeb9ec0 是 github 附帶返回的訪問令牌，訪問令牌每一次都不同且只能使用一次；

• 三、使用用戶的訪問令牌獲取 access_token （github.com/login/oauth…

  這個接口是固定的，後面帶有三個參數；
  client_id、client_secret 見申請到的 OAuth Apps；
  code 見上一步；
  返回 access_token 文本，大概以下 ‘access_token=53909e2de4b8c1d4eede05f235c903e067c37ccd&scope=user%3Aemail&token_type=bearer’

• 四、使用 access_token 訪問 API 獲取用戶信息 （api.github.com/user?access…

  爲了演示方便我改了接口，直接在瀏覽器進行訪問，結果以下圖

  

至此咱們就成功拿到了用戶信息啦，能夠將信息保存到本地數據庫創建用戶信息或者直接返回到頁面。

2.2 須要注意的地方

• 請求是在前端仍是後端處理？

2.1 中的第 3 、4 步建議在後端進行操做，前端只需在 Authorization callback URL 作好路由接收，並在接收頁面將 code 值發送至後端，後端收到 code 值進行 3 、4 部後直接返回用戶數據至前端就好

• 返回登陸前的頁面

建議在登錄操做時將當前頁面存放至 localStorage，Authorization callback URL 頁面獲取到用戶信息後，再將路由跳轉至用戶登錄前的頁面；

• 設置請求頭

2.1 中的第 4 步在後端處理的時候須要設置 ‘User-Agent’ 的請求頭

request({
  url: tokenUrl,
  headers: {
  'User-Agent': 'http://developer.github.com/v3/#user-agent-required'
 }
}
複製代碼

完成啦

整體來講仍是很簡單的，有了用戶登錄以後接下來就能夠愉快的添加評論功能了，仿造掘金作了博客的登錄樣式，這裏看效果。