Publicado en 12. julio 2022 por Jan Bunk
Algunos sitios web o funciones de sitios web sólo funcionan en entornos de navegadores de confianza. Una WebView como la que utiliza tu app para mostrar tu sitio web no se considera de confianza. Esto se debe a que las funciones que utilizamos para ofrecerte una app visualmente atractiva y personalizable podrían ser objeto de abuso con fines nefastos. Obviamente, nuestras aplicaciones no realizan ni permiten tales acciones nefastas, pero algunos sitios web limitan todas las WebViews debido a este riesgo teórico.
Para evitarlo, puedes abrir las partes de tu sitio web que no funcionan en las WebViews en las llamadas pestañas personalizadas.
Si tu sitio web ofrece la función "Iniciar sesión con Google" (o con Apple, Facebook, Twitter, etc.), es posible que sólo funcione en una pestaña personalizada. Facebook dice claramente que el inicio de sesión en WebViews no está permitido, mientras que algunas de las otras simplemente no funcionan.
Aquí hay 2 capturas de pantalla de nuestra aplicación Android para que puedas ver la diferencia entre abrir una página en la aplicación y en una pestaña personalizada.
<script>
openCustomTab("https://webtoapp.design/user/login", {
"myFirstValue": "abc",
"myNumbers": "123"
});
</script>
<script>
if (isInCustomTab()) {
// continue with the next steps...
}
</script>
<script>
// this is the data you passed as a second parameter to openCustomTab, so in our example from above:
// {
// "myFirstValue": "abc",
// "myNumbers": "123"
// }
let myData = getCustomTabData();
</script>
<script>
closeCustomTab({
"somedata": "mydata",
"moredata": {
"test": "myvalue"
}
})
</script>
<script>
document.addEventListener("customTabClosed", function (e) {
if ("reason" in e.detail) {
// currently only supports the reason "closed manually"
console.log("The custom tab was " + e.detail.reason);
}
else {
// the custom tab was closed by the website javascript
// this is the data you passed to closeCustomTab, so in our example from above:
// {
// "somedata": "mydata",
// "moredata": {
// "test": "myvalue"
// }
let returnedData = e.detail;
}
});
</script>
Aquí tienes algunos ejemplos de cómo podrías implementar un flujo de entrada con pestañas personalizadas.
El principal problema es siempre que queremos que el usuario inicie la sesión en la aplicación (porque es lo que el usuario quiere utilizar), pero tiene que introducir sus datos de inicio de sesión en la pestaña personalizada que tiene cookies separadas (que es normalmente donde se almacena si alguien ha iniciado la sesión).
Esta es probablemente la forma más sencilla de iniciar sesión con una pestaña personalizada. Ten en cuenta que no debes establecer las cookies que deben ser transferidas a la aplicación como HttpOnly, porque no se puede acceder a las cookies HttpOnly a través de JavaScript.
Este método de inicio de sesión es más complicado pero más flexible, por lo que puede ser preferible dependiendo de tu caso de uso.
Las páginas cargadas en una pestaña personalizada se comportan como si se cargaran en el navegador del usuario, lo que significa que las funciones específicas de la aplicación no funcionarán, por ejemplo:
getAppPlatform
executeWhenAppReady
- Pero eso no es un problema, todas las funciones de ayuda de la aplicación para tratar con las pestañas personalizadas no necesitan esperar a que la aplicación esté lista.