Github帳號受權登陸開發博客留言功能

之前用過weibo的開放平臺受權登陸，自從換了要從新申請，心想何不趁次換GitHub受權方式開發博客網站的評論功能。基於如下緣由，我最終選擇GitHub受權方式：

1. 我使用GitHub的頻率遠高於使用微博，對娛樂八卦社會新聞不感興趣；
2. 本身博客網站裏的內容編程一類居多，GitHub天生具備這一屬性；
3. 由於GitHub是開發者的彙集地，使用GitHub帳號留言的用戶，方便進一步互相學習。

之前看到有的博客主將用戶的留言存儲在GitHub平臺內。我沒有研究如何將用戶的留言內容以何種形式存儲到GitHub平臺上，而是將留言內容存儲在本身博客網站的數據庫中。我是考慮到即使之後再也不使用GitHub受權，也不會由於在GitHub中還有一大堆用戶留言但沒法轉移而苦惱（抽空再研究下如何經過調API實現操做本身的Github帳號）。

前期準備

個人博客網站使用的是阿里雲服務器。後端使用NodeJS+Express搭建的web服務。數據存儲使用MySQL數據庫。

後端數據（包括代碼和網站資源）託管在gitee.com平臺，前端代碼託管在github.com平臺，且兩個倉庫在平臺上都是私有狀態。Github倉庫託管服務在大多數狀況下是仍是很穩定的，個別時期偶爾會出現過網站打不開，git push要等待許久的狀況。Gitee，也就是碼雲，沒有出現過網絡鏈接的問題，但我曾經遇到過幾迴向碼雲提交失敗的經歷，終端顯示remote服務出錯，我記得提示信息是說碼雲代碼託管服務器ruby下某個子目錄命令版本老舊或是找不到。

gitee就像後端，雖然笨重保守，偶爾錯誤百出，穩紮穩打更重要；github就像前端，也許會姍姍來遲，但毫不會缺席，求變創新加體驗更重要。

編輯器獨愛Sublime Text，雖然總彈窗提示我但前版本爲試用版。之前用過Github的Atom和微軟的VS Code，前者幼稚花哨後者腫胖累贅。

最後確定要有GitHub帳號一枚。

建立應用

在GitHub中建立應用。首先進入設置頁面，在設置頁面左側邊欄最下邊找到並點擊開發者設置一項，新頁面點擊OAuth Apps選項卡，而後點擊建立新的OAuth App按鈕。填寫表單保存便可。填寫完表單就能獲取到一個Client ID和一個Client Secret。

表單中有一個Authorization callback URL，這個地方應該填寫當你引導用戶在GitHub提供的登陸/註冊/受權頁面完成受權後當即跳轉的URL地址。

受權流程

我在每一篇文章結尾處下方放置了一個留言入口。若是是第一次受權個人博客訪問你的GitHub上公開的信息，那麼點擊該入口就會在當前標籤頁跳轉到GitHub的網站提供的頁面。

若是你最近登陸了GitHub，點擊Authorize lanserdi按鈕受權成功，當即跳轉到上方在應用設置頁面指定的Authorization callback URL地址，你能夠在後端的這個路由獲取用戶公開的信息，好比用戶在GitHub使用的暱稱和頭像。而後當即重定向到用戶最一開始訪問的文章頁面（這一過程用戶甚至察覺不到）。

若是你最近沒登陸GitHub，則回先跳轉到GitHub登陸界面，登陸成功後再受權。

對於若是是已經受權過的用戶，不會跳轉到受權頁面，可是若是最近沒登陸過GitHub則會先跳轉到登陸頁面，隨後GitHub會當即重定向到Authorization callback URL回調地址。

解除受權

安全退出機制在任什麼時候候都是有必要的。用戶和開發者能夠按照圖中所示步驟解除受權：

用戶按照1->2->5步驟，再也不受權個人博客訪問你的公開信息。

開發者按照1->3->4步驟，解除所有用戶與個人應用的關聯關係。

GitHub API使用與代碼片斷

主要用到了GitHub提供的針對網頁應用受權的API，點這裏查看詳細API使用參考。

我目前用到API包括：

1. 引導用戶完成受權的頁面；
2. 受權成功後獲取用戶基本信息的接口。

其中，第一個接口的使用方法。對於登陸的用戶，我在所有文章末尾下方放置一個超連接，用來引導用戶自行完成受權。

第二個接口在後端完成調用。因爲發起的https請求，因此我用到了NodeJS的https內建模塊的https.request()方法。GitHub API要求使用POST方法請求數據，只需配置相關選項便可。點這裏詳細看https.request方法。GitHub和NodeJS官網對API的使用方法已經詳盡，這裏再也不贅述。

當用戶完成受權後，如何返回受權前訪問的文章。我使用了兩種方法一塊兒判斷：

1. 用戶每訪問一篇文章都會後端記錄或更新最近訪問的文章的標誌，做爲重定向的地址；
2. 根據referer請求頭做爲重定向地址，會判斷referer地址的域名是否是來自本站。

本篇完。更新或補充說明的內容我能夠以留言的形式發佈。留言區的佈局樣式風格和其餘網站的留言很相似，往後我會陸續給留言區增長必要的擴展功能。

原文鏈接：www.shuaihuajun.com/article/git…