FaceBook一站式登录网站登录（JavaScript SDK）

FaceBook一站式登录网站登录（JavaScript SDK）

官网：https://developers.facebook.com/docs/facebook-login/web#logindialog  

1.选择您的应用设置

在应用面板中选择您的应用。然后选择是否允许通过邮箱和短信登录，并为您的应用选择安全设置。有关选择访问口令设置的详细信息，请参阅访问口令，有关选择应用密钥设置的信息，请参阅使用图谱 API。

2.输入跳转网址

在应用面板中选择您的应用，然后前往产品 > Facebook 登录 > 设置。在 OAuth 客户端授权设置下的有效 OAuth 跳转网址字段中输入您的跳转网址以获得成功授权。

3.检查登录状态

首先加载Facebook 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'));

    window.fbAsyncInit = function() {

        FB.init({

            appId      : '1234567890',

            cookie     : true,  // 启用cookie

            xfbml      : true,  // 解析此页面上的社交插件

            version    : 'v2.8' // 使用图形api 2.8版本

        });

    };

appId就是创建的应用的应用编号

加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。 调用 FB.getLoginStatus即可开始此流程。 此函数会触发 Facebook 调用，获取登录状态，并调用包含结果的回调函数。
   

    
    FB.getLoginStatus(function(response) {

        statusChangeCallback(response);

    });

提供给回调的 response 对象包括许多字段：
 

   
   {

        status: 'connected',

        authResponse: {

            accessToken: '...',

            expiresIn:'...',

            signedRequest:'...',

            userID:'...'

        }

    }

status 表示应用用户的登录状态。状态可以是以下某个值：

connected。用户登录了 Facebook 和您的应用。

not_authorized。用户登录了 Facebook，但未登录您的应用。

unknown。用户未登录 Facebook，所以无法知道他们是否登录了您的应用。或者已经调用 FB.logout()，因此无法连接至 Facebook。

如果状态为 authResponse，则响应对象将包括 connected，分为以下部分：

    accessToken。包括应用用户的访问口令。

    expiresIn。表示口令到期且需要更新的 UNIX 时间。

    signedRequest。经签名的参数，其中包括应用用户的信息。

    userID 是应用用户的编号。

4.让用户登录

这里只写自定义登录按钮，如需使用官方按钮请查看文档。
 

    < button id="logina" type="button">FaceBook登录< /button>

    < script>

    document.getElementById('logina').onclick = function(){//登录

        FB.login(function(response) {

            if (response.status === 'connected') {

                FB.api('/me', function(response) {

                  console.log('Successful login for: ' + response.name);

                });

            } else {

                console.log('该用户没有登录');

            }

        }, {scope: 'public_profile,email'});

    };

    < /script>

还可以选择随此函数调用传递可选的 scope 参数，此参数是要向应用用户请求的一系列以逗号分隔的权限。 以下是调用包含 FB.login()（与“登录”按钮中使用的相同）的 scope 的方法。 在本示例中，请求的是用户的电子邮箱和也在使用应用的好友列表

5.让用户退出
 

    
    < button type="button" id="signout" >退出< /button>     

    < script>

    document.getElementById('signout').onclick = function(){

        FB.logout(function(response) {

            console.log("用户已退出");

        });

    };

    < /script>


   

 

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/113/156.html

很赞哦！ (0)