Utilisation d'onglets personnalisés dans votre application

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.

Exemples de cas d'utilisation

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.

Comment cela se présentera-t-il ?

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é.

Une capture d'écran de notre application sur la page d'accueil.

Une capture d'écran de notre application montrant la page d'accueil dans un onglet personnalisé.

Utilisation

De nombreuses fonctions utilisées dans les étapes ci-dessous sont à partir du script d'aide de l'application.

Ouvrez l'onglet personnalisé. Le premier paramètre est l'URL à ouvrir dans l'onglet personnalisé. Veillez à passer une URL complète commençant par http ou https, les URL relatives ne fonctionneront pas. Le deuxième paramètre est un objet javascript qui contient toutes les données que vous souhaitez transmettre à l'onglet personnalisé. Ces données seront transmises en tant que paramètre de requête URL. Consultez l'étape suivante pour savoir comment les récupérer.
```
<script>
    openCustomTab("https://webtoapp.design/user/login", {
        "myFirstValue": "abc",
        "myNumbers": "123"
    });
</script>
            
```
Sur la page que vous avez ouverte dans l'onglet personnalisé, vérifiez que la page a été chargée dans un onglet personnalisé (et pas seulement par un utilisateur normal du navigateur).
```
<script>
    if (isInCustomTab()) {
        // continue with the next steps...
    }
</script>
            
```

Ensuite, vous pouvez récupérer les données que vous avez transmises à l'onglet personnalisé.


<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>

Une fois que vous avez terminé ce que vous faisiez dans l'onglet personnalisé (par exemple, laisser l'utilisateur se connecter), fermez l'onglet personnalisé. Vous pouvez renvoyer un objet à la page qui a ouvert l'onglet personnalisé.
```
<script>
    closeCustomTab({
        "somedata": "mydata",
        "moredata": {
            "test": "myvalue"
        }
    })
</script>
            
```

L'utilisateur est maintenant de retour dans l'application sur la page où vous avez initialement ouvert l'onglet personnalisé. Un événement se déclenche, qui contient les données que vous avez renvoyées de l'onglet personnalisé. L'utilisateur peut également fermer l'onglet personnalisé manuellement. Le détail de l'événement l'indiquera comme vous pouvez le voir ci-dessous.


<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>

Exemples

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é).

Se connecter avec des cookies

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.

Diagramme du flux de connexion d'un onglet personnalisé où vous transférez des cookies.

Ouvrir le diagramme dans une nouvelle fenêtre

Se connecter avec un jeton

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.

Diagramme d'un flux de connexion à un onglet personnalisé où vous transférez un jeton.