Nœuds et composants

Forms vous permet d’ajouter des nœuds et des composants, comme des champs, des blocs et des widgets, avec lesquels vos utilisateurs peuvent interagir dans le formulaire. Vous pouvez ensuite utiliser, dans vos formulaires et vos flux, les données saisies dans les composants.

Form nodes

Il existe cinq types de Form nodes : Start, Step, Flow, Router et écran de fin. Ces nœuds jouent un rôle très précis dans la structure du formulaire.

Step node

Les step nodes constituent la représentation visuelle du form. Ils peuvent contenir n’importe quel nombre de composants, comme des champs, des blocs et des widgets, dans lesquels l’utilisateur peut saisir ses données.

Composants de champ

Les champs sont des composants d’interface utilisateur permettant aux utilisateurs de saisir leurs renseignements dans Forms.

Paramètres des champs

Les champs comportent un certain nombre de paramètres par défaut que vous pouvez configurer selon vos besoins. Les paramètres par défaut des champs sont :

Paramètres	Description
ID	L’ID unique
Libellé	Afficher ou masquer un libellé
Obligatoire	Une valeur est requise
Texte d’aide	Afficher un texte d’aide
Texte de remplacement	Texte visible par l’utilisateur
Valeur par défaut	Valeur par défaut visible par l’utilisateur
Temporaire	Activer ou désactiver le masquage des données

Règles de validation des champs

Paramètres	Description
Longueur min. / Longueur max.	Définit une longueur minimale ou maximale pour la valeur saisie.
Valeur min. / Valeur max.	Définit une valeur numérique minimale ou maximale.

Champs disponibles dans Forms

Voici les champs disponibles, avec leurs paramètres propres et leurs types de données de sortie :

Champ de texte

Le champ standard permet à l’utilisateur de saisir n’importe quelle chaîne de caractères.Le paramètre du champ de texte est :

Paramètres	Description
Multiligne	Active la saisie de texte sur plusieurs lignes.

Le type de données de la valeur de sortie du champ de texte est string.

{
  "text_field_id": "Auth0"
}

Champ d’adresse courriel

Le champ de saisie standard permet à l’utilisateur d’entrer des adresses courriel sous forme de texte.Le type de données de la valeur de sortie du champ Email est string.

{
  "email_field_id": "username@domain.com"
}

Champ de téléphone

La saisie standard permet à l’utilisateur d’entrer des numéros de téléphone.Les paramètres du champ de numéro de téléphone sont :

Paramètres	Description
Sélecteur de pays	Active ou désactive le sélecteur de pays. Par défaut, il affiche l’emplacement IP de l’utilisateur.
Texte de l’espace réservé du filtre	Texte affiché à l’utilisateur dans la fenêtre de recherche de pays.

Le type de données de la valeur de sortie du champ de numéro de téléphone est soit string, soit, si le sélecteur de pays est activé, object.La valeur de sortie du champ de numéro de téléphone sous forme de string :

{
  "phone_field_id": "8005550175"
}

Le champ phone renvoie une valeur du type de données object :

{
  "phone_field_id": {
    "national_number": "8005550175",
    "national_format": "(800) 555-0175",
    "international_number": "+18005550175",
    "international_format": "+1 800-555-0175",
    "country_code_iso": "US",
    "country_code_number": "1"
  }
}

Champ à choix

Champ standard qui permet à un utilisateur de sélectionner une ou plusieurs valeurs.Les paramètres du champ Choice sont :

Settings	Description
Choix multiple	Active plusieurs options de choix.
Autre option	Permet aux utilisateurs de saisir leur propre option.
Advanced > Valeurs internes	Attribue une valeur interne à chaque option de choix.
Advanced > Modification en bloc	Modifie en bloc les valeurs de libellé et les valeurs internes des options de choix.

Le type de données de la valeur de sortie du champ Choice est soit une string, soit, si le choix multiple est activé, un array of strings .La valeur de sortie du champ Choice de type string :

{
  "choice_field_id": "Option A"
}

Le type de données de sortie du champ de choix est un tableau de chaînes de caractères :

{
  "choice_field_id": ["Option A", "Option B"]
}

Champ de cartes

Champ standard qui permet à l’utilisateur de sélectionner une ou plusieurs valeurs d’image.Les paramètres du champ Cards sont :

Paramètres	Description
Choix multiple	Permet de sélectionner plusieurs options.
Masquer les libellés	Masque les libellés des cartes.
Avancé > Valeurs internes	Attribue une valeur interne à chaque option.

Le type de données de la valeur de sortie du champ Cards est soit une string ou, si le choix multiple est activé, un array of strings.La valeur de sortie du champ Cards sous forme de string :

{
  "card_field_id": "Option A"
}

Le champ cards renvoie une valeur dont le type de données est array of strings :

