使用Facebook登录网站

作者：秋了秋发表时间：2016年08月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();