前端使用facebook login SDK

前端使用facebook login SDK

因为项目中需要使用facebook账号的第三方登录, 所以看了一下facebook的开发文档

一开始以为可以直接引入那个facebook JS SDK的js文件就可以

结果引入之后报错, 因为那份js文件使用了with语句, 而ES5的严格模式是不支持的

然后看了一下可以使用js动态引入

第一步, 引入登录SDK

(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'));

只要在项目中执行了这段代码之后, 就会有一个全局对象FB

使用这个FB对象就可以调用sdk中的api实现登录操作

初始化你的应用

调用FB.init, 把应用编号等信息传入就可以了

window.fbAsyncInit = function() {
    window.FB = FB;
    FB.init({
    appId            : '应用编号',
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v3.2'
    });
};

获取应用编号

获取引用编号首先要有一个facebook开发账号

登录账号并创建你的应用, 之后就可以在应用面板中->设置->基本中找到了

facebook开发官网

因为我是在vue项目中开发, 为了方便以后使用FB对象, 我直接在new Vue时的mounted钩子中执行了上面的代码

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted(){
    window.fbAsyncInit = function() {
      FB.init({
        appId            : '应用编码',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.2'
      });
    };

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

调起登录窗口

接下来就可以在用户点击facebook登录时调用FB.login进行登录了

判断用户登录状态

在调用FB.login之前可以判断用户是否已经登录

使用FB.getLoginStatus(callback)函数, 该函数接收一个回调函数作为参数, 回调函数会接收一个代表用户状态和用户信息的对象

FB.getLoginStatus(function(response){
    // response: 包含了用户的登录状态
    ...
});

response对象**

response对象的status属性是一个字符串, 代表用户登录状态

status值	说明
not_authorized	用户登录了 Facebook，但未登录您的应用
unknown	户未登录 Facebook，所以无法知道他们是否登录了您的应用
connected	用户登录了 Facebook 和您的应用

如果为connected, 那么response对象就会有authResponse属性, 该属性包含了一些用户信息

authResponse值	说明
accessToken	应用用户访问令牌, 这个是最重要的东西
expiresIn	表示口令到期且需要更新的 UNIX 时间
reauthorize_required_in	登录过期和请求重新授权之前的时长
signedRequest	经签名的参数
userID	应用用户编号

用户未登录时登录

如果前面的用户登录状态不是connected, 则可以调用FB.login进行登录了

调用这个方法之后会有一个弹窗, 如果用户没有登录facebook账号, 这回显示输入框让用户登录

如果已经登录, 就会提示使用该账号登录你的应用

FB.getLoginStatus(function(response){
    if(response.status !== 'connected'){
        FB.login(res => {
            // 不管用户有没有登录都会有res
        })
    }
});

调用FB.login方法之后可以通过res知道用户是否登录了我的应用

如果登录了, 就会可以通过res获取用户的登录信息了

其他的信息获取

除了上面连个方法之外, FB对象还有很多方法

可以获取到用户更多的信息

我自己也没怎么研究, 因为我只要获取accessToken就可以了

需要的朋友可以自己研究一下文档, 研究完了也可以分享一下啊