Avertissement:Ces données sont fournies conformément aux Règles Google sur les données utilisateur. Veuillez examiner et respecter ce règlement. À défaut, votre projet risque d'être suspendu.

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 cadre iFrame (ci-après dénommé "iFrame intermédiaire") hébergé par votre propre site Web. Il n'y a aucun changement possible pour l'expérience utilisateur One Tap lorsqu'un iFrame intermédiaire est utilisé.

L'intégration intermédiaire basée sur les iFrames apporte des flexibilités et des risques:

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

    Une fois l'expérience utilisateur One Tap terminée, vous pouvez afficher le parcours d'expérience utilisateur ultérieur dans l'iFrame intermédiaire. Ainsi, l'expérience utilisateur One Tap et l'expérience utilisateur ultérieure peuvent être intégrées à la page de contenu actuelle. Voir l'exemple ci-dessous.

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

    Sans le cadre iFrame intermédiaire, vous aurez normalement besoin d'une navigation complète sur la page pour afficher le parcours de l'expérience utilisateur, ce qui peut être intrusive dans certains cas.

  • Intégrez G Suite et affichez-les partout.

    Tout le code d'intégration One Tap (appel d'API One Tap et gestion de l'expérience utilisateur ultérieure) est encapsulée dans le cadre intermédiaire. Sur les pages de contenu, où il suffit d'appuyer sur un bouton, vous n'avez qu'à intégrer le cadre intermédiaire.

    Cette architecture permet de séparer les tâches, et ainsi de réduire les coûts d'intégration et de maintenance.

  • Limitez la portée du jeton d'ID.

    Les jetons d'identification 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 de l'exposition des jetons d'identification.

    La méthode iFrame intermédiaire fonctionne également bien avec les sites Web qui disposent déjà d'un sous-domaine lié à la connexion dédié (par exemple, login.example.com) et plusieurs sous-domaines liés au contenu (par exemple, sports.example.com et game.example.com).

  • Afficher les domaines en un seul geste

    Conformément aux règles OAuth de Google, tous les domaines qui reçoivent les réponses OAuth doivent être préinscrits 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 transmis à ces domaines. Certains sites Web permettent à leurs utilisateurs de créer des sous-domaines de manière dynamique, qui sont impossibles à préinscrire. Par conséquent, il n'est pas possible de les afficher dans ces sous-domaines créés de façon dynamique.

    Pour résoudre ce problème, utilisez le cadre iFrame intermédiaire. Dans ce cas, seul le domaine du cadre iFrame intermédiaire doit être pré-enregistré. Vous n'avez pas besoin d'enregistrer les domaines des pages de contenu, car les jetons d'ID ne sont pas exposés à ces pages de contenu.

  • Compatibilité avec les pages AMP

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

    1. Vous ne pouvez pas utiliser de code JS personnalisé.

    2. Le cache AMP peut afficher le domaine de 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 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 standards.

  • Risques de confidentialité.

    Les développeurs doivent prendre des mesures pour empêcher l'intégration de cadres iFrame intermédiaires dans des domaines inattendus. Par exemple, malveillant.com peut intégrer votre cadre iFrame intermédiaire et ainsi dissocier l'expérience utilisateur de One Tap sur son site Web. Les utilisateurs finaux sont tout particulièrement confrontés à de nombreux problèmes de confidentialité.

  • Risques de sécurité.

    En raison du problème de cadrage inattendu mentionné ci-dessus, votre cadre iFrame intermédiaire ne doit jamais envoyer de données sensibles de sécurité ou de confidentialité à son frame 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 mis en danger.

Afficher le One Tap dans le cadre iFrame intermédiaire

Pour afficher One Tap dans le cadre iFrame intermédiaire, insérez 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écutera 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ères génériques 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 afficher du contenu visible aux utilisateurs finaux. Par exemple, vous pouvez demander des informations supplémentaires sur le profil, accepter les conditions d'utilisation, etc. Une fois la page envoyée, vous pouvez afficher d'autres pages. (paiement ou abonnement, etc.).

Vous avez également la possibilité de redimensionner le cadre iFrame intermédiaire comme dans l'exemple ci-dessous.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

En résumé, avec l'iFrame intermédiaire, les flux d'expérience de connexion ou d'inscription complets peuvent être mis en œuvre 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.

  1. Le cadre 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 égale à zéro lorsque elle est masquée.

Dans le premier appel, vous pouvez redimensionner la hauteur de l'iFrame à 1 pixel pour le rendre visible. Ensuite, lorsque la valeur de l'attribut offsetHeight est disponible, vous pouvez la redimensionner à une hauteur appropriée.

L'exemple de code suivant montre comment valider l'origine parente et redimensionner le cadre iFrame intermédiaire pour l'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>

Supprimer le cadre iFrame intermédiaire de l'expérience utilisateur terminée

Vous devez informer la page de contenu parent de la suppression du cadre iFrame intermédiaire lorsque le flux d'expérience utilisateur est terminé. Pour ce faire, 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.

Intégrer le cadre iFrame intermédiaire dans des pages HTML

Insérez l'extrait de code suivant sur toutes les pages HTML que vous souhaitez que Google One 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.