关于Facebook与Twitter的第三方登录

Facebook 第三方登录

一：创建和配置开发者应用

https://developers.facebook.com

二：接下来就异步引用Facebook的sdk.js并调用初始化方法；

 1 window.fbAsyncInit = function() {
 2　　FB.init({
 3　　appId :'appid',
 4　　xfbml : true,
 5　　version : 'v2.9' //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'));


三： 在html中引入Facebook按钮标签、
// 这里的HTML代码可以是自己自定义的

四：定义checkLoginState方法登录并获取token并传给后台；
               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             }


修改以上代码。appId : '{your-app-id}', 填写，你的应用ID。
即可成功调用。
可以根据实际情况做适当调整。如样式，登录提示等


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注册配置上的回调地址没有填写（Callback URL），这里的URL可以填写自己的一级域名；



在页面引入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"));

在页面上声明一个Twitter登录的button并监听登录事件。
<button class="twBtn" onclick = "login_twitter('twitter')" ></button>


初始化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             }
以上就是Facebook和Twitter的第三方登录