Documentation de référence de l'API iframe intermédiaire

Cette page de référence décrit l'API iframe intermédiaire, utilisée pour intégrer l'invite S'identifier en un clic dans les pages Web à l'aide d'un iframe.

Pour en savoir plus sur l'utilisation des iFrames intermédiaires, consultez Intégrer One Tap à l'aide d'un iFrame.

Charger la bibliothèque JavaScript Iframe intermédiaire

Placez l'extrait de code suivant dans les pages HTML où vous souhaitez que Google One Appuyer pour afficher s'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'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 avec l'ID "g_id_intermediate_iframe"

Vous pouvez placer les attributs de données 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. Ne placez pas cet ID sur plusieurs éléments.

Le tableau suivant liste les attributs de données et leur description :

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

data-src

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

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

data-done

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

Par défaut, la page de contenu est rechargée lorsque l'expérience utilisateur One Tap est terminée. Vous pouvez remplacer le comportement par défaut en fournissant votre propre rappel "done". Pour en savoir plus, consultez le tableau ci-dessous :

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 et leur description :

Champ
src URI de votre iFrame intermédiaire One Tap
done Méthode de rappel JavaScript à déclencher lorsque l'expérience utilisateur One Tap est activée.

src

Ce champ correspond à l'URI de votre 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 One Tap est terminée.

Par défaut, la page de contenu est rechargée lorsque l'expérience utilisateur One Tap est terminée. Vous pouvez remplacer le comportement par défaut en fournissant votre propre rappel "done". Pour en savoir plus, consultez le tableau ci-dessous :

Type Obligatoire Exemple
Fonction Facultatif done: onOneTapSuccess