Afficher des Forms à l’aide d’Actions

Découvrez comment afficher un formulaire pendant un flux de connexion ou d’inscription à l’aide d’une Action post-login ou pre-user-registration.

Après avoir créé un formulaire, vous pouvez l’afficher avec Actions à l’aide de la méthode api.prompt.render() :

// Exemple utilisant le déclencheur post-login

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}

Remplacez form_id par l’ID du formulaire. Vous pouvez trouver l’ID dans l’URL du formulaire, par exemple : ap_pUMG..., ou le sélectionner dans l’onglet Rendu de l’éditeur de formulaires. Dans l’éditeur de code Actions, vous pouvez définir la logique métier pour décider quand et comment afficher le formulaire.

exports.onExecutePostLogin = async (event, api) => {

  // Afficher le formulaire uniquement si l'utilisateur n'a pas de métadonnées company_name
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}

Pour en savoir plus sur ces objets, consultez :

• Objet Event: Découvrez les objets Event et leurs propriétés.
• Objet API: Découvrez les objets API et leurs méthodes.

​

Attribuer des valeurs aux champs existants et aux champs masqués (côté client)

Vous pouvez attribuer des valeurs aux champs existants et aux champs masqués à l’aide de la propriété fields comme deuxième argument de votre méthode render.

Dans l’exemple ci-dessous, la valeur Jane est attribuée au champ first_name.

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}

N’insérez pas de renseignements sensibles; les valeurs renseignées sont exposées dans le navigateur (côté client).

Assurez-vous que le field ID mentionné dans le deuxième argument est disponible côté client dans vos nœuds et composants; sinon, la valeur ne sera pas renseignée.

​

Injecter des données personnalisées avec des variables partagées (côté serveur)

Vous pouvez injecter des variables côté serveur à l’aide de la propriété vars en tant que deuxième argument de votre méthode render. Cela permet d’injecter des données sensibles sans les exposer côté client.

Dans l’exemple ci-dessous, la valeur 123456789 renseigne la variable external_user_id.

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}

Les variables partagées {{vars.*}} ne sont soumises à aucune restriction de type de données.

Les variables partagées {{vars.*}} sont toujours masquées automatiquement.

Contrairement aux variables {{fields.*}}, la propriété {{vars.*}} n’a pas besoin d’exister dans votre formulaire avant que vous y injectiez des valeurs.

Vous pouvez utiliser la propriété {{vars.*}} pour faire référence à des variables partagées dans vos Forms et les Flows qui y sont liés. Pour en savoir plus, consultez Variables.

​

Données des champs et des variables partagées dans les Actions

Les données des champs et des variables partagées recueillies dans vos formulaires sont automatiquement disponibles dans event.prompt, dans la fonction de reprise de l’action en cours :

• La propriété id, qui contient l’ID du prompt que vous affichez.
• L’objet fields, qui contient les données de tous vos champs, y compris les champs masqués.
• L’objet vars, qui contient toutes les données de vos variables partagées.

Exemple d’objet event.prompt

{
  "id": "ap_fuVuFiiQWN3mTEujWTy966",
  "fields": {
    "first_name": "Jane",
    "company_name": "Okta"
  },
  "vars": {
    "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
    "api_hostname": "api.example.com"
  }
}

Dans l’exemple ci-dessous, api.user.setUserMetadata renseigne l’attribut company_name de user_metadata avec la propriété event.prompt.fields.company_name recueillie dans votre formulaire.

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}

​

Restrictions et limites

• Vous ne pouvez pas rediriger un utilisateur et afficher un formulaire dans la même Action. Si vous devez faire les deux, envisagez d’utiliser des Actions distinctes.

• Vous ne pouvez afficher qu’un seul formulaire par Action. Si vous devez afficher plus d’un formulaire, vous devez les afficher dans des Actions distinctes.

• La limite de taille de la propriété fields est de 24 KB.

• La méthode api.prompt.render() est offerte dans les déclencheurs suivants :

  • post-login
  • post-challenge