最近公司要求做海外的第三方登录;目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了。但是做第三方登录基本上都有个特点就是引入必须的js,设置appkey/appId;然后调用登录方法即可得到用户信息。

首先Facebook:

1).在Facebook开发者平台注册自己的application;然后得到appid和应用密钥;

2).接下来就异步引用Facebook的sdk.js并调用初始化方法;

 window.fbAsyncInit = function() {
 2  FB.init({
 3  appId :'appid',
 4  xfbml : true,
 5  version : 'v2.6' //facebook登录版本
 6  });
 };
  //异步引入Facebook sdk.js
(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);
}(document, 'script', 'facebook-jssdk'));

3).在html中引入Facebook按钮标签

 <fb:login-button scope="public_profile,email"   onlogin="checkLoginState();"></fb:login-button> <!-- 点击登录时触发checkLoginState(),此方法自定义 -->

4).定义checkLoginState方法登录并获取token并传给后台;

         var fbToken;
             function checkLoginState(){
                 FB.getLoginStatus(function(response) {
                     statusChangeCallback(response);
                 });
             }
             function statusChangeCallback(response) {
                 if (response.status === 'connected') {  //登陆状态已连接
                     fbToken = response.authResponse.accessToken;
                     getUserInfo();
                 } else if (response.status === 'not_authorized') { //未经授权
                     console.log('facebook未经授权');
                 } else {
                     console.log('不是登陆到Facebook;不知道是否授权');
                 }
             }
             //获取用户信息
             function getUserInfo() {
                 FB.api('/me', function(response) {
                     //response.id / response.name
                     console.log('Successful login for: ' + response.name);
                     //把用户token信息交给后台
                     self.location= '/home/login.fbLogin.do?accessToken='+fbToken;
                 });
             }

至此;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(这个是重点)

 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"));

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

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

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

         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 );
             }

完成Twitter第三方登录前端代码。

以上就是Facebook和Twitter的第三方登录;给大家一个参考,有不对的地方希望大家指正。谢谢!

PS:此次修改是最近同事和一些园友问的时候发现自己写少了点东西;此次修改的是Twitter登录的第3条引入的js那如有问题需要可加我QQ:615541371咨询。 2016/09/23 10:35

最新文章

  1. phpcms 服务器安全认证错误
  2. scikit-learn 线性回归算法库小结
  3. Failed to load JavaHL Library.
  4. tornado RequestHandler request.body &amp; request.arguments
  5. I/O扩展篇(基于74HC164/74HC165)
  6. AngularJS快速入门指南05:控制器
  7. Django数据库操作
  8. Web服务器控件表
  9. org.codehaus.jackson.map.JsonMappingException: No serializer found for class org.hibernate.proxy.pojo.javassist.
  10. (LeetCode 135) Candy N个孩子站成一排,给每个人设定一个权重
  11. Android Studio 导入第三方jar包
  12. Ubuntu 12.04 安装搜狗输入法
  13. JS 清除IE缓存
  14. Ztree改版 - 将图标字体化 - fontAwesome
  15. HTML 样式设计
  16. 安装配置Greenplum
  17. .net邮件发送帮助类
  18. oracle里实例和数据库之间的关系
  19. 快速上手Git
  20. 【Leetcode】收集

热门文章

  1. android 混淆文件proguard.cfg详解
  2. 在线学习体验大PK 云智慧发布在线教育网站性能监测报告
  3. SQL order by 两个字段排序
  4. android asyncTask 详解
  5. UVALive 4222 Dance 模拟题
  6. Golang学习 - io 包
  7. JSP-讲解(生成java类、静态导入与动态导入)
  8. 16、SQL Server 复制及常见错误处理
  9. Chapter 7. Dependency Management Basics 依赖管理基础
  10. Django学习(四) Django提供的后台管理系统以及如何定义URL路由
  11. HTML 颜色
  12. 【一天一道LeetCode】#117. Populating Next Right Pointers in Each Node II
  13. 分布式监控系统开发【day38】:报警模块解析(六)
  14. 单页面应用(SPA)
  15. CentOS 安装 Hadoop 手记
  16. 将n的k位清0
  17. IOS, Android, Java Web Rest : RSA 加密和解密问题
  18. 12.equals()方法总结
  19. No identifier specified for entity: springboot-jpa报错No identifier specified for entity
  20. HTML5学习笔记(八):CSS定位