Google One Tap peut être affiché dans un iFrame (ci-après appelé iFrame intermédiaire) hébergé par votre propre site Web. Il n'y a aucun changement perceptible dans l'expérience utilisateur One Tap lorsqu'un iFrame intermédiaire est utilisé.
L'intégration intermédiaire basée sur iFrame offre davantage de flexibilité et présente des risques:
Expérience utilisateur intégrée pour One Tap et le flux d'expérience utilisateur suivant.
Une fois l'expérience utilisateur One Tap terminée, vous pouvez afficher le flux d'expérience utilisateur suivant dans l'iFrame intermédiaire. Ainsi, One Tap et l'expérience utilisateur ultérieure peuvent être à la fois intégrées à la page de contenu actuelle. Voir l'exemple ci-dessous.
Sans l'iFrame intermédiaire, vous avez normalement besoin d'une navigation sur toute la page pour afficher le flux d'expérience utilisateur suivant, ce qui peut être intrusif dans certains cas.
Intégrez une application unique et affichez vos contenus où que vous soyez.
Tout le code d'intégration de One Tap (appel d'API One Tap et gestion de l'expérience utilisateur ultérieure) est encapsulé dans l'iFrame intermédiaire. Sur les pages de contenu où One Tap peut s'afficher, il vous suffit d'intégrer l'iFrame intermédiaire.
Cette architecture permet de séparer les tâches et réduit donc les coûts d'intégration et de maintenance.
Limitez le champ d'application de l'exposition des jetons d'ID.
Les jetons d'identification sont consommés directement par l'iFrame intermédiaire. Ils ne sont jamais exposés aux pages de contenu. Cette architecture peut réduire considérablement le champ d'application de l'exposition des jetons d'ID.
La méthode iFrame intermédiaire fonctionne également bien avec les sites Web qui possèdent déjà un sous-domaine dédié à la connexion (par exemple, login.example.com) et plusieurs sous-domaines liés au contenu (par exemple, sports.example.com et games.example.com).
Afficher les domaines avec One Tap
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 One Tap normale, les développeurs doivent préenregistrer tous les domaines que One Tap peut afficher, car les jetons d'identification sont renvoyés à ces domaines. Certains sites Web permettent aux 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.
Ce problème peut être résolu 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 des pages de contenu, car les jetons d'ID ne sont pas exposés à ces pages de contenu.
Assistance AMP.
Par défaut, Google One Tap ne peut pas s'afficher sur les pages AMP pour l'une des raisons ci-dessous.
La bibliothèque ou le code JS personnalisé ne sont pas autorisés.
AMP Cache peut afficher la page d'un autre domaine (le lecteur AMP).
Ce problème peut être résolu en utilisant l'architecture iFrame intermédiaire. Une fois l'intégration de One Tap effectuée dans un iFrame intermédiaire, les développeurs peuvent l'intégrer aux pages AMP en ajoutant un composant
<amp-onetap-google>.Le même iFrame intermédiaire peut être réutilisé par les pages AMP et par les pages HTML non-AMP.
Risques liés à la confidentialité.
Les développeurs doivent prendre des mesures pour empêcher l'intégration des iFrames intermédiaires dans des domaines inattendus. Par exemple, "malveillance.com" peut intégrer votre iFrame intermédiaire et afficher ainsi votre expérience utilisateur One Tap sur son site Web. Cela posera certainement de nombreuses préoccupations pour la confidentialité de la part des utilisateurs finaux.
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é à son frame parent (jetons d'ID, valeurs des cookies de session, données utilisateur, etc.). Le non-respect de cette règle peut mettre vos sites Web en danger.
Afficher un seul geste 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 utilisé, 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 en tant que valeur d'attribut. Les sous-domaines génériques sont également acceptés.
(Facultatif) Afficher l'expérience utilisateur suivante dans le tag iFrame intermédiaire
Dans la réponse de connexion, vous pouvez renvoyer n'importe quel code HTML, ce qui peut afficher un contenu visible pour les utilisateurs finaux. Par exemple, demander des informations de profil supplémentaires ou accepter les conditions d'utilisation. Une fois la page envoyée, vous pouvez en afficher d'autres. (paiement ou abonnement, par exemple).
Vous pouvez redimensionner l'iFrame intermédiaire:
<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 après l'expérience utilisateur avec One Tap, vous devez appeler la méthode notifyParentResize() deux fois pour les raisons suivantes.
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 0 lorsqu'il est masqué.
Dans le premier appel, vous pouvez redimensionner la hauteur de l'iFrame à 1 px pour le rendre visible. Ensuite, une fois la valeur de l'attribut offsetHeight disponible, vous pouvez la redimensionner à la hauteur appropriée.
L'exemple de code suivant montre comment valider l'origine parent et redimensionner l'iFrame intermédiaire pour l'UI 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>
Supprimer le iFrame intermédiaire de l'interface UX terminée
Une fois le flux de l'expérience utilisateur terminé, vous devez demander à la page de contenu parent de supprimer l'iFrame intermédiaire. À cette fin, 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 toutes 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 est l'URI de votre iFrame intermédiaire.