API JavaScript intermédiaire iFrame Support

Cette page de référence décrit l'API JavaScript de prise en charge des cadres iFrame intermédiaires, qui vous permet de manipuler l'iFrame intermédiaire dans l'expérience utilisateur suivante.

Pour savoir comment utiliser des iFrames intermédiaires, consultez le guide Intégrer One Tap à l'aide d'un iFrame.

Le tableau suivant répertorie toutes les méthodes disponibles et leur comportement.

Méthodes
verifyParentOrigin effectue la vérification de l'origine parente
notifyParentClose informe l'image parent que le flux UX One Tap est ignoré
notifyParentDone informe l'image parent que le flux UX One Tap est terminé
notifyParentResize indique au cadre parent de redimensionner l'iFrame intermédiaire
notifyParentTapOutsideMode indique au frame parent s'il faut annuler l'iFrame intermédiaire lorsque l'utilisateur clique en dehors de l'iFrame intermédiaire

Charger la bibliothèque JavaScript de prise en charge des cadres iFrame intermédiaires

Placez l'extrait de code suivant dans les pages HTML où vous souhaitez charger l'iFrame intermédiaire:

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

Méthode: google.accounts.id.intermediate.verifyParentOrigin

La méthode google.accounts.id.intermediate.verifyParentOrigin effectue la vérification de l'origine parente. Consultez l'exemple de code suivant pour cette méthode:

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

L'exemple de code suivant montre comment afficher l'interface utilisateur uniquement après la validation de l'origine parente:

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

Le tableau suivant répertorie les paramètres:

Paramètres
origins Origines autorisées à intégrer l'iFrame intermédiaire.
verifiedCallback Méthode de rappel JavaScript déclenchée lorsque l'origine parente actuelle est autorisée à intégrer l'iFrame intermédiaire.
verificationFailedCallback Méthode de rappel JavaScript déclenchée lorsque l'origine parente actuelle n'est pas autorisée à intégrer l'iFrame intermédiaire.

origines

Origines autorisées à intégrer l'iFrame intermédiaire. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne, tableau de chaînes ou fonction Facultatif allowed_parent_origin: "https://example.com"

Le tableau suivant répertorie les types de valeurs acceptés et leur description.

Types de valeurs
string Un seul URI de domaine. "https://example.com"
string array Tableau d'URI de domaine. "https://news.example.com,https://local.example.com"

Rappel validé

Ce champ est une méthode de rappel JavaScript déclenchée lorsque l'origine parente actuelle est autorisée à intégrer l'iFrame intermédiaire.

validationFailedCallback

Ce champ est une méthode de rappel JavaScript déclenchée lorsque l'origine parente actuelle n'est pas autorisée à intégrer l'iFrame intermédiaire.

Méthode: google.accounts.id.intermediate.notifyParentClose

La méthode google.accounts.id.intermediate.notifyParentClose indique au frame parent de fermer l'iFrame intermédiaire lorsque le flux UX One Tap est ignoré. Consultez l'exemple de code suivant pour cette méthode:

google.accounts.id.intermediate.notifyParentClose()

Méthode: google.accounts.id.intermediate.notifyParentDone

La méthode google.accounts.id.intermediate.notifyParentClose indique au frame parent de fermer l'iFrame intermédiaire et d'actualiser l'état de connexion. Consultez l'exemple de code suivant de cette méthode:

google.accounts.id.intermediate.notifyParentDone()

Méthode: google.accounts.id.intermediate.notifyParentResize

La méthode google.accounts.id.intermediate.notifyParentResize indique au frame parent de redimensionner l'iFrame intermédiaire. Consultez l'exemple de code suivant de la méthode:

google.accounts.id.intermediate.notifyParentResize(height)

hauteur

Nouvelle hauteur en pixels. Champ obligatoire. Cette valeur doit être un nombre non négatif.

Si le paramètre de hauteur est supérieur à 0, l'iFrame intermédiaire est défini sur la nouvelle hauteur. Si le paramètre de hauteur est 0, l'iFrame intermédiaire devient invisible. Un iFrame masqué n'est pas fermé. Elle peut être affichée ultérieurement par un autre appel de méthode de redimensionnement.

Méthode: google.accounts.id.intermediate.notifyParentTapOutsideMode

La méthode google.accounts.id.intermediate.notifyParentTapOutsideMode indique au frame parent s'il faut annuler l'iFrame intermédiaire lorsque l'utilisateur clique en dehors de l'iFrame intermédiaire. Consultez l'exemple de code suivant pour cette méthode:

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

annuler

Cette valeur booléenne obligatoire indique si l'iFrame intermédiaire doit être annulé lorsque l'utilisateur clique en dehors de l'iFrame intermédiaire.