{
  "card_field_id": ["Option A", "Option B"]
}

Champ d’URL

Le champ de saisie standard permet à l’utilisateur d’entrer une URL.Le type de données de la valeur de sortie du champ URL est une chaîne de caractères :

{
  "url_field_id": "https://auth0.com"
}

Champ de mot de passe

Champ de saisie standard qui permet à l’utilisateur d’entrer un mot de passe ou une valeur secrète.Les paramètres du champ de mot de passe sont :

Paramètres	Description
Exiger un mot de passe complexe	Les mots de passe doivent contenir une majuscule, une minuscule, un symbole et un chiffre.
Appliquer les directives du NIST	Le mot de passe doit comporter au moins 8 caractères et ne peut pas provenir de corpus de brèches antérieures, contenir des mots du dictionnaire, des caractères répétitifs ou séquentiels, ni des mots liés au contenu.
Ajouter un indicateur de robustesse	Un indicateur graphique avec une échelle rouge, jaune et verte s’affiche sous le champ de mot de passe pour montrer la robustesse du mot de passe saisi.
Hachage	Sélectionnez un algorithme pour hacher la valeur saisie directement dans le navigateur.

Le type de données de la valeur de sortie du champ de mot de passe est une string masquée :

{
  "password_field_id": "███"
}

Champ de paiement

Champ standard permettant à un utilisateur de saisir des renseignements de paiement au moyen d’un fournisseur de paiement. Les paiements sont traités avant le nœud Ending.Les paramètres du champ de paiement sont :

Paramètres	Description
Type de paiement	Sélectionnez soit un paiement unique (Charge), soit un paiement récurrent (Subscription).
Montant	Indiquez le montant d’un paiement unique (Charge).
Devise	Indiquez la devise d’un paiement unique (Charge).
Action d’abonnement	Sélectionnez soit la création, soit la mise à jour d’un abonnement existant.
Action du client	Sélectionnez soit la création, soit la mise à jour d’un client existant.
Options d’affichage	Affichez et modifiez les libellés de Numéro de carte, Date d’expiration et Code de sécurité, ainsi que les sceaux de confiance.

Le type de données de la valeur de sortie du champ de paiement est soit une chaîne de caractères, soit un objet pour les flux après la soumission.Le type de données de la valeur de sortie du champ de paiement en tant que string :

{
  "payment_field_id": "pm_1P19e..."
}

Le type de données de la valeur de sortie du champ de paiement pour les abonnements, sous forme d’object :

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "price_ids": [
      "price_1ONHR..."
    ],
    "subscription_id": "sub_1P1A...",
    "payment_intent_id": "pi_3P19e5..."
  }
}

Le type de données de la valeur de sortie du champ payment pour charge sous forme d’object :

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "amount": 100,
    "payment_intent_id": "pi_3P19e5..."
  }
}

Champ de consentement

Entrée standard qui ajoute un texte juridique et une case à cocher.Le type de données de la valeur de sortie du champ juridique est un boolean.

{
  "legal_field_id": true
}

Champ de liste déroulante

Entrée standard permettant à un utilisateur de sélectionner une ou plusieurs valeurs dans une liste déroulante.Les paramètres du champ de liste déroulante sont :

Paramètres	Description
Sélection multiple	Permet de sélectionner plusieurs options.
Avancé > Valeurs internes	Attribuez une valeur interne à chaque option.
Avancé > Modification en bloc	Modifiez en bloc le libellé et les valeurs internes.

Le type de données de la valeur de sortie du champ de liste déroulante est soit string ou, si la sélection multiple est activée, array of strings .La valeur de sortie du champ de liste déroulante de type string :

{
  "dropdown_field_id": "Option A"
}

Le type de données de sortie du champ de liste déroulante est array of strings :

{
  "dropdown_field_id": ["Option A", "Option B"]
}

Champ numérique

Champ standard qui permet à l’utilisateur de saisir des valeurs numériques.Le type de données de la valeur de sortie du champ numérique est number.

{
  "number_field_id": 123
}

Champ date / heure

Entrée standard qui permet à un utilisateur de saisir une date ou une heure.Les paramètres du champ date/heure comprennent :

Clé	Description
Format	Sélectionnez le format Date ou Heure.

La valeur du type de données de sortie du champ date/heure pour une date est une string :

{
  "date_time_field_id": "2023-04-11"
}

La valeur du type de données de sortie pour l’heure du champ date/heure est une string :

{
  "date_time_field_id": "23:15"
}

Champ booléen

Entrée standard permettant à l’utilisateur de saisir des valeurs vrai ou faux.Le type de données de la valeur de sortie du champ booléen est un booléen.

{
  "boolean_field_id": true
}

Champ personnalisé

Champ standard que vous pouvez personnaliser pour créer votre propre champ.Les paramètres du champ personnalisé sont :

