Intégrer One Tap à l'aide d'un iFrame

Google One Tap peut être affiché dans un iFrame (ci-après appelé iFrame intermédiaire) hébergé sur votre propre site Web. L'utilisation d'un iFrame intermédiaire n'entraîne aucun changement perceptible dans l'expérience utilisateur One Tap.

L'intégration intermédiaire basée sur des cadres 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 suivante peuvent être à la fois intégrés à la page de contenu actuelle. Voir l'exemple ci-dessous.

    Exemple d'expérience utilisateur intégrée avec un iFrame intermédiaire.

    Sans l'iFrame intermédiaire, vous avez normalement besoin d'une navigation sur toute la page pour afficher le flux d'expérience utilisateur ultérieur, qui peut être intrusif dans certains cas.

  • Intégrez une application unique et affichez-la partout.

    Tout le code d'intégration One Tap (appel de l'API One Tap et gestion de l'expérience utilisateur qui en découle) 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 du jeton d'ID.

    Les jetons d'ID 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 disposent déjà d'un sous-domaine dédié à la connexion (par exemple, login.example.com) et de plusieurs sous-domaines liés au contenu (par exemple, sports.example.com et games.example.com).

  • Affichage des domaines avec One Tap.

    Conformément aux stratégies OAuth de Google, tous les domaines qui reçoivent des réponses OAuth doivent être préenregistrés dans la console Google Cloud. 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'ID sont renvoyés à ces domaines. Certains sites Web permettent à leurs utilisateurs de créer des sous-domaines de manière dynamique, qu'il est impossible de préenregistrer. 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 des pages de contenu, car les jetons d'ID ne sont pas exposés à ces pages de contenu.

  • L'assistance AMP.

    Par défaut, Google One Tap ne peut pas être affiché sur les pages AMP pour l'une des raisons ci-dessous.

    1. La bibliothèque ou le code JS personnalisé ne sont pas autorisés.

    2. AMP Cache peut afficher la page d'un autre domaine (celui du 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 les pages HTML non-AMP.

  • Risques liés à la confidentialité.

    Les développeurs doivent prendre des mesures pour empêcher les iFrame intermédiaires d'être intégrés dans des domaines inattendus. Par exemple, "malveil.com" peut intégrer votre iFrame intermédiaire et afficher ainsi votre expérience utilisateur One Tap sur son site Web. Cela posera certainement beaucoup de problèmes de 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 One Tap 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 comme valeur d'attribut. Les sous-domaines utilisant des caractères génériques 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, 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. (par exemple, pour un paiement ou un abonnement).

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 One Tap, vous devez appeler la méthode notifyParentResize() deux fois pour les raisons suivantes.

  1. L'iFrame intermédiaire est défini sur "masqué" à la fin de l'expérience utilisateur One Tap.

  2. La valeur de l'attribut offsetHeight d'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 que la valeur de l'attribut offsetHeight est 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 l'iFrame intermédiaire de l'onglet UX Terminé

Une fois le flux d'expérience utilisateur terminé, vous devez demander à la page de contenu parent de supprimer l'iFrame intermédiaire. À cette fin, vous pouvez insérer 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 sur lesquelles 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 iFrame intermédiaire.