habilitar - detectar navegador javascript

Autenticación de OAuth de Instagram postMessage solo con navegadores móviles

Question

Tengo una aplicación Ionic 2 ("nativa") que también se ejecuta en el navegador tanto para dispositivos móviles como para navegadores de escritorio. Esta aplicación proporciona autenticación a través de Instagram, Google, Facebook y Twitter. En el lado de la API, esto es manejado por hapi.js y el plugin de bell .

Ahora, he estado lidiando con un problema con Autenticación en Instagram cuando lo hago en un navegador móvil.

Cuando esta aplicación se ejecuta en el navegador en lugar de confiar en los mecanismos de autenticación proporcionados por Ionic, implementamos nuestros errores de "navegador" para hacerlo.

No hemos tenido mayores problemas con ninguna implementación que no sea Instagram, que anteriormente funcionaba perfectamente.

Tenemos este código que se supone que abre una nueva ventana (pestaña en el navegador) para tratar con la página de inicio de sesión de la red social y cuando recuperamos el token de autenticación, procedemos a cerrar la pestaña y autenticar al usuario en la aplicación.

En el lado de la aplicación, el manejo de este interruptor de tabulación y el comportamiento de las comunicaciones se ve esencialmente así:

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);
}

Mi API devolverá los datos requeridos a la interfaz con:

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

, donde {0} es mi información de autenticación requerida.

Para cualquier otra red social, esto abrirá una nueva pestaña con la dirección about:blank y luego cambiará a la url correcta para ingresar el nombre de usuario / contraseña. Cuando se hace eso, el servidor responde con ese pequeño script y el teléfono cierra la pestaña que pasa los datos a la aplicación. Funciona sin problemas.

SIN EMBARGO ,

Para Instagram, el comportamiento es diferente. Se abrirá una nueva pestaña, se cerrará inmediatamente y aparecerá una nueva, donde ingresaré mis datos nuevamente. El problema es que para cuando el servidor vuelve con el script mi window.opener es nulo y se pierde una referencia a la página original que me impide recuperar los datos de autenticación.

¿Cómo puedo superar esto? ¿Cómo puedo forzar que la pestaña original no se cierre, sino que se comporte como las demás y simplemente navegue a la página de inicio de sesión IG? ¿IG devuelve una respuesta 301 o 302? Si lo hace, no he podido atraparlo hasta ahora.

Answer 1

Para aquellos que terminan aquí, las soluciones fueron usar window.parent.parent.postMessage() lugar de confiar en window.opener.postMessage()