Documentation de référence sur l'API Iframe intermédiaire

Cette page de référence explique comment charger un iFrame intermédiaire dans des pages HTML.

Charger la bibliothèque JavaScript d'iFrame intermédiaire

Insérez l'extrait de code suivant dans les pages HTML que vous souhaitez que Google One Tap affiche:

<script src="https://accounts.google.com/gsi/intermediate"></script>

API HTML

Vous pouvez charger l'iFrame intermédiaire en incluant un élément HTML dont l'attribut ID est défini sur g_id_intermediate_iframe. Consultez l'exemple d'extrait de code suivant:

<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ément portant l'ID "g_id_ internal_iframe"

Vous pouvez placer les attributs de données d'iframe intermédiaires dans n'importe quel élément visible ou invisible, tel que <div> et <span>. La seule exigence est que l'ID de l'élément soit défini sur g_id_intermediate_iframe. N'attribuez pas cet ID à plusieurs éléments.

Le tableau suivant répertorie les attributs de données et leurs descriptions:

Attribut
data-src URI de l'iFrame intermédiaire One Tap
data-done Méthode de rappel JavaScript à déclencher lorsque l'expérience utilisateur en un seul geste est terminée.

data-src

Cet attribut correspond à l'URI de votre iFrame One Tap intermédiaire. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Oui data-src="https://example.com/onetap_iframe.html"

données-terminées

Cet attribut est une méthode de rappel JavaScript déclenchée à la fin de l'expérience utilisateur One Tap.

Par défaut, la page de contenu est actualisée à la fin de l'expérience utilisateur One Tap. Vous pouvez remplacer le comportement par défaut en fournissant votre propre rappel de fin. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
Fonction Facultatif data-done="onOneTapSuccess"

API JavaScript

Vous pouvez charger l'iframe intermédiaire en appelant une méthode JavaScript.

Méthode: google.accounts.id.initializeIntermediate

La méthode google.accounts.id.initializeIntermediate charge l'iframe intermédiaire en fonction de l'objet de configuration. Consultez l'exemple de code suivant de la méthode:

google.accounts.id.initializeIntermediate(IntermediateConfig)

L'exemple de code suivant implémente la méthode google.accounts.id.initializeIntermediate avec une fonction onload:

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

Type de données: IntermediateConfig

Le tableau suivant répertorie les champs avec leur description:

Champ
src URI de l'iFrame intermédiaire One Tap
done Méthode de rappel JavaScript à déclencher lorsque l'expérience utilisateur en un seul geste est une.

src

Ce champ correspond à l'URI de l'iFrame intermédiaire One Tap. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Oui src: "https://example.com/onetap_iframe.html"

OK

Ce champ correspond à la méthode de rappel JavaScript à déclencher lorsque l'expérience utilisateur en un seul geste est terminée.

Par défaut, la page de contenu est actualisée à la fin de l'expérience utilisateur One Tap. Vous pouvez ignorer le comportement par défaut en fournissant votre propre rappel. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
Fonction Facultatif done: onOneTapSuccess