web开发第三方登录之twitter登陆

开发准备
1，一个线上的可以通过域名访问的拥有文件控制权限的站点
2，一个绑定了手机号码的twitter账号（没绑定手机号码不能创建项目，在twitter app 中绑定，国内的手机号码可以）

开始开发
1，前往twitter开放平台https://apps.twitter.com/创建一个项目

创建成功后可以获得appkey和app Secret

2,添加代理
打开https://auth-server.herokuapp.com/这个站点,点击signin，使用twitter账号登录，点击add new创建一个项目，

点击保存

3，编码

1).在页面引入Twitter所需的js。http://adodson.com/hello.js/dist/hello.all.js (这个是重点)

2).引入twitter jssdk

window.twttr = (function(d, s, id) {     var js, fjs = d.getElementsByTagName(s)[0],      t = window.twttr || {};      if (d.getElementById(id)) return t;      js = d.createElement(s);      js.id = id;      js.src = "https://platform.twitter.com/widgets.js";      fjs.parentNode.insertBefore(js, fjs);      t._e = [];      t.ready = function(f) {          t._e.push(f);      };      return t;}(document, "script", "twitter-wjs"));

3).在页面上声明一个Twitter登录的button并监听登录事件。

<button class="twBtn" onclick = "login_twitter('twitter')" >login</button>

4).初始化Twitter登录并定义login_twitter登录方法。

var log = console.log;　　　hello.init({                'twitter' : appkey         },          {//  redirect_uri:'/', //代理后的重定向路径，可不填                   oauth_proxy: 'https://auth-server.herokuapp.com/proxy' //这里使用默认的代理        });         function login_twitter(network){  //登录方法，并将twitter 作为参数传入                // Twitter instance                var twitter = hello(network);                // Login                twitter.login().then( function(r){                    // Get Profile                    return twitter.api('/me');                }, log ) .then( function(p){                     console.log("Connected to "+ network+" as " + p.name);                     var res = JSON.stringify(p);    //因为得不到token，但是这步已经得到用户所有信息，所以将用户信息转成JSON字符串给后台                     self.location= '/home/login.twLogin.do?result='+res;     //返回数据的地址                }, log );            }

5).返回的数据包含用户昵称，头像和地址等信息