關於Google+以及Facebook第三方登入實現的一點總結
簡述
最近專案中有關於第三方登陸的需求，第三方Facebook以及Google +登入。
正好這幾天把這個需求做得差不多了，收個尾，作為一個這方面之前基本從未涉及的小白，總結下開發流程以及過程中遇到的一些問題。希望能對大家有所幫助。
基本上，目前網際網路上的涉及到第三方登入採用的都為OAuth認證方式，相關原理以及實現方法相關的可以網上搜索檢視。不過涉及到Facebook以及Google +的登陸，最大的問題是這兩個網站在牆外，想FQ找資料比較費勁，奈何國內這方面的資料也不是很齊全，翻到的官方的文件又全是英文的，閱讀無能~
第三方登陸簡單可以分為以下幾個步驟，分別是：獲得第三方登陸許可認證
下面就以上幾個步驟的一些關鍵資訊，或者說是我開發當中遇到的問題做一下簡要的記錄。因為Facebook以及Google +第三方登陸都採用的是Auth2技術，因此只會在具體實現不同的地方單獨說明。理解有誤的地方，或者是沒有說全的地方，還請各位諒解~
一 獲得第三方登陸許可認證
在獲取許可上，需要在對應的開發平臺上申請登陸接入許可，基本上你可能需要準備以下幾樣東西：
你當前需要接入第三方登陸的網址域名（用於第三方平臺校驗是否這個登入請求來自於你的網站本身）;
給使用者展示的網站logo和文字（用於在第三方登陸的時候給使用者直觀的展（裝）示（逼））;
登陸成功後，跳回的URL（用於獲取並使用登陸使用者的相關資訊）;
申請成功之後，第三方平臺會提供給你對應的AppID以及AppSecret，用以後臺進行額外的操作。基本上操作按照官方api的順序一步一步來就可以了惹，這裡就不再贅述了~（請掌握基本的英語閱讀能力…）
二 根據規範新增頁面登入樣式和js實現
簡單點講就是在頁面上新增登入Button，並通過點選觸發跳轉到第三方的請求。Google+以及Facebook在大體上邏輯一致，在細節上實現略有不同。
Google+登入。會引用自己封裝的js（）來實現登入操作（gapi），並提供了多種登陸實現方案可供選擇。這裡貼一下，我目前專案中實現的方案，僅供參考。
1.在對應頁面引用Google第三方js。https://apis.google.com/js/api:client.js（這裡的js其實和官方最新的platform.js內容是一樣的…吧~）
2.頁面定義Google+登入的按鈕樣式（這裡谷歌有內建的規範按鈕樣式可以直接呼叫，不用自己定義）
（id="googleLogin"）
3.根據引用的第三方js提供的api，作如下初始化操作：
auth2 = gapi.auth2.init({
client_id: clientID, //第一步申請的時候，提供給你的appidcookiepolicy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'//需要獲取的使用者資訊領域});
4.初始化後，接著需要對你定義的按鈕繫結滑鼠點選事件，作如下操作：
auth2.attachClickHandler('googleLogin',{},startApp.onSuccess,startApp.onFailure);//googleLogin為按鈕的ID
5.做完這些之後就等使用者點選（上鉤）啦~這裡需要注意下startApp.onSuccess以及startApp.onFailure方法，這裡是在谷歌成功登陸之後的回撥函式。在onSuccess裡第三方已經登入並返回，我們已經可以根據介面api獲取想要的使用者資訊了，而在onFailure裡因為登入失敗，我們可以自定義一些提示資訊。
6.等等！上面程式碼中的變數都是幹嘛用的啊喂~別慌，下面附上完整的js！專案開發使用了RequireJs，程式碼僅供參考！
View Code
Facebook登入。同樣會呼叫自己封裝的js（）來實現登入操作（FB），實現步驟基本同Google+登陸類似。
1.在對應頁面引用Facebook第三方js。https: //connect.facebook.net/en_US/sdk.js;
2.頁面定義Facebook登入的按鈕樣式
（id="fblogin"）
3.根據引用的第三方js提供的api，作如下初始化操作：
FB.init ({
appId : '#your AppID#',
cookie : true,
xfbml : true,
version : 'v2.4'});
4.初始化後，接著需要對你定義的按鈕繫結滑鼠點選登入事件，作如下操作：
$("#fblogin").click(function (){
FB.login(function(response) {
statusChangeCallback(response); //登入回撥函式},{scope: 'email'});//需要獲取的資訊scope});
5.statusChangeCallback為登入回撥函式，需要在裡面做下登陸返回的相關操作：
varstatusChangeCallback =function (response){
if(response.status === 'connected') {
varaccessToken = response.authResponse.accessToken;//取得 accessToken
FB.api('/me?fields=name,first_name,last_name,email',function(response) {// /me為API指定的呼叫方法，用於獲取登陸使用者相關資訊if(response.email!=null){
$.ajax({
url:"/action.do",
data:{
userName:response.name,
firstName:response.first_name,
lastName:response.last_name,
email:response.email,
idToken:accessToken,
userType:'2' },
dataType:"json",
tyep:"post",
success:function(data){
if(data.success ==true){
window.location.reload(true);
}
}
});
}else{
alert("XXX.");
}
});
}
};
更詳細的介面以及實現請參考最下面提供的官方API連結！多讀讀就懂了！
三 後臺對登入資訊進行校驗，並獲取對應第三方登陸使用者的資訊
在使用者正確的登入第三方平臺並進行授權之後，呼叫返回函式，這時需要對使用者的登入資訊和狀態進行確認！這裡非常關鍵，因為要確保使用者的確是從對應第三方平臺登入，而不是隨隨便便敲一個URL就能讓請求通過了。所以我們需要第三方平臺提供的access_token值，根據約定好的校驗規則進行校驗，放行校驗通過的登陸請求。
由於驗證資訊涉及到app的隱私資訊，以及確保驗證不會被人為的篡改，因此需要在伺服器後端進行token的驗證。
參見第二條相關js實現，在第三方呼叫返回函式之後，程式碼中會進行ajax請求，呼叫後臺的對應介面 /action.do，來在後臺進行access_token的正確性判斷。
後臺會根據登陸的第三方型別，進行https請求驗證，來確保使用者登陸的資訊無誤。
Google+的token驗證地址：https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XXX
Google+的token驗證通過返回的Json格式（校驗aud是否與後臺儲存的AppId匹配）：
{
"iss": "https://accounts.google.com",
"sub": "110169484474386276334",
"azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"email": "[email protected]",
"at_hash": "X_B3Z3Fi4udZ2mf75RWo3w",
"email_verified": "true",
"aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
"iat": "1433978353",
"exp": "1433981953"
}
Facebook的token驗證地址（%7C為encode的 '|'符號）：https://graph.facebook.com/debug_token?access_token={Your AppId}%7C{Your AppSecret}&input_token=XXX
Facebook的token驗證通過返回的Json格式（"is_valid": true）：
{
"data": {
"app_id": 000000000000000,
"application": "Social Cafe",
"expires_at": 1352419328,
"is_valid":true,
"issued_at": 1347235328,
"scopes": [
"email",
"publish_actions" ],
"user_id": 1207059 }
}
因為這裡後臺採用JAVA開發，在驗證地址為HTTPS請求驗證的時候，後臺利用HttpClient請求的時候涉及到證書驗證的問題，所以這裡採用了 @rongyongfeikai2同學的方法：《JAVA利用HttpClient進行POST請求（HTTPS）》，有需求的可以參考借鑑。
後臺根據對應官方的api文件的token校驗方式，對獲取到的token進行校驗。如果請求的驗證地址返回的資訊為校驗通過，則可以進行後面的操作了。
四 將第三方使用者資訊與本系統使用者進行關聯
在進行前端js請求的時候，對應平臺的api介面會獲取到使用者的資訊（參照上述程式碼）。與此同時，在進行使用者token校驗的時候，返回的對應json物件中也會包含對應的使用者資訊，這些資訊可以在後臺進行解析和獲取，詳細的資料結構可以參考官方文件。為了確保使用者資訊不會被中途截斷篡改，可以在後臺進行資料獲取。
在獲取到第三方登入使用者的資訊之後，就可以與本系統的賬戶進行匹配操作了。之後的操作存在幾種不同的方式型別，對於本系統來講，採用的是以下鑑定流程。
後敘
以上為目前我們系統中的第三方登入的基本實現方案，也許並不太完整（畢竟基本上之前沒怎麼涉及過…），但是希望其中的涉及到的點能夠幫助到大家，也希望大家能指出寫的不對的地方，並多多包涵哈。
文末也給大家，分享主要有C/C++，Linux，Nginx，ZeroMQ，MySQL，Redis，fastdfs，MongoDB，ZK，流媒體，CDN，P2P，K8S，Docker，TCP/IP，協程，DPDK技術，面試技巧方面的資料技術討論。
感興趣的朋友可