0

我已经阅读了许多不同的文章并看到了检查 fb 登录状态的示例。我有一个从这些教育资源构建的工作页面。

然而，我的问题是我是否可以直接切换到登录提示，从而使用户不必单击登录按钮。

目前我在 div 中有登录按钮并隐藏：

<div id="fblogin">
   .......
   class="fb-login-button"
   onlogin="afterFbLogin()"
   data-show-faces="false"
   data-width="200"
   data-max-rows="1"
   data-scope="publish_stream">
   ........
</div>

目前 FB.Init 在页面加载时运行并检查登录状态并在需要时显示 div。然后用户单击登录按钮....然后登录后必须单击共享按钮，我猜这没问题。

然而，我更喜欢有一个稍微不同的流程。

  1. 在页面加载时，我不希望 fb.init 显示登录按钮。

  2. 当他们单击共享按钮时，然后检查隐藏字段的值。如果他们像往常一样在帖子中登录。如果不直接跳转到登录提示。

所以对于#1。我刚刚将 FB.getLoginStatus if/then/else 分支更改为 not_authorized 和 unknown 以设置隐藏输入类型的值。

FB.getLoginStatus(function (response) {

   if (response.status === 'connected') 
   {
      ....code....
   }
   else if (response.status === 'not_authorized') 
   {
      document.getElementById('FbLoginStatus').value = 'not_authorized';
   }
   else 
   {
      document.getElementById('FbLoginStatus').value = 'unknown';
   }
});

对于#2。fb sdk 如下加载登录按钮（当上面的 init 检测到未登录时），但如果我对此进行编码（在 javascript 中找到此元素并执行单击）并且 facebook 更改了他们的 sdk，我的代码可能会中断。

<div tabindex="0" class="pluginFaviconButton pluginFaviconButtonEnabled pluginFaviconButtonMedium" id="u_0_0" role="button">

因此，对第 1 步的任何输入以及有关如何使用 sdk 完成第 2 步的任何想法都将不胜感激。

谢谢你

4

1 回答 1

0

我认为前进的最佳方式是简单地使用一个变量来查看一旦 facebook 初始化就获取用户的登录状态，并使用它来设置一个布尔变量来确定是立即登录还是共享。

那么让我们一步一步来看看这个：


登录变量

首先，我们要声明 bool，以便我们可以访问它并将其默认设置为 false。你可能想把它放在头脑中的某个地方。

var loggedIn = false;

原始 Facebook 初始化模板

接下来，让我们看一下基本的 Facebook 初始化模板（如果您使用不同的东西，请告诉我）：

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
            status     : true,                                 // Check Facebook Login status
            xfbml      : true                                  // Look for social plugins on the page
        });

        // Additional initialization code such as adding Event Listeners goes here
    };

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

添加 FB.getLoginStatus()

在以下行之后：

// Additional initialization code such as adding Event Listeners goes here

我们将要使用以下函数检查用户的登录状态：

// See if the User is logged in
FB.getLoginStatus(function(response) {
    if (response.status === 'connected')
    {
        // Mark the user as logged in
        loggedIn = true;
    }
});

分享前先测试登录

我不知道您在 facebook 上分享的代码是什么样的，但我们假设您将它放入一个名为fbShare(). 我们现在可以做的是将 onclick 函数分配tryShare()给您的 Share Button，并使用类似于以下逻辑的方式定义该函数：

function tryShare()
{
    if (loggedIn)
    {
        //User is already logged in and authorized
        fbShare();
    }
    else
    {
        // Pop open the FB Login dialog
        FB.login(function(response) {
            if (response.authResponse) {
                // Successful login/auth
                fbShare();
            }
            else
            {
                // Your user didn't want to log in to fb
            }
        });
    }
}

概括

因此，您的代码最终应如下所示：

<head>
...
<script ... >
...
function fbShare()
{
    // Your sharing code goes here
}

var loggedIn = false;

function tryShare()
{
    // tryShare() function immediately above this..
}
</head>
<body>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
            status     : true,                                 // Check Facebook Login status
            xfbml      : true                                  // Look for social plugins on the page
        });

        // Additional initialization code such as adding Event Listeners goes here
        
        // See if the User is logged in
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected')
            {
                // Mark the user as logged in
                loggedIn = true;
            }
        });
    };

    // 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 = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
...
<button onclick="tryShare()">Share on Facebook</button>

除此之外，大部分代码tryShare()都是直接从Facebook JavaScript SDK Reference复制而来的。让我知道这一切是否有意义:)

于 2013-10-25T13:31:14.323 回答