最近公司要求做海外的第三方登錄；目前只做了Facebook和Twitter;國內百度到的信息太少VPN FQ百度+Google了很久終於弄好了。但是做第三方登錄基本上都有個特點就是引入必須的js，設置appkey/appId;然后調用登錄方法即可得到用戶信息。
首先Facebook：
1).在Facebook開發者平台注冊自己的application；然后得到appid和應用密鑰；
2).接下來就異步引用Facebook的sdk.js並調用初始化方法；
1 window.fbAsyncInit = function() { 2 FB.init({ 3 appId :'appid', 4 xfbml : true, 5 version : 'v2.6' //facebook登錄版本 6 }); 7 }; 8 //異步引入Facebook sdk.js 9(function(d, s, id){ 10 var js, fjs = d.getElementsByTagName(s)[0]; 11 if (d.getElementById(id)) {return;} 12 js = d.createElement(s); js.id = id; 13 js.src = "//connect.facebook.net/en_US/sdk.js"; 14 fjs.parentNode.insertBefore(js, fjs); 15}(document, 'script', 'facebook-jssdk'));
3).在html中引入Facebook按鈕標簽
1 <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button> <!-- 點擊登錄時觸發checkLoginState()，此方法自定義 -->
4).定義checkLoginState方法登錄並獲取token並傳給后台；
1 var fbToken; 2 function checkLoginState(){ 3 FB.getLoginStatus(function(response) { 4 statusChangeCallback(response); 5 }); 6 } 7 function statusChangeCallback(response) { 8 if (response.status === 'connected') { //登陸狀態已連接 9 fbToken = response.authResponse.accessToken; 10 getUserInfo(); 11 } else if (response.status === 'not_authorized') { //未經授權 12 console.log('facebook未經授權'); 13 } else { 14 console.log('不是登陸到Facebook;不知道是否授權'); 15 } 16 } 17 //獲取用戶信息 18 function getUserInfo() { 19 FB.api('/me', function(response) { 20 //response.id / response.name 21 console.log('Successful login for: ' + response.name); 22 //把用戶token信息交給后台 23 self.location= '/home/login.fbLogin.do?accessToken='+fbToken; 24 }); 25 }
至此；Facebook第三方登錄前端就完成了！
接下來是Twitter；
1).還是先到Twitter開發者平台注冊自己的應用；注冊成功會得到appkey和API Secret。(在https://apps.twitter.com/上注冊自己的app/web)
2).在https://auth-server.herokuapp.com/登錄自己的Twitter賬號；然后新建一個項目把在Twitter開發者平台注冊得到的appkey和API Secret設置到這個項目中，注意一個appkey和API Secret只能設置一個域名，reference描述(舉個例子如你的項目叫百度，那就寫個百度)，domain就是項目域名(主域名)；grant_url可不填，我是填了的(https://api.twitter.com/oauth/access_token)。(最近不少博友問點擊的時候Twitter登錄框閃退。如果沒在這個網址注冊你的項目的話會有點擊Twitter閃退的現象，請務必配置)
另外：還有一個問題會導致閃退，那就是在https://apps.twitter.com注冊自己的app的時候一定要把Callback URL填上。不然也會出現閃退。我的Callback URL填的跟一級域名一樣
如下配置：
3).在頁面引入Twitter所需的js。其中要特別注意的是要引入 http://adodson.com/hello.js/dist/hello.all.js(這個是重點)
1 window.twttr = (function(d, s, id) { 2 var js, fjs = d.getElementsByTagName(s)[0], 3 t = window.twttr || {}; 4 if (d.getElementById(id)) return t; 5 js = d.createElement(s); 6 js.id = id; 7 js.src = "https://platform.twitter.com/widgets.js"; 8 fjs.parentNode.insertBefore(js, fjs); 9 10 t._e = []; 11 t.ready = function(f) { 12 t._e.push(f); 13 }; 14 15 return t; 16 }(document, "script", "twitter-wjs"));
4).在頁面上聲明一個Twitter登錄的button並監聽登錄事件。
1 <button class="twBtn" onclick = "login_twitter('twitter')" ></button>
5).初始化Twitter登錄並定義login_twitter登錄方法。
1
var log = console.log;
hello.init({
2 'twitter' : appkey 3 }, 4 { 5 // redirect_uri:'/', //代理后的重定向路徑，可不填 6 oauth_proxy: 'https://auth-server.herokuapp.com/proxy' //這里使用默認的代理 7 }); 8 function login_twitter(network){ //登錄方法，並將twitter 作為參數傳入 9 // Twitter instance 10 var twitter = hello(network); 11 // Login 12 twitter.login().then( function(r){ 13 // Get Profile 14 return twitter.api('/me'); 15 }, log ) .then( function(p){ 16 console.log("Connected to "+ network+" as " + p.name); 19 var res = JSON.stringify(p);//因為得不到token，但是這步已經得到用戶所有信息，所以將用戶信息轉成JSON字符串給后台 21 self.location= '/home/login.twLogin.do?result='+res; 22 }, log ); 23 }
完成Twitter第三方登錄前端代碼。
以上就是Facebook和Twitter的第三方登錄；給大家一個參考，有不對的地方希望大家指正。謝謝！