Facebook登录

来源:简书 分类: 文章浏览史 发布时间:2020-08-26 14:59:45 最后更新:2020-08-26 浏览:78
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-26 14:59:45

1.输入跳转网址

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

2.检查登录状态

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

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

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

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        reauthorize_required_in:'...'
        signedRequest:'...',
        userID:'...'
    }
}

status 表示应用用户的登录状态。status 可以是下列之一:

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

  • not_authorized — 用户登录了 Facebook,但未登录您的应用。

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

如果状态为 connected,则响应对象将包括 authResponse,分为以下部分:
accessToken — 包括应用用户的访问口令。
expiresIn — 表示口令到期且需要更新的 UNIX 时间。
reauthorize_required_in - 登录过期和请求重新授权之前的时长(以秒为单位)。
signedRequest — 经签名的参数,其中包括应用用户的信息。
userID — 应用用户的编号。

知道用户的登录状态后,应用就可以执行以下操作之一:

下面是提示用户登录的两种方式:

A. 让用户通过“登录”按钮登录

您可以轻松地在自己的页面中添加登录按钮。有关自定义“登录”按钮的信息,请参阅“登录”按钮。要获取基础按钮的代码,在以下配置器中输入所需的值,并点击获取代码

插件配置器
image.png

注意,在本主题末尾的示例中,我们使用按钮的 onlogin 属性设置了一个 JavaScript 回调,用于检查登录状态,了解用户是否成功登录:

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

回调如下所示。它会调用 FB.getLoginStatus(),获取最新的登录状态。(statusChangeCallback() 是本示例所包含的函数,用于处理响应。)

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

B. 让用户通过从 JavaScript SDK 调用的登录对话框登录

对于想要使用专属按钮的应用,您只需调用 FB.login(),即可调用登录对话框:

FB.login(function(response){
  // Handle the response object, like in statusChangeCallback() in our demo
  // code.
});

正如参考文档所述,此函数会生成一个展示登录对话框的弹窗,所以应只在用户点击 HTML 按钮后调用此函数(这样可以防止弹窗被浏览器阻止)。

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

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});
处理登录对话框响应

在登录流程的这一阶段,您的应用会展示“登录”对话框,用户可以选择是取消登录还是允许应用访问他们的数据。

无论用户的选择是什么,浏览器都会返回给应用,表明用户是连接还是取消状态的响应数据会发送到应用。当为应用使用 JavaScript SDK 时,会向调用 FB.login() 时指定的回调返回 authResponse 对象:

此响应可在 FB.login 调用内检测和处理,如下所示:

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
  } else {
    // The person is not logged into this app or we are unable to tell. 
  }
});

4.让用户退出

您可以向按钮或链接添加 JavaScript SDK 函数 FB.logout,让用户可以退出应用,如下所示:

FB.logout(function(response) {
   // Person is now logged out
});

完整代码示例

下面的代码会在 HTML 页面中加载和初始化 JavaScript SDK。在指示的地方添加您的应用编号。对于 API 版本,请指定要使用的图谱 API 版本。若无要使用较旧版本的特殊原因,请指定最新版本:v3.3.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      testAPI();
    } else {
      // The person is not logged into your app or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }

  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      cookie     : true,  // enable cookies to allow the server to access 
                          // the session
      xfbml      : true,  // parse social plugins on this page
      version    : '{api-version}' // The Graph API version to use for the call
    });

    // Now that we've initialized the JavaScript SDK, we call 
    // FB.getLoginStatus().  This function gets the state of the
    // person visiting this page and can return one of three states to
    // the callback you provide.  They can be:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. Not logged into Facebook and can't tell if they are logged into
    //    your app or not.
    //
    // These three cases are handled in the callback function.

    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });

  };

  // Load the SDK asynchronously
  (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'));

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    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 + '!';
    });
  }
</script>

<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

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

<div id="status">
</div>

</body>
</html>

自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="status"></div>
<button class="btn">登录</button>

<script>
  // Load Facebook sdk 加载 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'));

  function statusChangeCallback(response) {
    console.log(response);
    if (response.status === 'connected') { // connected 用户登录了 Facebook 和您的应用
      testAPI(); //如果登录获取用户信息
    } else {
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '2111462379158647',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.3'
    });
    // 页面初始化 判断是否登录
    // getLoginStatus  检查登录状态 加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });

  };
  function testAPI() {
    FB.api('/me', function(response) {
      console.log(response)
    });
  }
//点击登录
  document.querySelector('.btn').addEventListener('click',function() {
        FB.login(function(response) { // 弹出让用户登录
          if (response.status === 'connected') { //如果登录了
            FB.api('/me', function(response) { // 获取用户信息
              console.log(response)
              FB.getLoginStatus(function(response) { // 这里可以看到状态
               console.log('status')
               console.log(response)
               console.log('status')
              });
            });
          }
        })
  })

</script>
</body>
</html>

php技术微信