Instagram oAuth身份验证postMessage问题仅适用于移动浏览器 [英] Instagram oAuth Authentication postMessage issue only with Mobile Browsers

问题描述

我有一个Ionic 2应用程序（原生），它也可以在浏览器上运行，适用于移动设备和桌面浏览器。
此应用程序通过Instagram，Google，Facebook和Twitter提供身份验证。
在API方面，这由 hapi.js 和 bell 插件处理。

I have an Ionic 2 app ("native") that also runs on the browser for both mobile devices and desktop browsers. This app provides authentication via Instagram, Google, Facebook and Twitter. On the API side this is handled by hapi.js and the bell plugin.

现在，我在移动浏览器上进行身份验证时遇到了问题。

Now, I've been fighting an issue with Authentication on Instagram when doing it on a mobile browser.

当这款应用时在浏览器上运行，而不是依靠Ionic提供的身份验证机制，我们已经实现了我们的浏览器后备功能。

When this app runs on the browser instead of relying on the Ionic provided auth mechanisms we've implement our "browser" fallbacks to do it.

我们一直没有遇到任何重大问题除Instagram以外的任何实现，以前工作得很好。

We've been having no major issues with any of the implementations other than Instagram, which was previously working just fine.

我们有这个代码可以打开一个新窗口（浏览器上的标签）来处理使用社交网络登录页面，当我们取回身份验证令牌然后继续关闭选项卡并在应用程序上验证用户。

We have this code that is supposed to open a new window (tab on the browser) to deal with the social network login page and when we get back the auth token then proceed to close the tab and authenticate the user on the app.

在应用程序端，处理此问题制表符切换和通信行为看起来基本上是这样的：

On the app side, handling this tab switch and communications behaviour looks essentially like this:

private requestToken(tokenEndpoint, resolve, reject) {
    let messageReceived = false;
    let win = window.open(this.globals.BASE_URL + tokenEndpoint,
        '_blank', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=500, height=300');

    // Await auth message
    window.onmessage = (e) => {
        let credentials;
        messageReceived = true;

        try {
            credentials = JSON.parse(e.data);
        }
        catch (error) {
            credentials = e.data;
        }

        return credentials ? resolve(credentials) : reject();
    };

    let interval = window.setInterval(() => {
        try {
            // win is already null after closing first tab
            if (win == null || win.closed) {
                window.clearInterval(interval);

                if (!messageReceived) {
                    reject();
                }
            }
        }
        catch (e) { }
    }, 1000);
}

我的API会将所需数据返回到前端：

My API will return the required data to the frontend with:

<script>window.opener.postMessage('{0}', '*');window.close();</script>

，其中 {0} 是我要求的身份验证数据。

, where {0} is my required auth data.

对于任何其他社交网络，这将打开一个地址的新标签：空白并将然后更改为正确的 url 以输入用户名/密码。完成后，服务器用这个小脚本回击，手机关闭选项卡将数据传回应用程序。它完美无缺。

For any other social network, this will open a new tab with address about:blank and will then change to the correct url for inputting the username/password. When that's done, the server hits back with that little script and the phone closes the tab passing the data back to the app. It works flawlessly.

对于Instagram，行为不同。将打开一个新选项卡，它将立即关闭并显示一个新选项卡，我将在其中输入我的数据。
问题是，当服务器返回脚本时，我的 window.opener 为空，并且对原始页面的引用丢失，这阻止了我获取身份验证数据。

For Instagram the behaviour is different. A new tab will open, it will close immediately and a new one will appear, where I'll input my data back. The problem is that by the time the server gets back with the script my window.opener is null and a reference to the original page is lost which prevents me from getting the auth data back.

我如何克服这个问题？如何强制原始选项卡不关闭，而是像其他选项一样运行，只需导航到IG登录页面？
IG是否回复301或302回复？如果确实如此，我到目前为止一直无法抓住它。

How can I overcome this? How can I force the original tab to not close but rather behave as the other ones and just navigate to the IG login page? Does IG send back a 301 or 302 reply? If it does, I've been unable to catch it so far.

推荐答案

对于那些到此为止的人，解决方案是使用 window.parent.parent.postMessage（）而不是依赖 window.opener.postMessage（）

For those that end up here, the solutions was to use window.parent.parent.postMessage() rather than rely on window.opener.postMessage()

这篇关于Instagram oAuth身份验证postMessage问题仅适用于移动浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！