Google One Tap peut être affiché dans un cadre iFrame (ci-après appelé "iFrame intermédiaire") hébergé par votre propre site Web. Il n'y a aucune modification perceptible sur l'expérience utilisateur One Tap lorsqu'un iFrame intermédiaire est utilisé.
L'intégration intermédiaire basée sur des cadres iFrame apporte des flexibilités et des risques:
Expérience utilisateur intégrée pour One Tap et parcours d'expérience utilisateur ultérieur.
Une fois l'expérience utilisateur One Tap terminée, vous pouvez afficher le parcours utilisateur suivant dans l'iFrame intermédiaire. Ainsi, One Tap et l'expérience utilisateur suivante peuvent être intégrés à la page de contenu actuelle. Voir l'exemple ci-dessous.
Sans le cadre iFrame intermédiaire, vous aurez normalement besoin d'une navigation complète sur la page pour afficher le flux d'expérience utilisateur ultérieur, ce qui peut être intrusif dans certains cas.
Intégration unique et affichage partout :
L'intégralité du code d'intégration One Tap (appel de l'API One Tap et gestion de l'expérience utilisateur ultérieure) est encapsulée dans l'iFrame intermédiaire. Sur les pages de contenu, sur lesquelles One Tap peut s'afficher, il vous suffit d'intégrer l'iFrame intermédiaire.
Cette architecture permet de séparer les problèmes, et donc de réduire les coûts d'intégration et de maintenance.
Limiter le champ d'application de l'exposition du jeton d'ID.
Les jetons d'ID sont utilisés directement par l'iFrame intermédiaire. Ils ne sont jamais exposés aux pages de contenu. Cette architecture peut réduire considérablement la portée d'exposition des jetons d'identification.
Le cadre iFrame intermédiaire fonctionne également bien avec les sites Web qui disposent déjà d'un sous-domaine lié à la connexion (par exemple, login.example.com) et de plusieurs sous-domaines liés au contenu (sports.example.com et jeux.example.com, par exemple).
Afficher les domaines en un seul geste
Conformément aux règles OAuth de Google, tous les domaines qui reçoivent des réponses OAuth doivent être préenregistrés dans la console Google APIs. Avec l'intégration normale de One Tap, les développeurs doivent préinscrire tous les domaines susceptibles d'être affichés, car les jetons d'ID seront renvoyés à ces domaines. Certains sites Web permettent à leurs utilisateurs de créer des sous-domaines de manière dynamique, qui ne peuvent pas être préenregistrés. Par conséquent, One Tap ne peut pas être affiché dans ces sous-domaines créés dynamiquement.
Vous pouvez résoudre ce problème en utilisant l'iFrame intermédiaire. Dans ce cas, seul le domaine de l'iFrame intermédiaire doit être préenregistré. Il n'est pas nécessaire d'enregistrer les domaines de la page de contenu, car les jetons d'ID ne sont pas exposés à ces pages.
Compatibilité avec les pages AMP :
Par défaut, Google One Tap ne peut pas être affiché sur les pages AMP pour les raisons suivantes.
Le code ou la bibliothèque JS personnalisés ne sont pas autorisés.
Le cache AMP peut afficher la page sous un autre domaine (lecteur AMP).
Pour résoudre ce problème, utilisez l'architecture iFrame intermédiaire. Une fois l'intégration One Tap terminée dans un iFrame intermédiaire, les développeurs peuvent l'intégrer à des pages AMP en ajoutant un composant <amp-onetap-google>.
Un même cadre iFrame intermédiaire peut être réutilisé par les pages AMP et les pages HTML standards.
Risques liés à la confidentialité.
Les développeurs doivent prendre des mesures pour empêcher l'intégration des cadres iFrame intermédiaires dans des domaines inattendus. Par exemple, malveillant.com peut intégrer votre iFrame intermédiaire et afficher ainsi votre expérience One Tap sur son site Web. Les utilisateurs finaux sont donc confrontés à de nombreux problèmes de confidentialité.
Risques de sécurité.
En raison du problème de cadrage inattendu mentionné ci-dessus, votre iFrame intermédiaire ne doit jamais envoyer de données sensibles liées à la sécurité ou à la confidentialité vers son cadre parent, telles que des jetons d'identification, des valeurs de cookie de session, des données utilisateur, etc. Si vous ne respectez pas cette règle, vos sites Web risquent d'être en danger.
Effectuer le rendu d'une pression du doigt dans l'iFrame intermédiaire
Pour afficher One Tap dans l'iFrame intermédiaire, placez l'extrait de code suivant dans le code HTML de l'iFrame intermédiaire:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-allowed_parent_origin="https://example.com">
</div>
Si l'attribut data-allowed_parent_origin est présent, Google One Tap s'exécute en mode iFrame intermédiaire. Vous pouvez définir un domaine ou une liste de domaines séparés par une virgule comme valeur d'attribut. Les sous-domaines à caractère générique sont également acceptés.
(Facultatif) Afficher l'expérience utilisateur suivante dans l'iFrame intermédiaire
Dans la réponse de connexion, vous pouvez renvoyer n'importe quel code HTML, qui peut présenter du contenu visible aux utilisateurs finaux. Par exemple, vous pouvez demander des informations de profil supplémentaires, accepter les conditions d'utilisation, etc. Une fois la page envoyée, vous pouvez afficher d'autres pages. Par exemple, pour un paiement ou un abonnement, etc.
Vous pouvez également redimensionner l'iFrame intermédiaire comme ci-dessous.
<script src="https://accounts.google.com/gsi/intermediatesupport"></script> <script> google.accounts.id.intermediate.notifyParentResize(320); </script>
En résumé, avec un iFrame intermédiaire, les flux d'expérience utilisateur complets de connexion ou d'inscription peuvent être implémentés en tant qu'expérience utilisateur intégrée.
Pour la première page qui suit l'expérience utilisateur One Tap, vous devez appeler la méthode notifyParentResize() deux fois pour les raisons ci-dessous.
L'iFrame intermédiaire est masqué lorsque l'expérience utilisateur One Tap est terminée.
La valeur de l'attribut
offsetHeightd'un élément est égale à 0 lorsqu'il est masqué.
Lors du premier appel, vous pouvez redimensionner la hauteur d'iFrame à 1 px pour la rendre visible. Ensuite, une fois la valeur d'attribut offsetHeight disponible, vous pouvez la redimensionner à la hauteur appropriée.
L'exemple de code suivant montre comment valider l'origine du parent et redimensionner l'iFrame intermédiaire pour l'UI (interface utilisateur) après l'expérience utilisateur One Tap.
<script>
window.onload = () => {
google.accounts.id.intermediate.verifyParentOrigin(
["https://example.com","https://example-com.cdn.ampproject.org"],
() => {
google.accounts.id.intermediate.notifyParentResize(1);
window.setTimeout(() => {
let h = document.getElementById('container').offsetHeight;
google.accounts.id.intermediate.notifyParentResize(h);
}, 200);
},
() => {
document.getElementById('container').style.display = 'none';
document.getElementById('warning').innerText =
'Warning: the page is displayed in an unexpected domain!';
}
);
};
</script>
Suppression de l'iFrame intermédiaire au niveau de l'expérience utilisateur
Vous devez demander à la page de contenu parent de supprimer l'iFrame intermédiaire lorsque le flux d'expérience utilisateur est terminé. Pour cela, vous pouvez placer l'extrait de code suivant dans votre code de réponse de connexion.
<script src="https://accounts.google.com/gsi/intermediatesupport"></script> <script> google.accounts.id.intermediate.notifyParentDone(); </script>
Si le flux d'expérience utilisateur est ignoré, la méthode notifyParentClose doit être appelée à la place.
Intégrer un iFrame intermédiaire dans des pages HTML
Insérez l'extrait de code suivant dans les pages HTML que vous souhaitez que Google One Tap affiche:
<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
data-src = "https://example.com/onetap_iframe.html">
</div>
L'attribut data-src correspond à l'URI de votre cadre iFrame intermédiaire.