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

Google One Tap peut être affiché dans un iFrame (appelé ci-après iFrame intermédiaire) hébergé sur votre propre site Web. Il n'y a aucun élément perceptible modification 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 flexibilité et risques:

  • Expérience utilisateur intégrée pour One Tap et le flux d'expérience utilisateur qui en découle.

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

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

    Sans iFrame intermédiaire, vous avez normalement besoin d'une navigation en pleine page affichent un flux UX ultérieur, qui peut être intrusif dans certains cas.

  • Intégration unique et diffusion partout.

    Tout le code d'intégration One Tap (appel de l'API One Tap et expérience utilisateur ultérieure de gestion) sont encapsulées dans l'iFrame intermédiaire. Sur les pages de contenu, où One Tap peut s'afficher, il vous suffit d'intégrer la couche intermédiaire iFrame.

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

  • Limitez le champ d'application du jeton d'ID.

    Les jetons d'ID sont consommés directement par l'iFrame intermédiaire. Il s'agit jamais exposées aux pages de contenu. Cette architecture peut considérablement réduire l'exposition des jetons d'ID.

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

  • Affichage des domaines avec One Tap

    Conformément aux Règles OAuth de Google, tous les domaines recevant OAuth doivent être préenregistrées dans la console Google Cloud. Avec normal One Appuyer sur "Intégration", les développeurs doivent préenregistrer tous les domaines pour lesquels One Tap peuvent s'afficher, car les jetons d'ID seront renvoyés à ces domaines. Un peu les sites Web permettent à leurs utilisateurs de créer dynamiquement des sous-domaines, qui sont il est impossible de se préinscrire. 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 y 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 de contenu.

  • Risques liés à la confidentialité.

    Les développeurs doivent prendre des mesures pour empêcher les cadres iFrame intermédiaires intégrées dans des domaines inattendus. Par exemple, malware.com peut intégrer votre iFrame intermédiaire et qui affichent donc l'expérience utilisateur One Tap sur leur site Web. Ce suscitera certainement de nombreuses préoccupations concernant 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 ne doit jamais envoyer de données sensibles liées à la sécurité ou à la confidentialité à son parent (jetons d'ID, valeurs des cookies de session, données utilisateur, etc.). suivre cette règle peut mettre vos sites Web en danger.

Effectuer le rendu en un geste dans l'iFrame intermédiaire

Pour afficher One Tap à l'intérieur de l'iFrame intermédiaire, placez le 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 est exécuté en mode iFrame intermédiaire. Vous pouvez définir un domaine ou un nom liste de domaines en tant que valeur de l'attribut. Les sous-domaines utilisant des caractères génériques sont également acceptés.

(Facultatif) Effectuer le rendu de l'expérience utilisateur ultérieure dans l'iFrame intermédiaire

Dans la réponse de connexion, vous pouvez renvoyer n'importe quel code HTML, qui peut afficher une partie le contenu visible par les utilisateurs finaux. Par exemple, demander des informations de profil supplémentaires, ou l'acceptation des 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ée 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 le notifyParentResize() pour les raisons suivantes.

  1. L'iFrame intermédiaire est 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é.

Lors du premier appel, vous pouvez redimensionner la hauteur de l'iFrame à 1 px visible. Ensuite, une fois la valeur de l'attribut offsetHeight disponible, vous pouvez pour la redimensionner à une hauteur appropriée.

L'exemple de code suivant montre comment valider l'origine parente et redimensionner la 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 demander à la page de contenu parent de supprimer l'iFrame intermédiaire lorsque le flux UX est terminé. À cette fin, vous pouvez placer l'extrait de code suivant 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

Placez l'extrait de code suivant dans les pages HTML sur lesquelles vous souhaitez utiliser Google One Tap à 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.