网页版Facebook第三方登陆

最新推荐文章于 2024-07-25 09:24:40 发布

Jonny G

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量8.4k

点赞数 1

文章标签： jquery facebook 前端

本文链接：https://blog.csdn.net/qq_39227097/article/details/104973470

版权

网页版Facebook登陆

facebook上面，提供的三方接口很多，但是文档内容都是东拼西凑的，看起来太麻烦，没有一个能立马实现的demo，自己写的网站用了facebook登陆，在这里做一个总结。

①登陆上你的facebook，前提你要把你的账号变成开发者账号。
②主页左侧边栏在管理应用里面，点击新增应用。
在这里插入图片描述
③在产品找到Facebook登陆

④点击设置，然后打开配置页面，将你的网站地址填写进去
如果你的页面是在开发环境，用的localhost域名得话，就暂时不用配置，但是配置时，协议必须是https，如果不是，facebook会拒绝你的访问。

在这里插入图片描述
⑤配置好以后就开始写代码
1、 html代码（代码显示的是facebook自带的样式，你可以在这个页面调试Facebook自带的按钮样式）

<fb:login-button 
  scope="public_profile,email"
  onlogin="checkLoginState();">
</fb:login-button>

2、接下来就是引入Facebook.js（你可以通过更改js路径，更改你想要的语言）

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

3、用户打开新的页面就是先要判断用户是否在你的应用上已经登录了

FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
            console.log(response,"首次检测登陆")
        });

**4、**但是在调用FB里面的方法之前，你先要定义一下FB

window.fbAsyncInit = function() {
        FB.init({
            appId      : '你的应用编号',
            cookie     : true,  // 启用cookie
            xfbml      : true,  // 解析此页面上的社交插件
            version    : 'v6.0' // 使用图形api 6.0版本
        });
       }

**5、**走到这一步，你可能会发现，现在还是登录不了的，目前为止只是检测用户是否已经登录，在第三步有一个回调函数，用来接收登录后的返回数据，在这里如果检测到用户没有登录就提示登录，或者定义 testAPI()函数来调用FB函数来接收用户信息。

    function statusChangeCallback(response) {  
      console.log('statusChangeCallback');
      console.log(response);                   
      if (response.status === 'connected') {   
      testAPI();  
    } else {                               
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }

testAPI()

function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

6、如果用户没登录，你现在可以监听用户点击按钮（这个按钮是自己的样式，和FB没有关系。上面第一步说可以自己定义FB按钮，但是也可以通过函数调用方式实现自定义按钮），来调用
FB的login()函数，实现第三方登录。

      document.getElementById('facebook').onclick = function(){//登录
        FB.login(function(response) {
            if (response.status === 'connected') {
                FB.api('/me', function(response) {
                    roleName = encodeURIComponent(response.name);
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                });

            } else {
                console.log('该用户没有登录成功');
            }
        }, {scope: 'public_profile,email'});
    };

7、如果想实现用户退出功能，只需要调用logoout()

    document.getElementById('signout').onclick = function(){
    FB.logout(function(response) {
            console.log(response,"用户退出");
        });
    };

附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>facebook-login</title>
</head>
<body>
  <button id="facebook">登陆</button>
  <button id="signout">退出</button>
</body>
<script>
(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'));
window.fbAsyncInit = function() {
    FB.init({
        appId      : '你的id',
        cookie     : true,  // 启用cookie
        xfbml      : true,  // 解析此页面上的社交插件
        version    : 'v6.0' // 使用图形api 2.8版本
    });
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
        // console.log(response,"首次检测未登陆")
    });
    document.getElementById('facebook').onclick = function(){//登录
        FB.login(function(response) {
            if (response.status === 'connected') {
                $("#facebook").css("display","none")
                $("#fbLike").css("display","block")
                FB.api('/me', function(response) {
                    roleName = encodeURIComponent(response.name);
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                });

            } else {
                console.log('该用户没有登录成功');
            }
        }, {scope: 'public_profile,email'});
    };
    document.getElementById('signout').onclick = function(){
    FB.logout(function(response) {
            console.log(response,"用户退出");
        });
    };
}
</script>
</html>

Jonny G

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
网页版Facebook第三方登陆

网页版Facebook登陆facebook上面，提供的三方接口很多，但是文档内容都是东拼西凑的，看起来太麻烦，没有一个能立马实现的demo，自己写的网站用了facebook登陆，在这里做一个总结。①登陆上你的facebook，前提你要把你的账号变成开发者账号。②主页左侧边栏在管理应用里面，点击新增应用。③在产品找到Facebook登陆④点击设置，然后打开配置页面，将你的网站地址填写...
复制链接

扫一扫