關於Google+以及Facebook第三方登陸實現的一點總結

時間 2019-12-05

標籤關於 google 以及第三方登陸實現一點 1點總結欄目 Google 简体版

原文原文鏈接

簡述前端

最近項目中有關於第三方登錄的需求，第三方Facebook以及Google +登陸。面試

正好這幾天把這個需求作得差很少了，收個尾，做爲一個這方面以前基本從未涉及的小白，總結下開發流程以及過程當中遇到的一些問題。但願能對你們有所幫助。ajax

基本上，目前互聯網上的涉及到第三方登陸採用的都爲OAuth認證方式，相關原理以及實現方法相關的能夠網上搜索查看。不過涉及到Facebook以及Google +的登錄，最大的問題是這兩個網站在牆外，想FQ找資料比較費勁，奈何國內這方面的資料也不是很齊全，翻到的官方的文檔又全是英文的，閱讀無能~json

第三方登錄簡單能夠分爲如下幾個步驟，分別是：得到第三方登錄許可認證；根據規範添加頁面登陸樣式和js實現，跳轉到第三方登錄頁面登錄並獲取受權後，返回原指定頁面（或請求）；後臺對登陸信息進行校驗，並獲取對應第三方登錄用戶的信息；將第三方用戶信息與本系統用戶進行關聯。後端

下面就以上幾個步驟的一些關鍵信息，或者說是我開發當中遇到的問題作一下簡要的記錄。由於Facebook以及Google +第三方登錄都採用的是Auth2技術，所以只會在具體實現不一樣的地方單獨說明。理解有誤的地方，或者是沒有說全的地方，還請各位諒解~api

一得到第三方登錄許可認證服務器

在獲取許可上，須要在對應的開發平臺上申請登錄接入許可，基本上你可能須要準備如下幾樣東西：cookie

你當前須要接入第三方登錄的網址域名（用於第三方平臺校驗是否這個登陸請求來自於你的網站自己）;數據結構

給用戶展現的網站logo和文字（用於在第三方登錄的時候給用戶直觀的展（裝）示（逼））;app

登錄成功後，跳回的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": "billd1600@gmail.com",

"at_hash": "X_B3Z3Fi4udZ2mf75RWo3w",

"email_verified": "true",