Settings	Description
Params	Ajoutez des paires clé-valeur pour les référencer dans le code source du champ personnalisé.
Source code	Ajoutez votre code Javascript au champ personnalisé.
JSON Schema	Par défaut, le champ personnalisé accepte tout format de valeur. Toutefois, vous pouvez utiliser JSON Schema pour valider les valeurs.

Pour en savoir plus, consultez Composants de champ personnalisé pour Forms.

Composants Blocks

Les Blocks sont des composants d’interface utilisateur qui ajoutent des fonctionnalités à vos formulaires sans recueillir de renseignements auprès des utilisateurs.

Blocs disponibles dans Forms

Les blocs disponibles sont :

Bloc de bouton Suivant

Un bouton qui permet aux utilisateurs de passer au nœud de formulaire suivant.

Avant de continuer, les règles de validation des champs sont appliquées et validées côté client et côté serveur. Si les règles de validation des champs échouent, un message d’erreur s’affiche.
Si le nœud suivant est un nœud de flux, un indicateur de chargement s’affiche jusqu’à ce que le flux soit terminé. Si le flux échoue ou renvoie un message d’erreur personnalisé, un message d’erreur s’affiche.

Bloc de bouton Précédent

Un bouton qui permet aux utilisateurs de revenir au nœud d’étape précédent.

Si un utilisateur sélectionne le bouton précédent, les règles de validation des champs sont exécutées de nouveau, même si aucune modification n’a été apportée aux données saisies avant de continuer.

Bloc de bouton de saut

Un bouton qui permet aux utilisateurs d’ignorer l’étape en cours et de passer directement au nœud de destination.

Lorsque l’étape en cours est ignorée, nous ne validons pas et ne recueillons pas non plus les informations saisies à cette étape.

Bloc de bouton de renvoi

Un composant qui permet aux utilisateurs de réexécuter un flux pour générer et envoyer un nouveau code OTP

Si un utilisateur sélectionne le bouton de renvoi, le flux associé génère et envoie un nouveau code OTP.

Paramètres	Description
Alignement du texte	Sélectionnez l’alignement du texte : gauche, centre ou droite
Texte	Texte par défaut affiché lorsque les utilisateurs sélectionnent le bouton de renvoi
Texte du bouton	Texte du bouton
Texte d’attente	Texte affiché lorsque les utilisateurs ont sélectionné le bouton de renvoi. Remplace les paramètres `Text` et `Button text`. Utilisez la variable `“{{remaining_seconds}}”` pour afficher dynamiquement le nombre de secondes restantes avant que le bouton d’envoi soit de nouveau activé. Par exemple : “Renvoyer dans `{{remaining_seconds}}` secondes”.
Flux	Flux exécuté après que l’utilisateur a sélectionné le bouton de renvoi.
Nombre maximal de tentatives	Le nombre maximal de fois que l’utilisateur peut sélectionner le bouton de renvoi
Temps d’attente	Le temps d’attente entre les tentatives, en secondes.

Bloc de texte enrichi

Un bloc de texte enrichi pour personnaliser le nœud d’étape avec des renseignements supplémentaires.

Bloc séparateur

Une ligne pour séparer les différentes sections du nœud d’étape. Elle peut contenir un court texte.

Bloc HTML

Un bloc HTML pour créer votre interface utilisateur personnalisée.

Bloc d’image

Un bloc d’image pour personnaliser l’étape en y ajoutant des images.

Composants widgets

Les widgets sont des composants prêts à l’emploi dotés d’intégrations tierces qui ajoutent une logique côté client et côté serveur à vos formulaires.

Widgets disponibles dans Forms

Les widgets disponibles sont :

Widget d’adresse Google

Un widget qui permet à l’utilisateur de saisir et de valider son adresse.Les paramètres du widget d’adresse Google comprennent :

Paramètres	Description
Clé d’API	Nécessite une clé d’API Google Maps pour authentifier les requêtes.

Le type de données de la valeur de sortie du widget d’adresse Google est un object.

{
  "google_address_widget_id": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -73.9654415,
        40.8054491
      ]
    },
    "properties": {
      "geocoding": {
        "type": "house",
        "housenumber": "2880",
        "street": "Broadway",
        "city": "New York",
        "county": "New York County",
        "state": "New York",
        "country": "United States",
        "postcode": "10025"
      }
    }
  }
}

Google reCAPTCHA

Un widget qui aide à protéger votre site Web contre le pourriel et les abus en vérifiant qu’un utilisateur est bien un humain et non un bot.Le widget prend en charge :

Basé sur le score (v3)
Défi (v2)
- Badge reCAPTCHA invisible

Différences entre v2 et v3 :

