当前位置:秋叶网络博客 前端设计 ◊ 使用Facebook登录网站

使用Facebook登录网站

作者:秋叶 发表时间:2016年8月08日

所谓Facebook登录网站,就是获取用户在第三方网站的资料,通过使用第三方网站的资料登录或者注册目标网站。这中间Facebook提供了相应接口,通过这个接口可以拿到相应的用户资料,从而进行第三方开发,而接口的代码已经整理好,只需要修改登录button元素和回调处理函数即可。参考代码如下:

function initFacebookLogin(){
   var fbInitDefered = $.Deferred();

   window.fbAsyncInit = function() {
      FB.init({
        appId : '888888888888888', //你的Facebook开发者id,需要先在facebook开发者中心生成一个
        xfbml : true,
        version : 'v2.3'
      });
   fbInitDefered.resolve(true);
   };

   (function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

   // 登录button点击事件绑定
   $('.facebook-login').click(function() {
      if(fbInitDefered.state()=="resolved"){
         FBlogin();
      }else{
         //showNetErr();
      }
   });
}

// FB 登陆
function FBlogin() {
   FB.login(function(response) {
      if (response.status === 'connected') {
         fetchingFBInfo(function (json){
            var accessToken = response.authResponse.accessToken;
            ajaxFBlogin(json,accessToken);
            fbtrack_for_registration();
         });
      } else if (response.status === 'not_authorized'){
          console.log('未授权!');
      } else {
          console.log(response);
          console.log("请配置域名!");
      }
  },{scope: 'email'});
}

// 由于 fb sdk 使用了异步,必须使用回调才能保证数据同步
function fetchingFBInfo(onGetCallback) {
   FB.api('/me', function(response) {
      var email = response.email;
      var firstName = response.first_name;
      var familyName = response.last_name;
      var gender = response.gender;
      var graph = 'https://graph.facebook.com/' + response.id + '/picture?type=large';
      onGetCallback({
         email : email,
         firstName : firstName,
         familyName : familyName,
         gender : gender,
         graph : graph
      });
 });
}

// 获取到信息之后的回调函数处理,一般用于登录自身网站
function ajaxFBlogin(json,accessToken) {
   //*******
   console.log(json);
   console.log(accessToken);
   请书写你的登录请求ajax!
   //获取到的信息都存在json里面,可以通过json.xxx来获取信息
}
initFacebookLogin();

红色部分必须修改成自己的,然后最后一个函数自己发挥。还有一个需要注意的是,需要到开发者那去把网址加入白名单(授权)

转载请保留链接:使用Facebook登录网站 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/454.html
目录: 前端设计 | 标签: , | 6268次阅读