注册

网站集成最新facebook第三方登录

　　本文介绍如何在自己的网站集成facebook第三方登录，使用的是网站前端语言的Facebook Javascript SDK接口，它比使用其他网站后端语言的SDK更加简单方便。
　

一、创建Facebook应用：

　　打开网址https://developers.facebook.com/apps/，使用facebook账号登录，然后按照下面过程创建一个Facebok应用。   
  1. 点击【+添加新应用】安装，弹窗创建应用对话框；
  2. 输入你要创建的应用名称，点击【创建应用编号】,完成创建应用；
  3. 在选择商品页面中，选择【Facebook登录】，点击【Set up】；
  4. 在选择平台页面中，选择【网络】，输入你的网址，点击【Save】保存即可；
  5. 保存后，可继续按官网的介绍集成Facebook第三方登录，也可以按本站后面的介绍操作。
　

二、集成Facebook第三方登录到网站：

1、放置网站Facebok第三方登录基础代码：

　　首先，我们需要在网站前端HTML页面的BODY标签中放置如下代码，加载Facebook javaScript SDK，一定得记得修改代码中的应用编号：
<script>
    window.fbAsyncInit = function() {
      FB.init({
        appId: '393455924363180',  // 这里需要改成15位你创建的Facebook应用编号
        cookie: true,
        xfbml: true,
        version: 'v2.8'
      });
      FB.AppEvents.logPageView();
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
　

２、使用Facebook官方提供的登录按钮：

　　将下面HTML代码放到body中即可，其中chekcFBLoginStatus()为官方按钮登录完成后的回调函数 ，可以在此函数中记录用户ID，accessToken等。将用户ID作为参数，在数据库中的查询，以完成Facebook第三方登录：  
<script>
  // 使用官方按钮登录完成后的回调函数
  function chekcFBLoginStatus() {
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        alert(JSON.stringify(response));
        console.log(JSON.stringify(response)); //将登录成功返回的用户ID等信息输出到控制台
      } else {
        alert('登录失败');
      }
    });
  }
</script>
<fb:login-button scope="public_profile,email" onlogin="chekcFBLoginStatus();"></fb:login-button>
 控制台输出结果：
{
    "status": "connected",
    "authResponse": {
        "accessToken": "EAAFl7ZBSl1bwBAIpYoLhZCul3mGouYYxgcuGENE2GblkMg83hee1IoEwUK6nMEJsiHmlbUIL4WviPMQCKvM9cqaLPjflhhlCIdaTkxUKKND1vu6lVACrfJGdeEaMKZBYl8nZAhxXqm3RgVhFO8xLmWAQuN5JhawuHT8F3G9zKyDa063qoR7GUVKqBw0pcDwZD",
        "userID": "1103782483099761",
        "expiresIn": 4405,
        "signedRequest": "pZJYeUmr3vY8pAs3NQQh46-MFXUHs4quZ-xe84-FgpI.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMyY3FFa19HOTBQbkdQczk2bFJKOUVzUnhreVZwLVRlQ19oU3ZRTTJtRV9VSDdnamdNOFdLSE9IMW02WHoyWkFUendMbmQxeE8wWVd2UEdsX0xMYUU3dEhQSUh6dXdGQTJ6dFAtUGFGa1VYZW00M0llOGl3ZmtzM3Nla3AxNnpINm15LTQ4d1VyMkZKZE5fR0hjaFprZ2NFekU2cEpBLXMwWW1IemFMN3lEWjFQaURFNVZPc1NrRkt3cllMWjRzdUl4SDVNd3lPVk1YSXdVblJlSVJoNUIxcVVxbmI5SE4zZW5nczVSNEdzVXJoemZSYlRmU0h2cmFjZHptQTRBYXhWSlpHbVpoWUR2WDR3RVVSRFd6TE5INU45RFRnOGZpTGlBblZRQ215Ujk5LUhDV1REM2hVYmRsdWNsQ3VyaDl3ZDlfXzgwNVZZZlFaemFYNVl3OVVKcCIsImlzc3VlZF9hdCI6MTQ5OTg1NjM5NSwidXNlcl9pZCI6IjExMDM3ODI0ODMwOTk3NjEifQ"
    }
}
　

３、使用用户自定义样式的按钮完成Facebook第三方登录：

　　Facebook的官方登录按钮，能调整的样式有限、可能不达到我们先需求，所有我们大都数时候会使用自定义的登录按钮。要使用自定义按钮，将下面代码追加到body中即可：
<script>
    function fb_login() {
      FB.login(function(response) {
        if (response.status === 'connected') {
          alert(JSON.stringify(response));
          console.log(JSON.stringify(response));
        } else {
          alert('登录失败');
        }
      }, {scope: 'public_profile,email'});
    }
  </script>
  <button onclick="fb_login();">使用FB账号登录</button>
　

三、完成Facebook第三方登录后，调用API：

　　Facebook Javascript SDKd的Api接口十分简单好用，比如需要获取登录用户的Facebook资料，使用下面函数即可，其中fields参数代表需要返回的字段。
FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
    console.log(JSON.stringify(response));
});
控制台输入结果类似如下：
{"id":"1103783283095761","email":"465272@qq.com","first_name":"爱E族","last_name":"aiezu.com","gender":"male"}
　

四、相关网站：

0
分享 2017-07-12

0 个评论

要回复文章请先登录或注册

Copyright © 2024