Cordova混合iframe应用程序集成Facebook登录

nwlls2ji  于 2022-11-15  发布在  其他
关注(0)|答案(1)|浏览(164)

我正在构建一个Web应用程序和两个依赖于Web应用程序的混合Cordova应用程序(iOS和Android),即Cordova应用程序调用iframe Web应用程序,它运行良好。
现在,我被Facebook登录API卡住了。
FB登录API在Web应用程序上实现并运行良好,但在Android Cordova等应用程序上,由于它不是Web应用程序,没有域,因此在“站点”内没有任何页面可返回,FB API无法运行。
如果我说错了请纠正我!
我发现这个插件:https://github.com/jeduan/cordova-plugin-facebook4,通过它我们可以在Cordova项目中使用Facebook SDK。
现在,如果我实现这个插件,我将需要从Cordova应用程序发送fb.id、fb.name和fb.email到我的Web应用程序,然后我将遇到一个跨域问题。
现在该怎么办?这可以通过使用FB登录API在Web应用程序或通过使用Cordova插件来完成吗?如何处理跨域问题?

yv5phkfx

yv5phkfx1#

最后通过以下方式设法解决问题:

  • 在cordova项目中使用openfb微型库(https://github.com/ccoenraets/OpenFB
  • 要在cordova中使用openfb,cordova-plugin-inappbrowser需要插件
  • 在cordova中登录openfb后,我们需要使用postMessagehttps://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)在cordova应用程序(父应用程序)和iframe(子应用程序)之间进行通信,并发送fb登录数据(对于我:ID、姓名、电子邮件)。
  • 在web应用程序(iframe)中,需要检查是否加载了cordova,并显示/隐藏javascript fb api登录按钮、状态等。

让我们一步一步来:
1.在应用程序浏览器中安装cordova插件:

2.在 cordova 安装openfb

  • 转到https://github.com/ccoenraets/OpenFB并调用资源
  • 将openfb.js复制到cordova www文件夹中的某个位置,并在索引页中链接
  • 将logoutcallback.html和oauthcallback.html复制到cordova项目www文件夹(根目录)
  • 在openfb index.html文件中有一个< script >。我使用该脚本编写了我自己的登录/注销等方法。
  • 调用openFB.login()并响应status ==“已连接”后,可以调用:
openFB.api({
        path: '/me',
        params: { fields: "name, email" },
        success: function(data) {
            fb_data.id = data.id; // used to save my fb id
            fb_data.name = data.name; // used to save my fb name
            fb_data.email = data.email; // used to save my fb email
            // select iframe content window and post cross-domain message with fb_data
            $("iframe")[0].contentWindow.postMessage(fb_data, "*");
        },
        error: errorHandler
    });
  • 因此,我们使用openfb登录到fb,一旦登录,我们就发送带有登录数据跨域消息
    *在iframe(子)中接收来自cordova应用程序(父)的跨域消息:
  • 下面是接收跨域消息处理程序,其检查来自Cordova(父)的进入跨域消息是否加载了Cordova以及Facebook登录数据。
window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {

            var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.

            switch (event.data) {
                case "cordova-not-loaded":
                    cordova_is_loaded = "no";
                    break;
                case "cordova-is-loaded":
                    cordova_is_loaded = "yes";
                    break;
                default:
                    if (origin == "file://") {
                        fb_data = event.data; // get facebook login data
                    }
            }

        }

*检查cordova是否已载入iframe应用程序(子系)

  • 发送跨域消息到cordova应用程序(父)以检查cordova是否已加载
  • 父进程将发送另一条包含所请求数据消息
  • 然后创建监听所请求数据的间隔,一旦收到-〉如果cordova已加载,则隐藏页面上的所有javascript登录API元素

(因为我们使用javascript facebook api作为web应用程序的登录方法,如果该应用程序在cordova应用程序中用作iframe,则使用openfb)

function handleCordovaLoaded() {

        window.parent.postMessage("is-cordova-loaded", "*");
        var interval = setInterval(function() {
            if(typeof cordova_is_loaded != "undefined") {
                clearInterval(interval);
                // hide all parts of javascript social plugin if cordova is loaded
                if(cordova_is_loaded == "yes") {
                    $(".all-your-facebook-elements-in-app").hide(); // hide all your javascript fb api login buttons, statuses etc.
                }
            }
        }, 100);

    }

*在cordova应用程序(父应用程序)中接收来自iframe(子应用程序)的跨域消息

  • 如步骤4所述,我们需要检测从iframe(子)到cordova(父)的“is-cordova-loaded”跨域消息
  • 在接收到该消息之后,将答案发送回iframe(child)。
window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event)
    {
        var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
        switch(event.data) {
            case "is-cordova-loaded":
                var cordova_loaded = typeof cordova == 'undefined' ? "cordova-not-loaded" : "cordova-is-loaded";
                $("iframe")[0].contentWindow.postMessage(cordova_loaded, "*"); // get iframe content window and send cross-domain message with cordova_loaded status
                break;
        }
    }
  • 还有一件我没有提到的事情是检查我们是否登录了web应用程序(子)。如果我们没有登录,那么检查cordova是否加载,如果加载了,那么发送跨域消息,这将触发fb-login弹出在cordova应用程序。
  • 我希望这能帮助有同样问题的人。

我很乐意为您提供帮助,如果有不清楚的地方,请询问。*
::干杯::
约西普

相关问题