v2 exige une interaction de l’utilisateur avec des défis visibles, par exemple cliquer sur une case à cocher ou résoudre des casse-têtes.
v3 s’exécute en arrière-plan et fournit un score fondé sur le comportement de l’utilisateur, sans exiger d’interaction de sa part. Lorsque vous utilisez cette version, assurez-vous d’implémenter une logique métier supplémentaire pour gérer le score et déterminer si une autre action est nécessaire.

Les paramètres du widget Google reCAPTCHA comprennent :

Paramètres	Description
Clé de site	La clé de site publique utilisée pour initialiser reCAPTCHA sur votre site Web. Vous pouvez la créer dans la console Google reCAPTCHA ou dans votre projet Google Cloud Platform.
Clé secrète	La clé secrète utilisée pour communiquer de façon sécurisée avec le service reCAPTCHA côté serveur. Vous pouvez la créer dans la console Google reCAPTCHA ou dans votre projet Google Cloud Platform.

Le type de données de la valeur de sortie du widget Google reCAPTCHA est un object.Exemple de réponse v2 :

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com"
  }
}

Exemple de réponse v3 :

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com",
    "score": 0.9
  }
}

Informations d’identification vérifiables

Un widget qui permet à l’utilisateur de vérifier son identité à l’aide d’informations d’identification vérifiables stockées dans son portefeuille numérique.Les paramètres du widget Informations d’identification vérifiables comprennent :

Paramètres	Description
URL	La valeur URL utilisée pour générer le code QR. Cette valeur est renvoyée dans la propriété `engagement` de la requête de vérification.
Texte du lien	Texte de remplacement affiché pour les utilisateurs qui ne peuvent pas balayer le code QR et qui préfèrent ouvrir le lien directement sur leur appareil.
Taille	La taille du code QR.
Jeton public	Le jeton d’accès requis pour utiliser le point de terminaison de polling. Veuillez vous assurer que le jeton est généré uniquement avec la portée `read:verification_request` afin d’éviter d’exposer l’accès à d’autres ressources.
ID de vérification	L’ID de vérification généré lorsque vous lancez la requête de vérification.
Temps d’attente maximal	Le temps maximal à attendre pour que le processus de vérification se termine. Une fois la durée définie atteinte, le polling s’arrêtera et une erreur sera générée, quel que soit le statut de vérification.

Le type de données de la valeur de sortie du widget Informations d’identification vérifiables est un object.

{
  "verifiable_credentials_widget_id": {
    "state": "honored",
    "reason": "...", // Le champ reason contient des renseignements supplémentaires (s’ils sont disponibles) sur l’état de la requête de vérification. 
    "presentation": {} // La présentation contient les claims fournis par le portefeuille en réponse à la définition de présentation.
  }
}

Nœud Router

Les nœuds Router vous permettent d’ajouter des règles pour créer des embranchements conditionnels entre les nœuds. Par défaut, un nœud Router comporte une seule règle de transit nommée Default Case qui se connecte à d’autres nœuds. Vous pouvez ajouter d’autres règles en fonction d’un ensemble de conditions qu’une variable doit remplir pour ensuite se connecter à d’autres nœuds. Pour en savoir plus, consultez Router.

Nœud Flow

Les nœuds Flow vous permettent d’ajouter et de créer, dans vos formulaires, une logique personnalisée et des flows d’intégration. Pour en savoir plus, consultez Flows.

Nœud Start

Les nœuds Start ne sont pas visibles pour l’utilisateur. C’est là que vous pouvez configurer des variables de champs masqués, comme les attributs de l’utilisateur, lorsque vous affichez un Form avec une Action.

Nœud d’écran de fin

Chaque formulaire comporte un nœud d’écran de fin. Par défaut, ce nœud reprend le flux d’authentification, et c’est à cet endroit que vous pouvez configurer un flux après la soumission.

Personnalisation de la marque

Personnalisation du code

Personnalisation tierce

Nœuds et composants

Form nodes

Step node

Composants de champ

Paramètres des champs

Règles de validation des champs

Champs disponibles dans Forms

Composants Blocks

Blocs disponibles dans Forms

Composants widgets

Widgets disponibles dans Forms

Nœud Router

Nœud Flow

Nœud Start

Nœud d’écran de fin

​Form nodes

​Step node

​Composants de champ

​Paramètres des champs

​Règles de validation des champs

​Champs disponibles dans Forms

​Composants Blocks

​Blocs disponibles dans Forms

​Composants widgets

​Widgets disponibles dans Forms

​Nœud Router

​Nœud Flow

​Nœud Start

​Nœud d’écran de fin

Form nodes

Step node

Composants de champ

Paramètres des champs

Règles de validation des champs

Champs disponibles dans Forms

Composants Blocks

Blocs disponibles dans Forms

Composants widgets

Widgets disponibles dans Forms

Nœud Router

Nœud Flow

Nœud Start

Nœud d’écran de fin