Intégrer One Tap via un iFrame

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Google One Tap peut être affiché dans un iFrame (ci-après dénommé "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 des cadres iFrame offre des risques et des flexibilités:

  • Expérience utilisateur intégrée pour One Tap et parcours d'expérience ultérieur.

    Une fois l'expérience utilisateur One Tap terminée, vous pouvez afficher le parcours d'expérience utilisateur suivant dans l'iFrame intermédiaire. Le One Tap et l'expérience utilisateur associée peuvent donc tous deux être 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 devez normalement naviguer sur la page entière pour afficher le parcours d'expérience utilisateur suivant, qui peut être intrusif dans certains cas.

  • Une seule intégration pour toutes les plates-formes

    Tout le code d'intégration One Tap (invocation de l'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ù un geste peut s'afficher, il vous suffit d'intégrer l'iFrame intermédiaire.

    Cette architecture permet de séparer les problèmes, et ainsi de réduire les coûts d'intégration et de maintenance.

  • Limitez la portée de l'exposition des jetons 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 (par exemple, sports.example.com et game.example.com).

  • Affichage des 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 que One Tap peut afficher, 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éinscrits. Par conséquent, vous ne pouvez pas afficher en un seul geste ces sous-domaines créés dynamiquement.

    Pour résoudre ce problème, utilisez le cadre 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

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

    1. Les bibliothèques ou codes JS personnalisés ne sont pas autorisés.

    2. 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>".

    Le même iFrame intermédiaire peut être réutilisé par les pages AMP et les pages HTML standards.

  • Risques de 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 ainsi désactiver l'expérience utilisateur One Tap sur son site Web. Cela posera de nombreux problèmes de confidentialité aux 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é au cadre parent, telles que des jetons d'ID, des valeurs de cookie de session, des données utilisateur, etc. Si vous ne respectez pas cette règle, vos sites Web pourraient être mis en danger.

Effectuer le rendu d'un seul appui 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 cet iFrame:

<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 le cadre 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 les paiements ou les abonnements, etc.

Vous pouvez également redimensionner l'iFrame intermédiaire comme indiqué 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 complets d'expérience de connexion ou d'inscription peuvent être mis en œuvre 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 ci-dessous.

  1. L'iFrame intermédiaire est masqué lorsque l'expérience utilisateur One Tap est terminée.

  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 la rendre visible. Ensuite, une fois la valeur de l'attribut offsetHeight disponible, vous pouvez la redimensionner à la hauteur qui convient.

L'exemple de code suivant montre comment valider l'origine du parent et redimensionner l'iFrame intermédiaire pour l'interface utilisateur pour 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 au niveau de l'expérience utilisateur

Vous devez informer la page de contenu parent de la suppression de l'iFrame intermédiaire lorsque le flux de l'expérience utilisateur est terminé. À 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 tag iFrame intermédiaire dans des pages HTML

Insérez l'extrait de code suivant dans les pages HTML que vous souhaitez que Google One tape à afficher:

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