loggedIn Variable

Question

我已阅读了许多不同的文章，并看过检查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。然后用户点击登录按钮....然后登录后必须点击分享按钮，我猜是好的。

然而，我的偏好是流量略有不同。

在页面加载时，我不希望fb.init显示登录按钮。
当他们点击分享按钮时，请检查隐藏字段的值。如果他们像往常一样在帖子中登录。如果没有直接跳到登录提示。

所以＃1。我刚刚更改了FB.getLoginStatus，如果/ 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步的任何想法都将不胜感激。

谢谢

Answer 1

我认为向前推进的最好方法是在Facebook初始化后立即使用变量来查看用户的登录状态，并使用它来设置一个布尔变量来确定是立即登录还是共享。

让我们一步一步看看这个：

loggedIn Variable

首先我们要声明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()的函数中。我们现在可以做的是将tryShare()的onclick函数分配给您的Share按钮，并使用以下逻辑定义函数：

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复制的。让我知道这一切是否有意义：）

提示fb登录不只是显示登录按钮

1 个答案:

loggedIn Variable

原始Facebook初始化模板

添加FB.getLoginStatus（）

测试记录在共享之前

摘要