最近公司要求做海外的第三方登录；目前只做了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的第三方登录；给大家一个参考，有不对的地方希望大家指正。谢谢！