将Facebook登录名添加到Apache Cordovs iOS和Android应用

时间:2018-07-16 18:49:54

标签: facebook facebook-javascript-sdk phonegap-plugins facebook-login apache-cordova

我目前正在使用Visual Studio中的跨平台移动应用程序,该应用程序已同时部署在iOS和Android平台上。在过去的几周中,我一直尝试使用Facebook按钮添加登录名,以将诸如姓名,电子邮件和个人资料图片的功能访问到我的应用程序,但没有成功。

首先,我遵循了Facebook门户网站快速入门建议的示例代码,并结合发现的here的statusChangeCallback,可以在下面找到该代码(为保护隐私,应用ID被替换):

<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '<my app id>',
            cookie: true,
            xfbml: true,
            version: 'v3.0'
        });

        FB.AppEvents.logPageView();

        FB.getLoginStatus(function (response) {
            statusChangeCallback(response);
            console.log("RESPONSE" + response)
        });

    };

    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.
            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 + '!';
            });
        } else {
            // The person is not logged into your app or we are unable to tell.
            document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
        }
    }

    (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'));
</script>

当我在浏览器的模拟器中运行此代码时,登录按钮和帮助程序文本应如下所示:enter image description here

但是,当我单击登录按钮时,出现白色屏幕,显示以下内容:

Refused to display 'https://www.facebook.com/v3.0/dialog/oauth?channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F1e2RywyANNe.js%3Fversion%3D42%23cb%3Df684723e209734%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A4400%252Ff132608511402ac%26relation%3Dopener&redirect_uri=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F1e2RywyANNe.js%3Fversion%3D42%23cb%3Df150876c6bbae7%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A4400%252Ff132608511402ac%26relation%3Dopener%26frame%3Df2ec5b33bb9094&scope&response_type=none%2Ctoken%2Csigned_request&domain=localhost&auth_type&ref=LoginButton&origin=2&client_id=1982815652006432&sdk=joey&_rdr' in a frame because it set 'X-Frame-Options' to 'deny'.

我已经搜索了here这个问题的解决方案,但是我找不到任何适合我的解决方案。

我尝试在没有适用于Apache Cordova的Facebook插件的情况下使用此功能,并且在我的Facebook开发人员门户中尝试了许多不同的站点和域组合,但是我仍然无法解决问题。

以下是我的Facebook开发人员门户中的当前配置,我认为它是正确的,因为我的index.html文件托管在http://localhost:4400/index.html

enter image description here

enter image description here

我可以认为这不起作用的唯一原因是因为 a)我在不应该安装apache cordova插件的Facebook的情况下 b)门户网站中的localhost字段未正确设置 c)我需要单击“添加平台”按钮并创建一个iOS和Android平台 d)我的初始化代码是错误的。

非常感谢您的帮助和投入,非常感谢。

0 个答案:

没有答案