Posté le 12. juillet 2022 par Jan Bunk
Certains sites Web ou certaines fonctionnalités de sites Web ne fonctionnent que dans des environnements de navigateur de confiance. Une WebView telle que votre application l'utilise pour afficher votre site Web n'est pas considérée comme fiable. En effet, les fonctions que nous utilisons pour vous offrir une application visuellement attrayante et personnalisable peuvent être utilisées à des fins malveillantes. Bien entendu, nos applications n'effectuent ni ne permettent de telles actions néfastes, mais certains sites Web limitent toutes les WebViews en raison de ce risque théorique.
Pour éviter cela, vous pouvez ouvrir les parties de votre site Web, qui ne fonctionnent pas dans les WebViews, dans des onglets dits personnalisés.
Si votre site Web propose une fonction "Connexion avec Google" (ou Apple, Facebook, Twitter, etc.), il se peut qu'elle ne fonctionne que dans un onglet personnalisé. Facebook indique clairement que la connexion dans les WebViews n'est pas autorisée, tandis que d'autres ne fonctionnent tout simplement pas.
Voici 2 captures d'écran de notre application Android pour que vous puissiez voir la différence entre l'ouverture d'une page dans l'application et dans un onglet personnalisé.
<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>
Voici quelques exemples de la façon dont vous pourriez mettre en œuvre un flux de connexion avec des onglets personnalisés.
Le problème principal est toujours que nous voulons connecter l'utilisateur dans l'application (parce que c'est ce que l'utilisateur veut utiliser), mais qu'il doit entrer ses informations de connexion dans l'onglet personnalisé qui a des cookies séparés (qui est généralement l'endroit où vous stockez si quelqu'un est connecté).
C'est probablement la façon la plus simple de se connecter avec un onglet personnalisé. Gardez à l'esprit de ne pas définir les cookies qui doivent être transférés à l'application comme HttpOnly, car les cookies HttpOnly ne sont pas accessibles via JavaScript.
Cette méthode de connexion est plus compliquée mais plus flexible, elle peut donc être préférable en fonction de votre cas d'utilisation.
Les pages chargées dans un onglet personnalisé se comportent comme si elles étaient chargées dans le navigateur de l'utilisateur, ce qui signifie que les fonctionnalités spécifiques à l'application ne fonctionneront pas, par exemple :
getAppPlatform
executeWhenAppReady
- Mais ce n'est pas un problème, toutes les fonctions d'aide de l'application pour traiter les onglets personnalisés n'ont pas besoin d'attendre que l'application soit prête.