javascript - Facebook Canvas，无法在移动设备上从 Facebook 登录

Question

我有一个 canvas facebook 应用程序，它有一个网页和一个指定的移动页面。 该网页运行良好，并且在使用控制台将浏览器模拟到移动设备时一切正常。

但是，当我尝试从 Facebook 移动应用程序运行该应用程序时， Canvas 应用程序会加载(这是正确的)，但它不会登录。

我正在使用 FB.login 函数。

login: function () {
        var deferred = $q.defer();
        FB.login(function (response) {
            if (!response || response.error) {
                deferred.reject('Error occured');
            } else {
                deferred.resolve(response);
            }
        }, {
            scope: 'email, user_friends'
        });
        return deferred.promise;
    },

在设置 > 高级 - 我有: 客户端 OAuth 登录、Web OAuth 登录、嵌入式浏览器 OAuth 登录、有效的 OAuth 重定向 URI 和正确填写的设备登录。

但仍然来自 Facebook 移动应用程序， Canvas 应用程序不会执行登录。

我一整天都在努力让它工作。 而且我无法在任何地方找到解决方案。 我也无法调试移动 facebook 应用程序。

有什么想法可以解决这个问题吗？

编辑

还查看了我的节点服务器日志，我发现甚至没有调用 FB.login。

编辑 2

我最终用 getLoginStatus 替换了登录名，这对我来说没有问题，因为它是一个 facebook canvas 应用程序......但问题仍然是如何登录。

编辑 3 11/26/2015

好吧，getLoginStatus 并没有完全解决我的问题，因为它实际上并没有让用户登录，所以对于 Canvas 游戏，如果您需要权限，您可能需要在第一次进入时登录...我的解决方案是添加登录如果 getLoginStatus 像这样返回 not_autorized:

        /**
     * [getLoginStatus get the FB login status]
     * @return {[type]} [description]
     */
    getLoginStatus: function () {
        var deferred = $q.defer();
        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                deferred.resolve(response);
            } else if (response.status === 'not_authorized') {
                _fbFactory.login().then(function (fbLoginResponse) {
                    deferred.resolve(fbLoginResponse);
                });
            } else {
                deferred.reject('Error occured');
            }
        });
        return deferred.promise;
    },

但等等，还有更多... FB.login 函数在移动 Canvas 游戏上无法正常工作(不确定它是否未触发或浏览器记录弹出窗口或两者)。无论如何你需要通过按钮主动调用它...所以对于移动 Canvas 游戏我必须添加一个开始播放按钮然后登录才有效..

编辑 4(最终)

最终我注意到 FB.login() 不会被触发，除非它是触发它的外部事件，所以我不得不对移动 Canvas 进行更改，如果 getLoginStatus 没有返回连接，那么我会显示一个登录按钮登录...其余保持不变。 我为移动设备所做的与接受的答案相似，只是为了满足我的需要...

我希望这对我以外的人有帮助...

Answer 1

确保您使用用户触发的事件调用 FB.login()，例如单击按钮，因为浏览器可以阻止直接调用的潜在不安全/危险的 javascript。这为最终用户提供了额外的安全层。有两种创建登录按钮的方法:

1. 使用 facebooks 登录按钮生成器生成登录按钮: https://developers.facebook.com/docs/facebook-login/web/login-button

生成的登录按钮看起来类似于:

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

1. 创建您自己的 html 并使用 onclick 事件调用 FB.init():

   <button onclick="FB.init()">Login</button>
   

来自 Facebook 开发者网站的注释:

As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).

https://developers.facebook.com/docs/facebook-login/web

此外，FB.getLoginStatus 是正确的登录第一步，用于检查您的用户是否已登录 facebook 和您的应用。

There are a few steps that you will need to follow to integrate Facebook Login into your web application, most of which are included in the quickstart example at the top of this page. At a high level those are:

1. Checking the login status to see if someone's already logged into your app. During this step, you also should check to see if someone has previously logged into your app, but is not currently logged in.
2. If they are not logged in, invoke the login dialog and ask for a set of data permissions.
3. Verify their identity.
4. Store the resulting access token.
5. Make API calls.
6. Log out.

我看到您的游戏不再需要登录，但也许其他人会发现这个答案很有用。 :)