diff --git a/main/docs.json b/main/docs.json index 858d0c8f6..13b5867d3 100644 --- a/main/docs.json +++ b/main/docs.json @@ -3849,65 +3849,20 @@ { "group": "Personnalisations avancées pour la connexion universelle", "pages": [ - "docs/fr-ca/customize/login-pages/advanced-customizations", + "docs/fr-ca/customize/login-pages/advanced-customizations" + "docs/fr-ca/customize/login-pages/advanced-customizations/configure", + "docs/fr-ca/customize/login-pages/advanced-customizations/quickstart", + "docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow", + "docs/fr-ca/customize/login-pages/advanced-customizations/deployment-workflow", { - "group": "Introduction aux personnalisations avancées", + "group": "Cas d'utilisation", "pages": [ - "docs/fr-ca/customize/login-pages/advanced-customizations/getting-started", - "docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens", - "docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart", - "docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations" + "docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases", + "docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind", + "docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component" ] }, - { - "group": "Construire les flux des utilisateurs", - "pages": [ - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/signup-password", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/login-password", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/sms-email-passwordless", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-a-captcha", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-custom-prompts-to-your-identifier-first-signup-screen" - ] - }, - { - "group": "Référence de la trousse SDK JS de personnalisation avancée", - "pages": [ - "docs/fr-ca/customize/login-pages/advanced-customizations", - "docs/fr-ca/customize/login-pages/advanced-customizations/getting-started", - "docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/accept-invitation", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/consent-screen-class", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/customized-consent-screen-class", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/device-code-activation", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-otp-challenge-screen-class", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-verification-result-screen-class", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/interstitial-captcha-screen-class", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/logout-screen-classes", - { - "group": "Classes d’écran de l’authentification multifacteur (MFA)", - "pages": [ - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-email", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-otp", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-phone", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-push", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-recovery-code", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-sms", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-voice", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-webauthn" - ] - }, - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/organization", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/redeem-ticket", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes", - "docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes" - ] - } + "docs/fr-ca/customize/login-pages/advanced-customizations/reference" ] } ] diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations.mdx index c67e7bb06..c7172e896 100644 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations.mdx +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations.mdx @@ -1,96 +1,85 @@ --- -title: "Personnalisations avancées pour la connexion universelle" -permalink: "advanced-customizations" -'description': "Un aperçu de la personnalisation avancée d’Auth0 pour la connexion universelle" -'og:title': "Personnalisations avancées pour la connexion universelle" -'og:description': "Un aperçu de la personnalisation avancée d’Auth0 pour la connexion universelle" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Personnalisations avancées pour la connexion universelle" -'twitter:description': "Un aperçu de la personnalisation avancée d’Auth0 pour la connexion universelle" +description: Aperçu des personnalisations avancées d'Auth0 pour la connexion universelle +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Personnalisations avancées pour la connexion universelle +'og:url': https://auth0.com/docs/ +permalink: advanced-customizations +sidebarTitle: Aperçu +title: 'Personnalisations avancées pour la connexion universelle (ACUL)' +'twitter:description': Aperçu des personnalisations avancées d'Auth0 pour la connexion universelle +'twitter:title': 'Personnalisations avancées pour la connexion universelle (ACUL)' --- +**Les personnalisations avancées pour la connexion universelle (ACUL)** étendent les capacités de [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience#universal-login-experience) pour prendre en charge le multi-marques, les configurations de sécurité complexes et l'intégration de nombreuses plateformes d'analyse. + + + +Avec ACUL, vous pouvez écrire du code dans votre framework préféré, intégrer vos plateformes d'analyse et de test A/B existantes et définir l'expérience utilisateur. Les [SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/reference) agissent comme la connexion entre votre code personnalisé et la connexion universelle. + +## Avantages + * Étendre les capacités de la connexion universelle d'Auth0 pour prendre en charge plusieurs marques dans un seul tenant. + * Profitez des fonctionnalités d'Auth0, telles que les [Passkeys](/docs/fr-ca/authenticate/database-connections/passkeys), la [Détection des robots](/docs/secure/attack-protection/bot-detection) et les [facteurs MFA](/docs/secure/multi-factor-authentication), sans reconstruire votre logique d'authentification. + * Intégrez des analyses avancées et des tests A/B pour optimiser le parcours utilisateur. + * Utilisez les SDK ACUL pour créer avec votre propre pile technologique. Vous pouvez : + * Utiliser n'importe quelle bibliothèque de CSS, JS ou de composants tierce + * Intégrer votre plateforme d'analyse préférée, telle que Heap, Mixpanel, etc. + * Construire avec votre framework frontend préféré, tel que Vue ou React + +## Cas d'utilisation +Vous souhaitez utiliser ACUL avec votre implémentation de connexion universelle si : + * Vous devez appliquer des normes de marque spécifiques à vos flux d'authentification. + * Vous devez offrir une expérience multi-marques. + * Vous devez fournir des tests A/B au niveau de l'interface utilisateur ou des analyses détaillées. + * Vous devez fournir une connexion universelle localisée dans des langues qu'Auth0 ne prend pas en charge actuellement. + * Vous devez ajouter une logique complexe ou personnalisée à vos flux d'authentification. + +Pour en savoir plus, lisez [Cas d'utilisation ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases). + +## Comment ça fonctionne +Comment fonctionne ACUL + +Comment fonctionne ACUL + +**Le temps de construction** commence lorsque vous construisez vos écrans d'authentification personnalisés dans votre propre environnement. + + Utilisez les [SDK ACUL](/docs/customize/login-pages/advanced-customizations/reference) pour soumettre votre code personnalisé afin de définir des invites et des écrans avec votre pile technologique frontend préférée, comme React ou Angular. Lorsque vous poussez des commits, votre pipeline CI/CD exécute le processus de construction, compile votre application en assets JavaScript et CSS statiques, et télécharge ces assets vers votre stockage cloud privé, qui sert de votre propre réseau de distribution de contenu (CDN). + + **Le temps d'exécution** commence lorsque votre application redirige les utilisateurs finaux vers votre page de connexion Auth0. + + Auth0 reconnaît les écrans d'authentification que vous avez configurés pour utiliser ACUL et sert une page d'hôte minimale. Le navigateur de l'utilisateur charge cette page, qui contient des balises HTML pointant vers vos URL d'assets sur votre CDN. Le navigateur télécharge votre JavaScript et CSS, vérifie leur intégrité à l'aide des hachages SRI, et rend votre interface utilisateur personnalisée. À partir de là, votre code d'application et le SDK ACUL gèrent le reste de l'interaction de l'utilisateur + + +## Exigences +Pour commencer avec la personnalisation avancée pour la connexion universelle, vous devez disposer de : + + * Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/customize/custom-domains). - -Les personnalisations avancées pour la connexion universelle sont actuellement offertes en accès anticipé. Pour en savoir plus sur les étapes de diffusion d’Auth0, consultez [Étapes de la diffusion de produit](/docs/fr-ca/troubleshoot/product-lifecycle/product-release-stages). - +Nous vous recommandons de créer un tenant pour les tests, le développement et la production avec les balises d'environnement appropriées. - -![undefined](/docs/images/fr-ca/cdy7uua7fh8z/35zbmImQjfctBqPsS2zXzq/e4f7cc15d2c0cef41a5ddf0f5ad17073/ACUL_capabilities_sampler.png) - -La fonctionnalité **Personnalisations avancées pour la connexion universelle** (ACUL) est une fonctionnalité d’accès anticipé de la connexion universelle qui vous permet de créer des versions personnalisées et rendues par le client des écrans de connexion universelle, vous donnant le contrôle sur chaque pixel de votre expérience de connexion universelle. Les personnalisations avancées pour la connexion universelle peuvent aider votre organisation : - -* Création d’une image de marque parfaite au pixel près : concevez des interfaces utilisateurs qui font partie intégrante de votre marque. -* Prendre en charge plusieurs marques ou clients au sein d’un même locataire : tirez parti des informations relatives aux applications, aux utilisateurs et aux organisations pour offrir des expériences d’authentification multimarques. -* Collecte de données analytiques et de métriques avancées : intégrez les plateformes de test A/B et d’analyse pour optimiser et innover sur les parcours d’intégration. -* Conformité aux exigences régionales : respectez les exigences régionales en matière de localisation, de protection de la vie privée et d’accessibilité. -* Tirer parti des investissements technologiques existants : exploitez les technologies qui alimentent déjà vos applications, vos systèmes de conception, vos CSS et vos cadres d’applications Javascript. -* Concevoir des expériences d’authentification personnalisées sécurisées par Auth0 : associez la sécurité et l’extensibilité des fonctionnalités Auth0 telles que les clés d’identification, la veille des menaces et le Centre de sécurité à la présentation et à l’expérience utilisateur de votre organisation. -* Équilibrer l’effort et les répercussions du développement frontal : adoptez ACUL de manière itérative ou sélective en fonction des besoins et des cas d’utilisation propres à votre entreprise. - -Les personnalisations avancées pour la connexion universelle s’appuient sur les capacités de base d’Auth0. Elles emploient un modèle client/serveur qui vous permet de contrôler entièrement l’interface côté client tout en tirant parti de la sécurité, de l’extensibilité et de la souplesse de l’authentification hébergée proposée par la connexion universelle du côté serveur. Les fonctionnalités proposées par la connexion universelle fonctionnent d’emblée avec les personnalisations avancées de la connexion universelle. - -Pour commencer à utiliser les personnalisations avancées pour la connexion universelle, consultez [Introduction à la personnalisation avancée](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started). - -## Qu’est-ce qui est pris en charge dans la phase d’accès anticipé? - -Pendant la phase d’accès anticipé, Auth0 publiera et prendra en charge des interfaces personnalisées pour chaque écran et capacité inclus par défaut dans la connexion universelle. - -L’accès anticipé est utilisable en production, et les futures versions de l’accès anticipé ne seront pas cassantes, ce qui signifie qu’elles seront rétrocompatibles avec les écrans et les fonctionnalités déjà pris en charge. Vous trouverez ci-dessous une liste des écrans et des fonctionnalités actuellement pris en charge ; ces informations peuvent également être consultées dans le [Journal des modifications Auth0](https://auth0.com/changelog). - - - - - -Cette version en accès anticipé porte sur l’API de configuration, l’outillage de développement, la prise en charge de la trousse SDK de base et la création d’interfaces utilisateur personnalisées pour les écrans de premier facteur et les capacités liées au profil d’authentification Identifier First, y compris : - -* Points de terminaison de Management API pour la configuration des personnalisations avancées pour la connexion universelle par écran. -* Prise en charge des nouveaux points de terminaison de Management API dans Terraform Provider, Deploy CLI et interface de ligne de commande Auth0. -* Une trousse SDK Typescript pour construire des interfaces et interagir avec le serveur. -* Aide à la création d’interfaces utilisateur personnalisées pour les écrans de premier facteur de type identifiant d’abord. - - + Méthodes d’authentification prises en charge - - - Mot de passe - - Courriel sans mot de passe/OTP SMS - - Clés d’identification - - Connexions Entreprise ou via réseau social - + Capacités côté client prises en charge - - - Identifiants flexibles - - Détection de robot (Captcha) - - Capturer des données supplémentaires lors de la connexion et de l’inscription - + Écrans pris en charge : - - - `login-id` - - `login-password` - - `signup-id` - - `signup-password` - - `login-passwordless-email-code` - - `login-passwordless-sms-otp` - - `passkey-enrollment` - - `passkey-enrollment-local` - - `email-identifier-challenge` - - `phone-identifier-challenge` - - `phone-identifier-enrollment` - - `interstitial-captcha` - - - - - - - -Cette version active ACUL, par défaut, pour tous les locataires d’un plan payant et se concentre sur la création d’interfaces utilisateur personnalisées pour les flux d’inscription et de connexion en une seule étape et le flux de réinitialisation de mot de passe de base, notamment : - -* `signup` -* `login` -* `reset-password` -* `reset-password-email` -* `reset-password-request` -* `reset-password-error` -* `reset-password-success` - -Il comprend également des mises à jour de la [trousse SDK pour Javascript](https://github.com/auth0/universal-login) et notre outillage CDT pour prendre en charge ces nouveaux écrans. - - - + * Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0 + * Un CDN avec un pipeline CI/CD inclus, tel que GitHub, pour héberger les assets. + + +| Lire... | Pour apprendre... | +| -------- | ------------------------------------- | +| [Configurer ACUL](/docs/customize/login-pages/advanced-customizations/configure) | Comment configurer ACUL avec votre tenant Auth0. | +|[ACUL Démarrage rapide](/docs/customize/login-pages/advanced-customizations/quickstart) | Comment démarrer avec un exemple d'application ACUL. | +|[Flux de travail de développement ACUL](/docs/customize/login-pages/advanced-customizations/development-workflow) | À propos du flux de travail de développement ACUL. | +| [Flux de travail de déploiement ACUL](/docs/customize/login-pages/advanced-customizations/deployment-workflow) |À propos du flux de travail de déploiement ACUL. | +| [Cas d'utilisation ACUL](/docs/customize/login-pages/advanced-customizations/acul-use-cases) | À propos des cas d'utilisation ACUL. | +|[SDK et ressources ACUL](/docs/customize/login-pages/advanced-customizations/reference) | À propos des SDK ACUL et des ressources pour développeurs. | \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases.mdx new file mode 100644 index 000000000..746cf9521 --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases.mdx @@ -0,0 +1,21 @@ +--- +description: En savoir plus sur les cas d'utilisation ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Cas d'utilisation ACUL +'og:url': https://auth0.com/docs/ +permalink: acul-use-cases +sidebarTitle: Aperçu +title: Cas d'utilisation ACUL +'twitter:description': En savoir plus sur les cas d'utilisation ACUL +'twitter:title': Cas d'utilisation ACUL +--- + +ACUL prend en charge diverses piles technologiques pour personnaliser entièrement l'expérience de connexion de vos utilisateurs finaux et pour s'adapter à de nombreux cas d'affaires avec une personnalisation avancée. +Utilisez les scénarios suivants pour personnaliser vos [thèmes](/docs/fr-ca/customize/login-pages/universal-login/customize-themes), [modèles](/docs/fr-ca/customize/login-pages/universal-login/customize-templates) et [éléments de texte](/docs/fr-ca/customize/login-pages/universal-login/customize-text-elements) de Connexion universelle. Pour en savoir plus sur la connexion hébergée d'Auth0, lisez [Connexion universelle Auth0](/docs/fr-ca/authenticate/login/auth0-universal-login). + +## Cas d'utilisation + +| Lire... | Pour apprendre...                            | +| -------- | ------------------------------------- | +| [Créer un thème avec Tailwind](/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind) | Comment créer un thème avec des variables Tailwind CSS avec des écrans ACUL                      | +| [Intégrer un composant personnalisé](/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component)       | Comment intégrer une bibliothèque de composants personnalisés à un écran ACUL                           | \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx new file mode 100644 index 000000000..201e5a581 --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/create-theme-tailwind.mdx @@ -0,0 +1,62 @@ +--- +description: Apprenez à créer un thème en utilisant CSS Tailwind avec ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Créer un thème avec Tailwind +'og:url': https://auth0.com/docs/ +permalink: create-theme-tailwind +title: Créer un thème avec Tailwind +'twitter:description': Apprenez à créer un thème en utilisant CSS Tailwind avec ACUL +'twitter:title': Créer un thème avec des variables Tailwind CSS +--- + + +Vous avez besoin de : + * Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/customize/custom-domains). + * Une [Application First Party](/docs/get-started/auth0-overview/create-applications#create-applications). + * Activer [l'Authentification Identifier First](/docs/authenticate/login/auth0-universal-login/identifier-first) dans votre tenant Auth0. + * [Node.js](http://Node.js) V22+ + * L'[outil Auth0 CLI](https://github.com/auth0/auth0-cli) [authentifié auprès de votre tenant existant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant). + * D'examiner le [guide de démarrage rapide ACUL](/docs/customize/login-pages/advanced-customizations/quickstart) + + +La Connexion universelle fournit un certain nombre d'[invites](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#terminology), ou d'étapes dans le processus d'authentification, chaque étape inclut au moins un écran. Vous pouvez utiliser ACUL pour appliquer un thème à tous vos écrans personnalisés. + +Par exemple : + +![capture d'écran de référence de login-id](https://cdn2.auth0.com/docs/1.14516.0/media/articles/universal-login/text-customization/login-id.png) + +Vous pouvez appliquer un thème à cet écran de connexion en utilisant [Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite). + +Toutes les personnalisations de thème et de branding se trouvent dans le répertoire `src/index.css` du projet ACUL. + +1. Utilisez l'outil Auth0 CLI pour créer un projet ACUL avec les écrans pour appliquer un nouveau thème. + +```bash +auth0 acul init +``` + +2. Modifiez le fichier CSS src/index.css. + +```css +/* In src/index.css */ +:root { + /* Change these CSS variables to match your brand's primary color */ + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + + /* Override the theme variables to reference your custom color*/ + --color-primary-button: var(--ul-theme-color-primary-button); + + /* You can also override specific component colors directly */ + --color-header: var(--primary-foreground); + --color-body-text: #000000; + --color-widget-bg: white; + --color-widget-border: transparent; + /* ... and many more */ +} +``` + + +Les variables CSS dans le bloc @theme inline sont utilisées par les composants de base. +Les variables CSS préfixées par --ul-theme- sont définies sur le style par défaut de la Connexion universelle et sont automatiquement remplacées par le thème de Branding défini dans votre tenant lors de l'exécution. Pour en savoir plus, lisez le fichier src/utils/theme/themeEngine.ts dans le répertoire de votre projet. + \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx new file mode 100644 index 000000000..719e9799f --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/acul-use-cases/integrate-custom-component.mdx @@ -0,0 +1,100 @@ +--- +description: Apprenez à intégrer une bibliothèque de composants personnalisés avec ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Intégrer une bibliothèque de composants personnalisés +'og:url': https://auth0.com/docs/ +permalink: integrate-custom-component +title: Intégrer une bibliothèque de composants personnalisés +'twitter:description': Apprenez à intégrer une bibliothèque de composants personnalisés avec ACUL +'twitter:title': Intégrer une bibliothèque de composants personnalisés +--- + +Vous avez besoin de : + * Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains). + * Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0. + * [L'Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0. + * [Node.js](http://Node.js) V22+ + * L'[outil Auth0 CLI](https://github.com/auth0/auth0-cli) [authentifié auprès de votre tenant existant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant). + * D'examiner le [guide de démarrage rapide ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart) + + +Avec ACUL, vous pouvez utiliser la bibliothèque de composants de votre choix pour personnaliser les écrans d'invite de votre Connexion universelle. L'exemple suivant utilise [Shadcn](https://ui.shadcn.com/docs), une bibliothèque de composants réutilisables et l'écran `login-passwordless-email-code` d'Auth0. Dans cet exemple, remplacez le champ de saisie OTP par défaut par le composant [InputOTP](https://ui.shadcn.com/docs/components/input-otp) de Shadcn. + +1. Utilisez l'outil Auth0 CLI pour créer un projet ACUL. + +```bash +auth0 acul init +``` +Sélectionnez l'écran login-passwordless-email-code + +2. Exécutez le serveur de développement local ACUL pour modifier et visualiser les mises à jour de votre écran. +```bash +auth0 acul dev +``` +3. Initialisez Shadcn à la racine de votre projet : +```bash +npx shadcn-ui@latest init +``` +4. Suivez les invites de la CLI pour créer le fichier components.json afin de contenir la configuration de votre projet et un fichier src/lib/utils.ts. + +5. Ajoutez les fichiers de composants à src/components/ui/input-otp.tsx : +```bash +npx shadcn-ui@latest add input-otp +``` +6. Intégrez le composant : + a. Naviguez jusqu'à src/screens/login-passwordless-email-code/components/IdentifierForm.tsx et ouvrez le fichier. + b. Importez les composants InputOTP et remplacez le champ de saisie existant. Vous devez également gérer l'état du code OTP et utiliser le hook SDK correct. +```bash +// In IdentifierForm.tsx +import { useState } from 'react'; +import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; +import { + InputOTP, + InputOTPGroup, + InputOTPSlot, +} from '@/components/ui/input-otp'; // Import from ShadCN + +// ... inside your component +const { submit } = useEmailOtpChallenge(); +const [otp, setOtp] = useState(''); + +const handleSubmit = (e) => { + e.preventDefault(); + submit({ code: otp }); // Call the submit method with the code +}; + +return ( +
+ {/* ... other UI elements ... */} + + + + + + + + + + + +
+); +``` + +7. Exécutez l'écran localement avec l'Inspecteur de Contexte ACUL pour voir votre nouveau composant : +```bash +auth0 acul dev -s login-passwordless-email-code +``` + +8. onnectez votre environnement de développement local à votre tenant de test pour essayer le nouvel écran dans un flux d'authentification en direct : + +```bash +auth0 acul dev --connected --screen login-passwordless-email-code +``` +9. Suivez les invites pour construire vos assets locaux, démarrer le serveur de développement local et mettre à jour la configuration ACUL sur votre tenant. + +10. Testez le flux d'authentification sans mot de passe : + +```bash +auth0 test login +``` diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows.mdx deleted file mode 100644 index 25046edee..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: "Créer des flux d’utilisateurs" -permalink: "build-user-flows" -'description': "Guides sur la façon de créer des flux d’utilisateurs pour la personnalisation avancée de la connexion universelle." -'og:title': "Créer des flux d’utilisateurs" -'og:description': "Guides sur la façon de créer des flux d’utilisateurs pour la personnalisation avancée de la connexion universelle." -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Créer des flux d’utilisateurs" -'twitter:description': "Guides sur la façon de créer des flux d’utilisateurs pour la personnalisation avancée de la connexion universelle." ---- - -Les guides suivants vous aideront à créer des flux d’utilisateurs pour la personnalisation avancée de la connexion universelle. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Lisez...Pour apprendre...
Créer une inscription avec mot de passeComment personnaliser un flux d’inscription utilisant un mot de passe.
Créer une inscription Identifier First avec mot de passeComment personnaliser un flux d’inscription Identifier↓First utilisant un mot de passe.
Créer une connexion avec mot de passeComment personnaliser un flux de connexion utilisant un mot de passe.
Créer une connexion Identifier First avec mot de passe](/customize/login-pages/advanced-customizations/build-user-flows/id-first-login)Comment personnaliser un flux de connexion Identifier First utilisant un mot de passe.
Créer une connexion sans mot de passe avec SMS et courrielComment personnaliser un flux de connexion utilisant un mot de passe parºSMS ou courriel à usage unique.
\ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-a-captcha.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-a-captcha.mdx deleted file mode 100644 index 01adb0a49..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-a-captcha.mdx +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: "Add a CAPTCHA" -permalink: "add-a-captcha" -'description': "Guide to adding a CAPTCHA to your ACUL flow" -'og:title': "Add a CAPTCHA" -'og:description': "Guide to adding a CAPTCHA to your ACUL flow" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Add a CAPTCHA" -'twitter:description': "Guide to adding a CAPTCHA to your ACUL flow" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* [Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée -* Une connexion de base de données qui utilise les mots de passe. - - - -This guide will help you add a CAPTCHA to your [Identifier-First Login screen](/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login). To learn more, read the [Getting Started guide](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) and visit the [SDK reference guide](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -For more information about Auth0 CAPTCHAs, read [Customize Signup and Login Prompts](/docs/fr-ca/secure/attack-protection/bot-detection). - -### Setup - -Complete the [Build Identifier First Login with Password](/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login) guide and navigate to your local directory. - -In your Auth0 tenant, navigate to [Dashboard > Security > Attack Protection](https://manage.auth0.com/#/security/attack-protection/bot-detection) and enable at least one Bot Detection challenge, then choose `Auth Challenge` as your CAPTCHA provider when prompted. - -### Create the CAPTCHA file - -In your components folder, create a file called SimpleCaptcha.tsx and include the following code. - - - - - -```tsx lines -interface ISimpleCaptcha { - image: string; -} - -const SimpleCaptcha = ({ image }: ISimpleCaptcha) => ( - <> -
- captcha -
- - -); - -export default SimpleCaptcha; -``` - -
- -### Add the component - -Add the following code to the Login ID screen inside the form and after the identifier input. - -```tsx lines -{screenProvider.screen.isCaptchaAvailable ? - -} -``` - -An example of a full code block for this screen is below. - - - - - -```tsx lines expandable -import { ChangeEvent } from "react"; -import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js"; -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import SimpleCaptcha from "@/components/ui/simple-captcha"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; -export default function LoginId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - // grab the values from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const captchaInput = event.target.querySelector( - "input[name='captcha']" - ) as HTMLInputElement; - // Call the SDK - screenProvider.login({ - username: identifierInput?.value, - captcha: captchaInput?.value - }); - }; - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Welcome"} - - - {screenProvider.screen.texts?.description ?? "Login to continue"} - - - -
- - -
- {screenProvider.screen.isCaptchaAvailable ? - - } - - - {screenProvider.screen.texts?.footerText ?? - "Don't have an account yet?"} - - {screenProvider.screen.texts?.footerLinkText ?? - "Create your account"} - - - - Need Help? - - {screenProvider.screen.texts?.forgottenPasswordText ?? - "Forgot your Password?"} - - -
-
- ); -} -``` - -
- -## En savoir plus - -* [Personnalisations avancées pour la connexion universelle](/docs/fr-ca/customize/login-pages/advanced-customizations) -* [Premiers pas avec les personnalisations avancées pour la connexion universelle](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) -* [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens) \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-custom-prompts-to-your-identifier-first-signup-screen.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-custom-prompts-to-your-identifier-first-signup-screen.mdx deleted file mode 100644 index d18223ada..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/add-custom-prompts-to-your-identifier-first-signup-screen.mdx +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: "Add Custom Prompts to Your Identifier First Signup Screen" -permalink: "add-custom-prompts-to-your-identifier-first-signup-screen" -'description': "Guide to implement ACUL for the ID First Login flow" -'og:title': "Add Custom Prompts to Your Identifier First Signup Screen" -'og:description': "Guide to implement ACUL for the ID First Login flow" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Add Custom Prompts to Your Identifier First Signup Screen" -'twitter:description': "Guide to implement ACUL for the ID First Login flow" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* [Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée -* Une connexion de base de données qui utilise les mots de passe. - - - -This guide will help you construct a Signup ID screen with a custom prompt for gathering a user's first and last name. To learn more, read the [Getting Started guide](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) and visit the [SDK reference guide](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -For more information about custom signup and login prompts, read [Customize Signup and Login Prompts](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts#validate-and-save-captured-data). - -### Setup - -In your Auth0 Dashboard, set up [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), [Identifier First Authentication](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first), and a [Database Connection](/docs/fr-ca/get-started/applications/set-up-database-connections) that uses passwords. - -Run Auth0's single-page ACUL boilerplate application by executing the code below, which provides additional context for Advanced Customizations interfaces. - -```bash lines -git clone https://github.com/auth0/auth0-acul-react-boilerplate -``` - -After cloning the boilerplate app, change the directory to the `auth0-acul-react-boilerplate` folder and install the [Advanced Customizations SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -```bash lines -#Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -#Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -### Build the signup-id screen - -Complete the [Build Identifier First Signup with Password](/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup) guide. - -### Add a custom prompt field - -In your Signup ID `index.tsx` file, add the following code: - - - - - -```jsx lines expandable -export const SignupIdScreen = () => { - const signupManager = new SignupId(); - const [firstName, setfirstName] = useState(''); - ... - - return ( -
- ... - ... - // Custom input - setfirstName(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" - /> - // Pass the input value to the login payload - - ... - ... -
- ); -}; - -export default SignupIdScreen; -``` - -
- -The signup-id `POST` payload now includes `ulp-firstName`. - -### Validate and save your captured data - -Complete the validation section of [Customize Signup and Login Prompts](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts#validate-and-save-captured-data) using the code below to capture and save the data. - -```js lines -exports.onExecutePreUserRegistration = async (event, api) => { - const firstName = event.request.body['ulp-firstName']; - if(!firstName) { - api.validation.error("invalid_payload", "Missing First Name"); - return; - } - - api.user.setUserMetadata("firstName", firstName); -}; -``` - -## En savoir plus - -* [Personnalisations avancées pour la connexion universelle](/docs/fr-ca/customize/login-pages/advanced-customizations) -* [Premiers pas avec les personnalisations avancées pour la connexion universelle](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) -* [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens) \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login.mdx deleted file mode 100644 index 2d2670bba..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-login.mdx +++ /dev/null @@ -1,580 +0,0 @@ ---- -title: "Développer une connexion Identifier First avec mot de passe" -permalink: "id-first-login" -'description': "Guide d’implémentation ACUL pour le flux de connexion ID First" -'og:title': "Développer une connexion Identifier First avec mot de passe" -'og:description': "Guide d’implémentation ACUL pour le flux de connexion ID First" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Développer une connexion Identifier First avec mot de passe" -'twitter:description': "Guide d’implémentation ACUL pour le flux de connexion ID First" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* [Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée -* Une connexion de base de données qui utilise les mots de passe. - - - -Ce guide vous explique comment créer un flux Identifier First, avec des écrans d’identification et de mot de passe de connexion personnalisés. Pour en savoir plus, lisez le [Guide de démarrage](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) et le [Guide de référence de la trousse SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -## Configuration - -Dans votre Auth0 Dashboard, configurez la [connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), l’[authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et une [connexion de base de données](/docs/fr-ca/get-started/applications/set-up-database-connections) qui utilise des mots de passe. - -Exécutez une application à page unique pour créer des écrans de connexion personnalisés. Pour comprendre le contexte des interfaces à personnalisation avancée, clonez notre exemple d’application : `git clone https://github.com/auth0/auth0-acul-react-boilerplate` - -Installez la [trousse SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). Après avoir cloné l’exemple d’application, allez dans le dossier `auth0-acul-react-boilerplate` et installez la trousse SDK. - -```javascript lines -//Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -//Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## 1. Créer l’écran d’ID de connexion -![](/docs/images/fr-ca/cdy7uua7fh8z/1nvMFmxC5ODCW2q7cByHv8/e4691e436d2140660097939ead4eeee9/LoginIDACUL.png) - -Voici un exemple complet de l’écran. - - - -```javascript lines -import { ChangeEvent } from "react"; -import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function LoginId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ username: identifierInput?.value }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Welcome"} - - - {screenProvider.screen.texts?.description ?? "Login to continue"} - - - -
- - -
- - - {screenProvider.screen.texts?.footerText ?? - "Don't have an account yet?"} - - {screenProvider.screen.texts?.footerLinkText ?? - "Create your account"} - - - - Need Help? - - {screenProvider.screen.texts?.forgottenPasswordText ?? - "Forgot your Password?"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```javascript lines -import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function LoginId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... -} -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -```javascript lines - -
- - -
- - ... -
- -``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.loginid({ username: identifierInput?.value }); - }; -``` - -## 2 : Créer l’écran d’inscription -![](/docs/images/fr-ca/cdy7uua7fh8z/Em8VqaD4fPUx6FRevD8fh/bbe1faaeb7edd717cfbdcdd6cf5a4cb5/loginpassword.png) - - -Voici un exemple complet de l’écran. - - - - - -```javascript lines -import { ChangeEvent } from "react"; -import { LoginPassword as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function LoginPassword() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the values from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ - username: identifierInput?.value, - password: passwordInput?.value, - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Enter Your Password"} - - - {screenProvider.screen.texts?.description ?? - "Enter your password to continue"} - - - - - - Log in as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editEmailText ?? "Edit Email"} - - - -
- - -
- - - Need Help? - - {screenProvider.screen.texts?.forgottenPasswordText ?? - "Forgot your Password?"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```javascript lines -import { LoginPassword as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function LoginPassword() { - // Initialize the SDK - const [SDK] = useState(() => new ScreenProvider());\ - ... - } -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -```javascript lines - - - - Log in as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editEmailText ?? "Edit Email"} - - - -
- - -
- -... -
- -``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the values from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ - username: identifierInput?.value, - password: passwordInput?.value, - }); - }; -``` - -## 3 : Configurer ACUL pour utiliser les ressources locales - -Utilisez l’interface de ligne de commande Auth0, Terraform ou Management API pour activer ACUL. Pour en savoir plus sur ce qu’il est possible de configurer, consultez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - - - -Dans le répertoire racine de votre projet, créez un dossier `settings` et incluez-y un fichier `{SCREENNAME}.json`. - -```javascript lines -//settings.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - - Activer ACUL avec l’interface de ligne de commande Auth0 : - -```javascript lines -auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json -``` - - - -Dans le répertoire racine de votre projet, créez un fichier `login-id.json` : - -```javascript lines -//login-id.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - -Activer ACUL avec Auth0 Terraform - -```javascript lines -prompts: - identifier_first: true - universal_login_experience: classic - mfa-login-options: - pageTitle: 'Log in to ${clientName}' - authenticatorNamesSMS: 'SMS' - screenRenderers: - - login-id: - login-id: ./prompts/screenRenderSettings/login-id.json -``` - - - -Vous pouvez utiliser Auth0 Management API pour activer ACUL. - -```javascript lines -curl --location --request PATCH 'https://{YOUR-CUSTOM-DOMAIN}/api/v2/prompts/{YOUR-PROMPT}/screen/{YOUR-SCREEN}/rendering' \ ---header 'Content-Type: application/json' \ ---header 'Authorization: Bearer ' \ ---data '{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.settings", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/index.css" - } - }, - { - "tag": "meta", - "attributes": { - "name": "viewport", - "content": "width=device-width, initial-scale=1" - } - } - ] -}' -``` - - - -### Tester votre configuration sur un serveur local - -ACUL exige que les ressources soient hébergées sur une URL publique. Exécutez un serveur local et testez vos ressources avant de les déployer. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 4 : Déployer les ressources et mettre à jour la configuration de votre locataire - -La personnalisation avancée de la connexion universelle fonctionne avec tous les groupeurs JavaScript modernes, comme Vite et Webpack. Pour en savoir plus, lisez Déployer les personnalisations avancées en production. - -Pour en savoir plus sur le déploiement d’ACUL dans votre locataire, lisez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - -## Contenu associé - - - - - - - - - - - - - - - - - - - - - -
Consultez...Pour apprendre...                                
Personnalisations avancées pour la connexion universelleFonctionnement des personnalisations avancées.
Mise en route des personnalisations avancéesNotions de base pour la mise en route des personnalisations avancées
Personnalisations avancées pour la connexion universelle : ÉcransUne liste de tous les écrans proposés pour les personnalisations avancées.
\ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup.mdx deleted file mode 100644 index 9903e1dea..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/id-first-signup.mdx +++ /dev/null @@ -1,581 +0,0 @@ ---- -title: "Créer une inscription Identifier First avec mot de passe" -permalink: "id-first-signup" -'description': "Guide d’implémentation ACUL pour le flux d’inscription ID First" -'og:title': "Créer une inscription Identifier First avec mot de passe" -'og:description': "Guide d’implémentation ACUL pour le flux d’inscription ID First" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Créer une inscription Identifier First avec mot de passe" -'twitter:description': "Guide d’implémentation ACUL pour le flux d’inscription ID First" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* [Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée -* Une connexion de base de données qui utilise les mots de passe. - - - -Ce guide vous explique comment créer un flux Identifier First, avec des écrans d’ID et de mot de passe d’inscription personnalisés. Pour en savoir plus, lisez le [Guide de démarrage](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) et le [Guide de référence de la trousse SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -## Configuration - -Dans votre Auth0 Dashboard, configurez la [connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), l’[authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et une [connexion de base de données](/docs/fr-ca/get-started/applications/set-up-database-connections) qui utilise des mots de passe. - -Exécutez une application à page unique pour créer des écrans de connexion personnalisés. Pour comprendre le contexte des interfaces à personnalisation avancée, clonez notre exemple d’application : `git clone https://github.com/auth0/auth0-acul-react-boilerplate` - -Installez la [trousse SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). Après avoir cloné l’exemple d’application, allez dans le dossier `auth0-acul-react-boilerplate` et installez la trousse SDK. - -```javascript lines -//Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -//Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## 1. Créer l’écran d’inscription - -![](/docs/images/fr-ca/cdy7uua7fh8z/5lzGYj0k4VcxvPCBYH37SO/aac81379cf15a6a57355c8b4b3313c1a/Signup_ID.png) - -Voici un exemple complet de l’écran. - - - - - -```javascript lines -import { ChangeEvent } from "react"; -import { SignupId as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function SignupId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.signup({ email: identifierInput?.value }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Welcome"} - - - {screenProvider.screen.texts?.description ?? "Create your account"} - - - -
- - -
- - - {screenProvider.screen.texts?.footerText ?? - "Already have an account?"} - - {screenProvider.screen.texts?.footerLinkText ?? - "Log into your account"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```javascript lines -import { SignupId as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function SignupId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... -} -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -### Implémenter l’action d’inscription - -Localisez la fonction `button click` dans le fichier `Login.tsx` pour implémenter l’action d’inscription. - -```javascript lines -
- ... - -
- - -
- -
-
- ); -} -``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form -const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.signup({ email: identifierInput?.value }); - }; -``` - -## 2 : Créer l’écran de mot de passe d’inscription - -![](/docs/images/fr-ca/cdy7uua7fh8z/5h85r3sVhe8mVw7rDkDwTD/268ec427510daa3a2b120e3f1c8ef02d/Signup_Password_with_Flexible_IDs.png) - - -Voici un exemple complet de l’écran. - - - - - -```javascript lines -import { ChangeEvent } from "react"; -import { SignupPassword as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function SignupPassword() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.signup({ - email: identifierInput?.value, - password: passwordInput?.value, - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Enter Your Password"} - - - {screenProvider.screen.texts?.description ?? - "Enter your password to continue"} - - - - - - Sign up as - - {screenProvider.screen.data?.email}. - - - - {screenProvider.screen.texts?.editEmailText ?? "Edit Email"} - - - -
- - -
- - - {screenProvider.screen.texts?.footerText ?? - "Already have an account?"} - - {screenProvider.screen.texts?.footerLinkText ?? - "Log into your account"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK, puis utilisez le composant React pour initialiser la trousse SDK pour l’écran. - -```javascript lines -import { SignupPassword as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function SignupPassword() { - // Initialize the SDK for this screen -const screenProvider = new ScreenProvider(); - ... - } -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -```javascript lines -
- ... - - - - Sign up as - - {screenProvider.screen.data?.email}. - - - - {screenProvider.screen.texts?.editEmailText ?? "Edit Email"} - - - -
- - -
- - ... -
-
-``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.signup({ - email: identifierInput?.value, - password: passwordInput?.value, - }); - }; -``` - -## 3 : Configurer ACUL pour utiliser les ressources locales - -Utilisez l’interface de ligne de commande Auth0, Terraform ou Management API pour activer ACUL. Pour en savoir plus sur ce qu’il est possible de configurer, consultez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - - - -Dans le répertoire racine de votre projet, créez un dossier `settings` et incluez-y un fichier `{SCREENNAME}.json`. - -```javascript lines -//settings.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - - Activer ACUL avec l’interface de ligne de commande Auth0 : - -```javascript lines -auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json -``` - - - -Dans le répertoire racine de votre projet, créez un fichier `login-id.json` : - -```javascript lines -//login-id.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - -Activer ACUL avec Auth0 Terraform - -```javascript lines -prompts: - identifier_first: true - universal_login_experience: classic - mfa-login-options: - pageTitle: 'Log in to ${clientName}' - authenticatorNamesSMS: 'SMS' - screenRenderers: - - login-id: - login-id: ./prompts/screenRenderSettings/login-id.json -``` - - - -Vous pouvez utiliser Auth0 Management API pour activer ACUL. - -```javascript lines -curl --location --request PATCH 'https://{YOUR-CUSTOM-DOMAIN}/api/v2/prompts/{YOUR-PROMPT}/screen/{YOUR-SCREEN}/rendering' \ ---header 'Content-Type: application/json' \ ---header 'Authorization: Bearer ' \ ---data '{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.settings", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/index.css" - } - }, - { - "tag": "meta", - "attributes": { - "name": "viewport", - "content": "width=device-width, initial-scale=1" - } - } - ] -}' -``` - - - -### Tester votre configuration sur un serveur local - -ACUL exige que les ressources soient hébergées sur une URL publique. Exécutez un serveur local et testez vos ressources avant de les déployer. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 4 : Déployer les ressources et mettre à jour la configuration de votre locataire - -La personnalisation avancée de la connexion universelle fonctionne avec tous les groupeurs JavaScript modernes, comme Vite et Webpack. Pour en savoir plus, lisez Déployer les personnalisations avancées en production. - -Pour en savoir plus sur le déploiement d’ACUL dans votre locataire, lisez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - -## Contenu associé - - - - - - - - - - - - - - - - - - - - - -
Consultez...Pour apprendre...                                
Personnalisations avancées pour la connexion universelleFonctionnement des personnalisations avancées.
Mise en route des personnalisations avancéesNotions de base pour la mise en route des personnalisations avancées
Personnalisations avancées pour la connexion universelle : ÉcransUne liste de tous les écrans proposés pour les personnalisations avancées.
\ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/login-password.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/login-password.mdx deleted file mode 100644 index bd6cc642e..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/login-password.mdx +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: "Créer une connexion avec mot de passe" -permalink: "login-password" -'description': "Guide d’implémentation ACUL pour le flux de connexion simple" -'og:title': "Créer une connexion avec mot de passe" -'og:description': "Guide d’implémentation ACUL pour le flux de connexion simple" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Créer une connexion avec mot de passe" -'twitter:description': "Guide d’implémentation ACUL pour le flux de connexion simple" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* Une connexion de base de données qui utilise les mots de passe. - - - -Ce guide vous explique comment créer un flux Identifier First, avec un écran de connexion personnalisé. Pour en savoir plus, lisez le [Guide de démarrage](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) et le [Guide de référence de la trousse SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -## Configuration - -Dans votre Auth0 Dashboard, configurez la [connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), l’[authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et une [connexion de base de données](/docs/fr-ca/get-started/applications/set-up-database-connections) qui utilise des mots de passe. - -Exécutez une application à page unique pour créer des écrans de connexion personnalisés. Pour comprendre le contexte des interfaces à personnalisation avancée, clonez notre exemple d’application : `git clone https://github.com/auth0/auth0-acul-react-boilerplate` - -Installez la [trousse SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). Après avoir cloné l’exemple d’application, allez dans le dossier `auth0-acul-react-boilerplate` et installez la trousse SDK. - -```javascript lines -//Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -//Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## 1. Créer l’écran de connexion - -![](/docs/images/fr-ca/cdy7uua7fh8z/7cQxliJ8QwGH8ESjcWTsps/758328e749385c8e54112079cadc3f0e/Screenshot_2025-02-04_at_10.14.34_AM.png) - -Voici un exemple complet de l’écran. - - - - - -```javascript lines -import { ChangeEvent } from "react"; -import { Login as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function Login() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the values from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ - username: identifierInput?.value, - password: passwordInput?.value, - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Welcome"} - - - {screenProvider.screen.texts?.description ?? "Login to continue"} - - - -
- - -
-
- - -
- - - {screenProvider.screen.texts?.footerText ?? "Don't have an account yet?"} - - {screenProvider.screen.texts?.footerLinkText ?? "Create your account"} - - - - Need Help? - - {screenProvider.screen.texts?.forgottenPasswordText ?? "Forgot your Password?"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```javascript lines -import { Login as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function Login() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... - } -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -```javascript lines -
- ... - -
- - -
-
- - -
- - ... -
-
- ); -} -``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ username: identifierInput?.value }); - }; -``` - -## 2 : Configurer ACUL pour utiliser les ressources locales - -Utilisez l’interface de ligne de commande Auth0, Terraform ou Management API pour activer ACUL. Pour en savoir plus sur ce qu’il est possible de configurer, consultez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - - - -Dans le répertoire racine de votre projet, créez un dossier `settings` et incluez-y un fichier `{SCREENNAME}.json`. - -```javascript lines -//settings.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - - Activer ACUL avec l’interface de ligne de commande Auth0 : - -```javascript lines -auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json -``` - - - -Dans le répertoire racine de votre projet, créez un fichier `login-id.json` : - -```javascript lines -//login-id.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - -Activer ACUL avec Auth0 Terraform - -```javascript lines -prompts: - identifier_first: true - universal_login_experience: classic - mfa-login-options: - pageTitle: 'Log in to ${clientName}' - authenticatorNamesSMS: 'SMS' - screenRenderers: - - login-id: - login-id: ./prompts/screenRenderSettings/login-id.json -``` - - - -Vous pouvez utiliser Auth0 Management API pour activer ACUL. - -```javascript lines -curl --location --request PATCH 'https://{YOUR-CUSTOM-DOMAIN}/api/v2/prompts/{YOUR-PROMPT}/screen/{YOUR-SCREEN}/rendering' \ ---header 'Content-Type: application/json' \ ---header 'Authorization: Bearer ' \ ---data '{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.settings", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/index.css" - } - }, - { - "tag": "meta", - "attributes": { - "name": "viewport", - "content": "width=device-width, initial-scale=1" - } - } - ] -}' -``` - - - -### Tester votre configuration sur un serveur local - -ACUL exige que les ressources soient hébergées sur une URL publique. Exécutez un serveur local et testez vos ressources avant de les déployer. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 3 : Déployer les ressources et mettre à jour la configuration de votre locataire - -La personnalisation avancée de la connexion universelle fonctionne avec tous les groupeurs JavaScript modernes, comme Vite et Webpack. Pour en savoir plus, lisez Déployer les personnalisations avancées en production. - -Pour en savoir plus sur le déploiement d’ACUL dans votre locataire, lisez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - -## Contenu associé - - - - - - - - - - - - - - - - - - - - - -
Consultez...Pour apprendre...                                
Personnalisations avancées pour la connexion universelleFonctionnement des personnalisations avancées.
Mise en route des personnalisations avancéesNotions de base pour la mise en route des personnalisations avancées
Personnalisations avancées pour la connexion universelle : ÉcransUne liste de tous les écrans proposés pour les personnalisations avancées.
\ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/signup-password.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/signup-password.mdx deleted file mode 100644 index ad0cb25e2..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/signup-password.mdx +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: "Créer une inscription avec mot de passe" -permalink: "signup-password" -'description': "Guide d’implémentation ACUL pour le flux d’inscription simple" -'og:title': "Créer une inscription avec mot de passe" -'og:description': "Guide d’implémentation ACUL pour le flux d’inscription simple" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Créer une inscription avec mot de passe" -'twitter:description': "Guide d’implémentation ACUL pour le flux d’inscription simple" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* Une connexion de base de données qui utilise les mots de passe. - - - -Ce guide vous explique comment créer un flux Identifier First, avec un écran d’inscription personnalisé. Pour en savoir plus, lisez le [Guide de démarrage](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) et le [Guide de référence de la trousse SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -## Configuration - -Dans votre Auth0 Dashboard, configurez la [connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), l’[authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et une [connexion de base de données](/docs/fr-ca/get-started/applications/set-up-database-connections) qui utilise des mots de passe. - -Exécutez une application à page unique pour créer des écrans de connexion personnalisés. Pour comprendre le contexte des interfaces à personnalisation avancée, clonez notre exemple d’application : `git clone https://github.com/auth0/auth0-acul-react-boilerplate` - -Installez la [trousse SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). Après avoir cloné l’exemple d’application, allez dans le dossier `auth0-acul-react-boilerplate` et installez la trousse SDK. - -```javascript lines -//Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -//Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## 1. Créer l’écran d’inscription -![](/docs/images/fr-ca/cdy7uua7fh8z/bmeUPZfMVxzeG8WPolROF/30d4423a5dcf85cf759460cbae3ef672/Screenshot_2025-02-04_at_10.17.20_AM.png) - -Voici un exemple complet de l’écran. - - - - - -```javascript lines -import { ChangeEvent } from "react"; -import { Signup as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function Signup() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - screenProvider.signup({ - email: identifierInput?.value, - password: passwordInput?.value, - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Welcome"} - - - {screenProvider.screen.texts?.description ?? "Create your account"} - - - -
- - -
-
- - -
- - - {screenProvider.screen.texts?.footerText ?? - "Already have an account?"} - - {screenProvider.screen.texts?.footerLinkText ?? - "Log into your account"} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, créez un sous-dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```javascript lines -import { Signup as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function Signup() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... - } -``` - -### Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran - -À l’aide de la trousse SDK, vous pouvez accéder aux propriétés et méthodes de l’écran. La [trousse SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) comprend des propriétés et des méthodes pour accéder aux données. - -Pour en savoir plus sur les données de contexte, lisez Données de contexte de la connexion universelle. - -```javascript lines -
- ... - -
- - -
-
- - -
- - ... -
-
- ); -} -``` - -### Appeler l’action de soumission - -À l’aide de la trousse SDK, soumettez les données capturées à l’écran vers le serveur. Lors de la prochaine étape du flux, le serveur traitera ces données et les enverra à l’utilisateur. En cas d’erreur, cet écran est rechargé pour vous permettre d’afficher l’erreur à l’utilisateur. L’accès aux erreurs se fait depuis la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - const passwordInput = event.target.querySelector( - "input#password" - ) as HTMLInputElement; - - screenProvider.signup({ - email: identifierInput?.value, - password: passwordInput?.value, - }); - }; -``` - -## 2 : Configurer ACUL pour utiliser les ressources locales - -Utilisez l’interface de ligne de commande Auth0, Terraform ou Management API pour activer ACUL. Pour en savoir plus sur ce qu’il est possible de configurer, consultez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - - - -Dans le répertoire racine de votre projet, créez un dossier `settings` et incluez-y un fichier `{SCREENNAME}.json`. - -```javascript lines -//settings.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - - Activer ACUL avec l’interface de ligne de commande Auth0 : - -```javascript lines -auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json -``` - - - -Dans le répertoire racine de votre projet, créez un fichier `login-id.json` : - -```javascript lines -//login-id.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - -Activer ACUL avec Auth0 Terraform - -```javascript lines -prompts: - identifier_first: true - universal_login_experience: classic - mfa-login-options: - pageTitle: 'Log in to ${clientName}' - authenticatorNamesSMS: 'SMS' - screenRenderers: - - login-id: - login-id: ./prompts/screenRenderSettings/login-id.json -``` - - - -Vous pouvez utiliser Auth0 Management API pour activer ACUL. - -```javascript lines -curl --location --request PATCH 'https://{YOUR-CUSTOM-DOMAIN}/api/v2/prompts/{YOUR-PROMPT}/screen/{YOUR-SCREEN}/rendering' \ ---header 'Content-Type: application/json' \ ---header 'Authorization: Bearer ' \ ---data '{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.settings", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/index.css" - } - }, - { - "tag": "meta", - "attributes": { - "name": "viewport", - "content": "width=device-width, initial-scale=1" - } - } - ] -}' -``` - - - -### Créer votre configuration sur un serveur local - -ACUL exige que les ressources soient hébergées sur une URL publique. Exécutez un serveur local et testez vos ressources avant de les déployer. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 3 : Tester votre configuration sur un serveur local - -La personnalisation avancée de la connexion universelle fonctionne avec tous les groupeurs JavaScript modernes, comme Vite et Webpack. Pour en savoir plus, lisez Déployer les personnalisations avancées en production. - -Pour en savoir plus sur le déploiement d’ACUL dans votre locataire, lisez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - -## Contenu associé - - - - - - - - - - - - - - - - - - - - - -
Consultez...Pour apprendre...                                
Personnalisations avancées pour la connexion universelleFonctionnement des personnalisations avancées.
Mise en route des personnalisations avancéesNotions de base pour la mise en route des personnalisations avancées
Personnalisations avancées pour la connexion universelle : ÉcransUne liste de tous les écrans proposés pour les personnalisations avancées.
\ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/sms-email-passwordless.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/sms-email-passwordless.mdx deleted file mode 100644 index 35767744e..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/build-user-flows/sms-email-passwordless.mdx +++ /dev/null @@ -1,659 +0,0 @@ ---- -title: "Créez une connexion sans mot de passe pour les SMS et les courriels" -permalink: "sms-email-passwordless" -'description': "Guide de mise en œuvre de l’ACUL pour le flux de connexion sans mot de passe" -'og:title': "Créez une connexion sans mot de passe pour les SMS et les courriels" -'og:description': "Guide de mise en œuvre de l’ACUL pour le flux de connexion sans mot de passe" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Créez une connexion sans mot de passe pour les SMS et les courriels" -'twitter:description': "Guide de mise en œuvre de l’ACUL pour le flux de connexion sans mot de passe" ---- - - - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* Une connexion de base de données qui utilise une connexion sans mot de passe. - - - -À la fin de ce flux, vous disposerez d’un écran de connexion sans mot de passe personnalisé avec l’option liée aux courriels ou aux SMS. - -Pour en savoir plus, lisez le [Guide de démarrage](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started) et consultez le [Guide de référence de la trousse SDK](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). - -## Configuration - -Dans votre Auth0 Dashboard, configurez la [connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), [l’authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first), et une [connexion à la base de données](/docs/fr-ca/get-started/applications/set-up-database-connections) qui utilise des mots de passe. - -Exécutez une application à page unique pour créer des écrans de connexion personnalisés. Pour comprendre le contexte des interfaces de personnalisations avancées, clonez notre application de base : `git clone https://github.com/auth0/auth0-acul-react-boilerplate` - -Installez la trousse [SDK ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart). Après avoir cloné le composant React réutilisable, changez le répertoire vers le dossier `auth0-acul-react-boilerplate` et installez la trousse SDK. - -```bash lines -# Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -# Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## Option 1 : Créez l’écran de connexion sans mot de passe pour le courriel - -![](/docs/images/fr-ca/cdy7uua7fh8z/4DKgjU2dGw0mpLJKGfGhp0/9900448398ec429d360bf4eedcfd434f/Login_Passwordless_Email_Code.png) - - -Ci-dessous se trouve un exemple complet de l’écran. - - - - - -```jsx lines expandable -import { ChangeEvent } from "react"; -import { LoginPasswordlessEmailCode as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { Input } from "@/components/ui/input"; -import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp" -import { - InputOTP, - InputOTPGroup, - InputOTPSlot, -} from "@/components/ui/input-otp" -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function LoginPasswordlessEmailCode() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const OtpInput = event.target.querySelector( - "input#otp_code" - ) as HTMLInputElement; - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.submitCode({ - username: identifierInput?.value, - code: OtpInput?.value - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Verify yourself"} - - - {screenProvider.screen.texts?.description ?? - "Enter the code sent to the email below"} - - - - - - Continue as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editText ?? "Edit Email"} - - - - -
- - - - - - - - - - - -
- - {screenProvider.screen.texts?.resendText ?? "Didn't get the OTP?"} - - {screenProvider.screen.texts?.resendActionText ?? "Send again."} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src` créez un dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```jsx lines -import { LoginPasswordlessEmailCode as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function LoginPasswordlessEmailCode() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... - } -``` - -### Utilisez la trousse SDK pour accéder aux propriétés et méthodes de l’écran. - -En utilisant la trousse SDK, vous pouvez accéder aux propriétés et aux méthodes de l’écran. La trousse [SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) fournit des propriétés et des méthodes pour accéder aux données. - -Pour plus d’informations sur les données contextuelles, lisez Données contextuelle de connexion universelle. - -```jsx lines expandable -
- ... - - - - Continue as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editText ?? "Edit Email"} - - - - -
- - - - - - - - - - - -
- ... -
-
- ); -} -``` - -### Appeler l’action de soumission. - -En utilisant le SDK, soumettez les données capturées à l’écran au serveur. Le serveur traite ces données et dirigera l’utilisateur vers l’étape suivante du flux. En cas d’erreurs, cet écran est rechargé, ce qui vous permet de les présenter à l’utilisateur. Les erreurs sont accessibles via la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const OtpInput = event.target.querySelector( - "input#otp_code" - ) as HTMLInputElement; - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.submitCode({ - username: identifierInput?.value, - code: OtpInput?.value - }); -``` - -## Option 2 : Créez l’écran de connexion sans mot de passe pour les SMS - -![](/docs/images/fr-ca/cdy7uua7fh8z/7qSqOazAiuhuPciX0J7s9i/95c56f70a27b333e25963f7a71fb16a3/Login_Passwordless_SMS_OTP.png) - - -Ci-dessous se trouve un exemple complet de l’écran. - - - - - -```jsx lines expandable -import { ChangeEvent } from "react"; -import { LoginPasswordlessSmsOtp as ScreenProvider } from "@auth0/auth0-acul-js"; - -// UI Components -import { Label } from "@/components/ui/label"; -import { Button } from "@/components/ui/button"; -import { Text } from "@/components/ui/text"; -import { Link } from "@/components/ui/link"; -import { Input } from "@/components/ui/input"; -import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp" -import { - InputOTP, - InputOTPGroup, - InputOTPSlot, -} from "@/components/ui/input-otp" -import { - CardHeader, - CardTitle, - CardDescription, - CardContent, -} from "@/components/ui/card"; - -export default function LoginPasswordlessSmsOtp() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - - // Handle the submit action - const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const OtpInput = event.target.querySelector( - "input#otp_code" - ) as HTMLInputElement; - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.submitOTP({ - username: identifierInput?.value, - code: OtpInput?.value - }); - }; - - // Render the form - return ( -
- - - {screenProvider.screen.texts?.title ?? "Verify yourself"} - - - {screenProvider.screen.texts?.description ?? - "Enter the code sent to the phone below"} - - - - - - Continue as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editText ?? "Edit Phone"} - - - - -
- - - - - - - - - - - -
- - {screenProvider.screen.texts?.resendText ?? "Didn't get the OTP?"} - - {screenProvider.screen.texts?.resendActionText ?? "Send again."} - - -
-
- ); -} -``` - -
- -### Importer et initialiser la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src` créez un dossier appelé `screens` et un fichier appelé `Login.tsx`. Importez la trousse SDK et, dans le composant React, initialisez la trousse SDK pour l’écran. - -```jsx lines -import { LoginPasswordlessSmsOtp as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function LoginPasswordlessSmsOtp() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... - } -``` - -### Utilisez la trousse SDK pour accéder aux propriétés et méthodes de l’écran. - -En utilisant la trousse SDK, vous pouvez accéder aux propriétés et aux méthodes de l’écran. La trousse [SDK Auth0 ACUL JS](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) fournit des propriétés et des méthodes pour accéder aux données. - -Pour plus d’informations sur les données contextuelles, lisez Données contextuelle de connexion universelle. - -```jsx lines expandable -
- ... - - - - Continue as - - {screenProvider.screen.data?.username}. - - - - {screenProvider.screen.texts?.editText ?? "Edit Phone"} - - - - -
- - - - - - - - - - - -
- ... -
-
- ); -} -``` - -### Appeler l’action de soumission. - -En utilisant le SDK, soumettez les données capturées à l’écran au serveur. Le serveur traite ces données et dirigera l’utilisateur vers l’étape suivante du flux. En cas d’erreurs, cet écran est rechargé, ce qui vous permet de les présenter à l’utilisateur. Les erreurs sont accessibles via la trousse SDK. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent) => { - event.preventDefault(); - - // grab the value from the form - const OtpInput = event.target.querySelector( - "input#otp_code" - ) as HTMLInputElement; - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.submitCode({ - username: identifierInput?.value, - code: OtpInput?.value - }); -``` - -## 3 : Configurez ACUL pour utiliser des ressources locales. - -Utilisez l’interface de ligne de commande Auth0, Terraform ou Management API pour activer ACUL. Pour des détails sur ce qui peut être configuré, consultez [Configurer les écrans ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens). - - - -Dans le répertoire racine de votre projet, créez un dossier `settings` et incluez-y un fichier `{SCREENNAME}.json`. - -```javascript lines expandable -//settings.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - - Activer ACUL avec l’interface de ligne de commande Auth0 : - -```bash wrap lines -auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json -``` - - - -Dans le répertoire racine de votre projet, créez un fichier `login-id.json` : - -```javascript lines expandable -//login-id.json -{ - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts" - ], - "head_tags": [ - { - "attributes": { - "async": true, - "defer": true, - "integrity": [ - "ASSET_SHA" - ], - "src": "http://127.0.0.1:8080/index.js" - }, - "tag": "script" - }, - { - "attributes": { - "href": "http://127.0.0.1:8080/index.css", - "rel": "stylesheet" - }, - "tag": "link" - } - ] -} -``` - -Activer ACUL avec Auth0 Terraform - -```yaml lines -prompts: - identifier_first: true - universal_login_experience: classic - mfa-login-options: - pageTitle: 'Log in to ${clientName}' - authenticatorNamesSMS: 'SMS' - screenRenderers: - - login-id: - login-id: ./prompts/screenRenderSettings/login-id.json -``` - - - -Vous pouvez utiliser Auth0 Management API pour activer ACUL. - -```bash lines expandable -curl --location --request PATCH 'https://{YOUR-CUSTOM-DOMAIN}/api/v2/prompts/{YOUR-PROMPT}/screen/{YOUR-SCREEN}/rendering' \ ---header 'Content-Type: application/json' \ ---header 'Authorization: Bearer ' \ ---data '{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.settings", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/index.css" - } - }, - { - "tag": "meta", - "attributes": { - "name": "viewport", - "content": "width=device-width, initial-scale=1" - } - } - ] -}' -``` - - - -### Testez votre configuration sur un serveur local. - -ACUL exige que les ressources soient hébergées sur une URL publique. Démarrez un serveur local et testez vos ressources avant de les déployer. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 4 : Déployez les ressources et mettez à jour la configuration de votre locataire. - -La personnalisation avancée pour la connexion universelle fonctionne avec tous les programmes de regroupement JavaScript modernes, comme Vite et Webpack. Pour plus d’informations, lisez Déployer des personnalisations avancées en production. - -Pour plus d’informations sur le déploiement d’ACUL pour votre locataire, lisez [Configurer les écrans ACUL.](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens) - -## Contenu relatif - -Pour plus d’informations sur les écrans qui peuvent être personnalisés, lisez Personnalisations avancées pour la connexion universelle : écrans. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/configure.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/configure.mdx new file mode 100644 index 000000000..3538b3509 --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/configure.mdx @@ -0,0 +1,69 @@ +--- +description: Apprenez à configurer ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Configurer ACUL +'og:url': https://auth0.com/docs/ +permalink: configure +title: Configurer ACUL +'twitter:description': Apprenez à configurer ACUL +'twitter:title': Configurer ACUL +--- + +Vous pouvez configurer ACUL en utilisant le Dashboard Auth0, l'API de Management, et les outils d'Infrastructure-as-Code (IaC). + + +Pour configurer ACUL, assurez-vous que vos fichiers de configuration personnalisée et vos assets sont hébergés sur un CDN public. + + +## Dashboard Auth0 + +Vous pouvez utiliser le Dashboard pour personnaliser vos écrans avec ACUL : + +A. Naviguez vers [Dashboard > Image de marque > Connexion universelle](https://manage.auth0.com/dashboard/#/universal-login/customizations-new) + + 1. Sélectionnez **Personnaliser les écrans d'authentification**. + 2. Sélectionnez un Nom à personnaliser. + 3. Depuis **Paramètres > Mode de rendu** sélectionnez **Mode avancé**. + 4. (Optionnel) Sélectionnez **Utiliser un modèle de page personnalisé**. + 5. (Optionnel) Sélectionnez **Filtres du mode avancé**. + Auth0 Dashboard ACUL page + 6. Sélectionnez **Head Tags** pour ajouter vos propres `Head Tags` HTML. + 7. (Optionnel) Sélectionnez **Données supplémentaires** pour choisir les données supplémentaires à envoyer au navigateur. + +B. Sélectionnez **Enregister & Publier** + +**Utiliser l'objet de configuration de rendu ACUL** + +La configuration de rendu ACUL est un objet JSON unique utilisé pour activer ACUL et lister toutes les propriétés disponibles, par écran, qui consistent en des assets spécifiques, des données contextuelles, et une logique conditionnelle applicable. L'objet de configuration de rendu ACUL peut être utilisé avec les outils IaC et l'API de Management Auth0. + +Pour en savoir plus, consultez le point de terminaison [`/v2/prompts/patch-rendering`](https://auth0.com/docs/fr-ca/api/management/v2/prompts/patch-rendering). + +## L'objet de configuration de rendu ACUL + +La configuration de rendu ACUL est un objet JSON unique utilisé pour activer ACUL et lister toutes les propriétés disponibles, par écran, qui consistent en des assets spécifiques, des données contextuelles, et une logique conditionnelle applicable. L'objet de configuration de rendu ACUL peut être utilisé avec les outils IaC et l'API de Management Auth0. + +Pour en savoir plus, consultez le point de terminaison [`/v2/prompts/patch-rendering`](https://auth0.com/docs/fr-ca/api/management/v2/prompts/patch-rendering). + +## Infrastructure-as-Code (IaC) + +Configurez ACUL avec des outils IaC, incluant : + + * La commande [`auth0 acul`](https://auth0.github.io/auth0-cli/auth0_acul.html) de l'**Auth0 CLI**. + * La ressource [`auth0_prompt_screen_renderer`](https://registry.terraform.io/providers/auth0/auth0/latest/docs/resources/prompt_screen_renderer) du **Auth0 Terraform Provider**. + * La ressource [`prompts`](https://github.com/auth0/auth0-deploy-cli/blob/master/docs/resource-specific-documentation.md#prompts) du **Auth0 Deploy CLI**. + +## Auth0 Management API + +Utilisez les point de terminaisons de l'API de Management ACUL pour configurer les écrans Universal Login individuellement ou pour mettre à jour plusieurs écrans avec un seul appel API. Vous devez inclure un [jeton d'accès à l'API de Management](/docs/secure/tokens/access-tokens/management-api-access-tokens) dans la requête. + +**Configuration d'écran individuelle** + + * Le point de terminaison [`GET /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/fr-ca/api/management/v2/prompts/get-rendering) vous permet de récupérer la configuration pour un seul écran. + + * Le point de terminaison [`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/fr-ca/api/management/v2/prompts/patch-rendering) vous permet de configurer ACUL sur un seul écran. + +**Configuration d'écran en masse** + + * Le point de terminaison [`GET /v2/prompts/rendering`](/docs/fr-ca/api/management/v2/prompts/get-all-rendering) vous permet de récupérer les configurations pour tous les écrans. + + * Le point de terminaison [`PATCH /v2/prompts/rendering`](/docs/fr-ca/api/management/v2/prompts/patch-bulk-rendering) vous permet de mettre à jour les écrans en masse. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/deployment-workflow.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/deployment-workflow.mdx new file mode 100644 index 000000000..126273d5c --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/deployment-workflow.mdx @@ -0,0 +1,101 @@ +--- +description: En savoir plus sur le flux de travail de déploiement ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Flux de travail de déploiement ACUL +'og:url': https://auth0.com/docs/ +permalink: deployment-workflow +title: Flux de travail de déploiement ACUL +'twitter:description': En savoir plus sur le flux de travail de déploiement ACUL +'twitter:title': Flux de travail de déploiement ACUL +--- + + +Pour suivre ce flux de travail, assurez-vous d'avoir : + * Un tenant de développement Auth0 configuré avec la [Connexion universelle](docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains). + * Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0 + * [L'Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0. + * Un compte AWS avec les permissions de créer des rôles IAM, des buckets S3, et de configurer CloudFront + * Un référentiel GitHub contenant vos écrans de connexion personnalisés + + +Le flux de travail de déploiement de production ACUL construit et déploie vos écrans ACUL et configure votre tenant pour les utiliser. Il utilise les Actions GitHub pour : + + * Construire les bundles d'assets de votre écran + * Le flux de travail lit le fichier [config/deploy_config.yml](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/deploy_config.yml) pour déterminer quels écrans sont marqués pour le déploiement. + * Si des cibles de déploiement sont trouvées, le flux de travail construit vos assets ACUL, en utilisant Vite et en compilant le code dans le répertoire `/dist`. + * Télécharger vos assets vers AWS S3 + * Le flux de travail s'authentifie de manière sécurisée auprès d'AWS en utilisant [OpenID Connect (OIDC)](docs/fr-ca/authenticate/protocols/openid-connect-protocol). + * Il télécharge le contenu du répertoire `/dist` vers votre bucket S3. + * Configurer votre tenant Auth0 + * Le flux de travail utilise [Auth0 CLI](https://auth0.github.io/auth0-cli/) avec une application M2M pour configurer les écrans dans votre tenant. + * Il mappe chaque écran au bon écran Auth0 en utilisant le fichier [config/screen-to-prompt-mapping.js](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/screen-to-prompt-mapping.js). + * Il met à jour les paramètres de personnalisation d'écran Auth0 pour pointer vers vos assets sur le CDN CloudFront. + +Une fois configuré, un `git push` vers la branche `main` de votre projet démarre le flux de travail GitHub. + + +Pour lire un exemple complet du flux de travail de déploiement de production ACUL, lisez [ACUL GITHUB ACTIONS](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/GITHUB_ACTIONS.md) sur Github. + + +### 1. Configuration Auth0 + +Créez une application [Machine-to-Machine](/docs/fr-ca/get-started/auth0-overview/create-applications/machine-to-machine-apps) pour accorder des permissions au flux de travail GitHub afin de mettre à jour les paramètres de votre tenant. + +1. Naviguez vers [Auth0 Dashboard > Applications](https://manage.auth0.com/#/applications). +2. Sélectionnez **Créer une application**. +3. Sélectionnez **Applications de communication entre machines**. +4. Sous **Nom**, ajoutez un nom descriptif, par exemple : `Déploiement ACUL GitHub`. +5. Sélectionnez **Créer**. +6. Sous **Autoriser l’application de communication entre machines**, sélectionnez **Auth0 Management API**. +7. Sélectionnez ces permissions spécifiques : + * `read:branding` + * `update:branding` + * `read:prompts` + * `update:prompts` + * `read:custom_domains` +8. Sélectionnez **Autoriser**. +9. Naviguez vers l'onglet **Paramètres** et notez : + * `Domain` + * `Client ID` + * `Client Secret` + +### 2. Téléchargez et servez vos assets avec Amazon Web Services + +Pour télécharger et servir vos assets, vous avez besoin d'un bucket AWS S3 et de configurer CloudFront comme CDN. + + * **Créez un bucket AWS S3**. Bloquez tout accès public afin que ce bucket soit privé. Ce bucket privé stocke vos assets. + * **Configurez une distribution CloudFront**. Ce CDN sert vos assets de manière sécurisée. Il doit être configuré pour utiliser votre bucket S3 comme `Origin` en utilisant Origin Access Control (OAC). + +### 3. Créez un rôle IAM AWS pour l'Action GitHub + +Créez un **Rôle IAM** dans AWS pour accorder à GitHub Actions la permission de télécharger des fichiers vers AWS S3. + + +* Ce rôle IAM doit utiliser Web Identity (OIDC), faisant confiance à `token.actions.githubusercontent.com`. +* Le rôle a besoin d'une politique accordant les permissions `s3:PutObject`, `s3:DeleteObject`, et `s3:ListBucket` sur votre bucket S3. + + +### 4. Configurez votre référentiel GitHub + +Pour configurer votre référentiel GitHub : + +1. Naviguez vers **GitHub > Settings**. +2. Sélectionnez **Secrets and Variables** puis **Actions**. +3. Sélectionnez **New repository secret**. + +Ajoutez les secrets de référentiel suivants : + + * `AWS_S3_ARN`: L'ARN du rôle IAM que vous avez créé. + * `S3_BUCKET_NAME`: Le nom de votre bucket S3. + * `AWS_REGION`: La région où se situe votre bucket S3. Par exemple, `us-east-1`. + * `S3_CDN_URL`: Le nom de domaine de votre distribution CloudFront. N'ajoutez pas de barre oblique de fin. Par exemple, https://d1234abcdef.cloudfront.net. + * `AUTH0_DOMAIN`: Le domaine de votre tenant Auth0. + * `AUTH0_CLIENT_ID`: L'ID client de votre application M2M. + * `AUTH0_CLIENT_SECRET`: Le Secret Client de votre application M2M. + +### 5. Configurez votre déploiement +Vous pouvez contrôler quels écrans sont déployés en modifiant les fichiers de configuration situés dans le répertoire `.github/config/` : + +* [`config/deploy_config.yml`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/deploy_config.yml): Votre panneau de contrôle principal. Définissez un écran sur `true` pour le déployer ou sur `false` pour l'ignorer. +* [`config/screen-to-prompt-mapping.js`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/screen-to-prompt-mapping.js): Mappe les noms de répertoire d'écran internes. Exemple : `mfa-sms-challenge` au nom de prompt officiel Auth0 `mfa-sms`. +* [`config/context-configuration.js`](https://github.com/auth0-samples/auth0-acul-samples/blob/6cb4dcc43defd1a9cf586da9307d7d2348e696ae/react/.github/config/context-configuration.js): Définit les données de contexte Auth0. Exemple : les paramètres de branding doivent être mis à disposition de vos écrans personnalisés. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow.mdx new file mode 100644 index 000000000..eb4c71c3a --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow.mdx @@ -0,0 +1,44 @@ +--- +description: En savoir plus sur le flux de travail de développement ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Flux de travail de développement ACUL +'og:url': https://auth0.com/docs/ +permalink: development-workflow +title: Flux de travail de développement ACUL +'twitter:description': En savoir plus sur le flux de travail de développement ACUL +'twitter:title': Flux de travail de développement ACUL +--- + +Il existe deux modes principaux pour le développement de vos écrans ACUL : le développement local et les tests d'intégration du tenant en direct. + +## Développement local + +Personnalisez vos écrans ACUL localement avec la commande [Auth0 CLI](https://github.com/auth0/auth0-cli/) `auth0 acul dev`. Iitérez rapidement vos écrans ACUL sans aucun délai ni dépendance backend grâce à l'[Universal Login Context Inspector](https://github.com/auth0/ul-context-inspector). + +Le Connexion universelle Context Inspector fournit des données de contexte fictives pour tester vos écrans d'authentification par rapport aux configurations spécifiques au tenant. + +Inspecteur de contexte Universal Login + + * Sélectionnez **Écran** pour voir vos écrans configurés ACUL disponibles avec des données de contexte fictives par défaut. + * Sélectionnez **Source de données** pour choisir les données de contexte fictives servies depuis le **CDN Auth0** ou les données de contexte fictives depuis le répertoire `public/screens/{prompt}/{screen}` de votre projet de **Développement local**. + * Sélectionnez l'icône **Télécharger JSON** pour télécharger les données de contexte pour un écran sélectionné. + +## Test d'intégration de tenant en direct + +L'intégration de tenant en direct avec la commande Auth0 CLI `auth0 acul dev --connected` permet d'effectuer des tests de bout en bout de vos interfaces utilisateur d'écran personnalisées et vérifie l'intégration avec votre tenant Auth0. +Utilisez le mode `--connected` pour les tests d'intégration après que l'interface utilisateur est largement terminée, car chaque rechargement redémarre le flux d'authentification. + +Lors de l'utilisation de `auth0 acul dev --connected` + + * Sélectionnez le répertoire de votre projet ACUL. + * Sélectionnez `npm run build` pour construire le projet et configurer votre tenant Auth0. + * Sélectionnez le **port** pour servir vos assets locaux, par défaut `55444` et démarrer le serveur local en arrière-plan. + * Éventuellement, autorisez le mode `--connected` à surveiller en permanence les changements dans le répertoire `/dist/assets` du projet. + +Ouvrez un nouveau terminal et exécutez `auth0 test login` pour tester le flux de connexion sur votre tenant. + + +En mode `--connected`, la commande Auth0 CLI surveille les changements de fichiers, reconstruit les assets et met à jour automatiquement la configuration de votre tenant. + + +Pour en savoir plus, lisez [Auth0 CLI](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) sur GitHub. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started.mdx deleted file mode 100644 index cf515ab2d..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started.mdx +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: "Premiers pas avec les personnalisations avancées pour la connexion universelle" -permalink: "getting-started" -'description': "Un guide d’intoduction à la personnalisation avancée pour la connexion universelle" -'og:title': "Premiers pas avec les personnalisations avancées pour la connexion universelle" -'og:description': "Un guide d’intoduction à la personnalisation avancée pour la connexion universelle" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Premiers pas avec les personnalisations avancées pour la connexion universelle" -'twitter:description': "Un guide d’intoduction à la personnalisation avancée pour la connexion universelle" ---- - -**Les personnalisations avancées pour la connexion universelle** (ACUL) permettent de créer des interfaces personnalisées pour chaque écran de la connexion universelle. Le diagramme suivant montre comment les écrans qui utilisent ACUL sont construits, hébergés, configurés et présentés à l’utilisateur final. - -![A diagram of how Advanced Customization for Universal Login screens are rendered.](/docs/images/fr-ca/cdy7uua7fh8z/1cCU5yc9YCmxeV8wCojtud/1691e2f3c55e8ade5d14431c8dcfb73f/ACUL_Diagram_-_Flow.png) - -### Flux des personnalisations avancées - -1. Vos développeurs peuvent créer des interfaces personnalisées pour des écrans de connexion universelle déterminés en utilisant votre pile technologique frontale préférée (telle que React, Angular ou Vue) et tout système de conception interne, bibliothèque de composants ou CSS/Javascript de tierce partie. -2. Votre pipeline CI/CD regroupe ensuite ces interfaces et les déploie sur votre réseau de diffusion de contenu (CDN). -3. Les développeurs utilisent Auth0 Management API pour configurer un mode de rendu avancé pour des écrans de connexion universelle déterminés et fournir des liens vers vos ensembles d’actifs hébergés par le CDN. -4. La connexion universelle détermine, lors de l’authentification des utilisateurs, l’écran à afficher et le mode de rendu adéquat pour l’écran demandé. -5. Si l’écran actuel n’est pas configuré pour utiliser le mode de rendu avancé, la connexion universelle reprend par défaut l’interface normale de la connexion universelle, y compris toutes les personnalisations que vous avez apportées à l’interface par défaut. -6. La connexion universelle renvoie le modèle de page du mode de rendu avancé si l’écran en cours est configuré pour utiliser ce mode. -7. Lors de la soumission de données à partir d’interfaces personnalisées, le serveur s’attend à ce que les données soient soumises au moyen d’une requête `POST` à la même page que les données de formulaire codées en url en utilisant le type de contenu `application/x-www-form-urlencoded.` L’envoi de JSON entraîne une erreur. -8. Le serveur valide les données soumises. Si des erreurs surviennent, le serveur renvoie l’écran actuel en plus des erreurs dans l’objet de contexte. S’il n’y a pas d’erreurs, le serveur détermine l’écran suivant à afficher et examine le mode de rendu correspondant. - -## Modèle de page pour le mode de rendu avancé - -Voici un modèle de page HTML de base en mode de rendu avancé. Il comprend : - -* La langue basée sur `ul_locales` dans la balise html. -* Les balises `` standardisées de la connexion universelle et le titre de l’écran par défaut, lesquels peuvent être supprimés lors de la configuration du mode de rendu avancé. -* Un objet Javascript contenant la configuration du locataire Auth0 et les données de la transaction d’authentification. -* Éléments HTML dans la balise `` qui font référence à vos packs de ressources configurés. - - - -Il n’y a pas d’élément div racine dans la balise ``, car certains cadres d’applications frontaux préfèrent créer cette `div` lors de l’étape d’initialisation. - - - -```html lines - - - - - - - - My App | Login - - - - - - -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens.mdx deleted file mode 100644 index 101762d3f..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens.mdx +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: "Configurer les écrans ACUL" -permalink: "configure-acul-screens" -'description': "Comment configurer et modifier les écrans dans les personnalisations avancées pour la connexion universelle" -'og:title': "Configurer les écrans ACUL" -'og:description': "Comment configurer et modifier les écrans dans les personnalisations avancées pour la connexion universelle" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Configurer les écrans ACUL" -'twitter:description': "Comment configurer et modifier les écrans dans les personnalisations avancées pour la connexion universelle" ---- - -Le mode de rendu avancé est configuré sur une base d’écran par écran via [Management API](/docs/fr-ca/api/management/v2) d’appels et est aussi supporté dans [l’outil Deploy CLI](/docs/fr-ca/deploy-monitor/deploy-cli-tool) et le [fournisseur Auth0 Terraform](/docs/fr-ca/deploy-monitor/auth0-terraform-provider). - -## Options de configuration - -Les écrans qui utilisent le mode de rendu avancé disposent des options de configuration suivantes : - -* Mode de rendu d’écran avancé ou standard -* Inclure ou exclure les balises d’en-tête par défaut dans le modèle de page -* Données de transaction et de configuration facultatives qui doivent être incluses dans le contexte de la connexion universelle -* Éléments HTML dans la balise `` qui font référence à vos packs de ressources configurés. - -### Supprimer les balises d’en-tête par défaut - -Les balises HTML suivantes sont ajoutées par défaut au modèle de page en mode de rendu avancé et peuvent être désactivées en définissant la valeur de `default_head_tags_disabled` sur true. - -```html lines - - - - - -My App | Login -``` - -Incluez toujours des remplacements pour la balise `` et la balise robots `<meta>` lors de la suppression des balises d’en-tête par défaut en les incluant dans `head_tags`. - -### Inclure des données facultatives dans le contexte de la connexion universelle - -Les données facultatives peuvent être incluses dans le contexte de connexion universelle en les ajoutant au tableau `context_configuration`. Toutes les données facultatives ne sont pas disponibles sur chaque écran; si les données demandées ne sont pas disponibles, l’API renvoie une erreur. Consultez les pages d’écran individuelles pour obtenir des informations spécifiques à chaque écran sur les données disponibles pour chaque écran. - -Le référencement de `entity.metadata` ou de `authorization_parameters` sans clé spécifique génère une erreur. Pour des raisons de sécurité, les paramètres d’autorisation complets ou les objets de métadonnées ne sont pas exposés. - -Vous trouverez ci-dessous les données contextuelles facultatives disponibles : - -```csharp lines -"context-configuration": [ - "branding.settings", - "branding.themes.default", - "client.logo_uri", - "client.description", - "client.metadata", - "organization.display_name", - "organization.branding", - "organization.metadata", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.ext-" - ], -``` - -### Référencez vos ressources groupées - -Le mode de rendu avancé vous permet d’ajouter des méta-informations, de remplacer les titres de page et les icônes par défaut et de référencer vos ressources groupées en définissant des balises HTML incluses dans le `<head>` du modèle de page. Vous pouvez définir jusqu’à 25 balises par écran, toutes définies sous la forme d’un tableau d’objets JSON. - -```javascript lines -"head_tags": [ - { - "tag": "", - "content": "", - "attributes": {} - } -] -``` - -##### Balise - -Tout élément HTML valide pour une utilisation dans la balise `<head>`. Consultez la [documentation MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head#see_also) pour plus de détails. - -##### Contenu (optionnel) - -Le contenu entre les balises d’ouverture et de fermeture.Le contenu est limité à 250 caractères. - -Lorsque vous utilisez une balise `<title>` personnalisée : - -```html lines -My Company Login | {{client.name}} -``` - -Lorsque vous utilisez une police personnalisée : - -```javascript lines -'@font-face { font-family: "custom-font"; src: url("https://cdn.sass.app/{{client.metadata.custom_font}}");}body { font-family: custom-font;}' -``` - -L’attribut `content` permet d’accéder aux variables ci-dessous; elles sont résolues sur le serveur avant que le modèle de page ne soit renvoyé au navigateur. - - - -<Accordion title="Options de données de contexte"> - -* `branding.settings` -* `branding.themes.default` -* `client.id` -* `client.name` -* `client.metadata.[key_name]` -* `organization.id` -* `organization.name` -* `organization.branding` -* `organization.metadata.[key_name]` -* `screen.name` -* `prompt.name` -* `lieu` -* `user.id` -* `user.metadata.[key_name]` -* `user.app_metadata.[key_name]` - -</Accordion> - -#### Attributs - -Jusqu’à 10 attributs HTML valides peuvent être inclus dans la balise actuelle. - -#### Segments dynamiques pour les attributs de type URL - -Les attributs d’URL tels que `src` et `href` incluent des segments dynamiques qui vous permettent de segmenter des packs en ensembles logiques en fonction d’attributs tels que le client, l’organisation ou les paramètres régionaux. - -Les segments dynamiques ont accès aux données de contexte suivantes : - - - -<Accordion title="Options de segments dynamiques"> - -* `screen.name` -* `prompt.name` -* `client.id` -* `client.name` -* `client.metadata.[key_name]` -* `organization.id` -* `organization.name` -* `organization.metadata.[key_name]` -* `transaction.locale` - -</Accordion> - -<Warning> - -Fournissez toujours des SHA d’intégrité lorsque vous faites référence à des ressources JavaScript pour votre configuration ACUL; consultez la [documentation MDN sur SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) pour plus de détails sur la configuration de la prise en charge de l’intégrité des sous-ressources pour vos ressources. Les segments dynamiques vous permettent de concevoir un ensemble de SHA pour un maximum de dix permutations possibles de l’URL résolue. - -</Warning> - -## Exemple pour Management API - -Vous trouverez ci-dessous un exemple d’appel direct à <Tooltip href="/docs/fr-ca/glossary?term=management-api" tip="Management API -Un produit permettant aux clients d’effectuer des tâches administratives." cta="Voir le glossaire">Management API</Tooltip> pour configurer l’écran de l’identifiant de la connexion. - - - -<Accordion title="Appeler Management API"> - -```csharp lines -# PATCH to /api/v2/prompts/login-id/screen/login-id/rendering -{ - "rendering_mode": "advanced", - "context_configuration": [ - "branding.themes.default", - "client.logo_uri", - "client.description", - "client.metadata.google_tracking_id", - "screen.texts", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ext-my_param" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "https://cdn.sass.app/auth-screens/{{client.name}}.js", - "defer": true, - "integrity": [ - "sha256-someHash/Abc+123", - "sha256-someHash/cDe+456" - ] - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "https://cdn.sass.app/auth-screens/{{client.name}}.css" - } - } - ] -} -``` - -</Accordion> - -## Exemple pour le fournisseur Auth0 Terraform - -Vous trouverez ci-dessous un exemple d’appel Auth0 Terraform pour configurer l’écran d’identification de la connexion. - - - -<Accordion title="Appeler un fournisseur Terraform"> - -```csharp lines -resource "auth0_prompt_screen_renderer" "apsr" { - prompt_type = "login-id" - screen_name = "login-id" - rendering_mode = "advanced" - context_configuration = [ - "branding.settings", - "branding.themes.default", - "client.logo_uri", - "client.description", - "organization.display_name", - "organization.branding", - "screen.texts", - "tenant.name", - "tenant.friendly_name", - "tenant.enabled_locales", - "untrusted_data.submitted_form_data", - "untrusted_data.authorization_params.ui_locales", - "untrusted_data.authorization_params.login_hint", - "untrusted_data.authorization_params.screen_hint", - "user.organizations" - ] - head_tags = jsonencode([ - { - attributes: { - "async": true, - "defer": true, - "integrity": [ - "sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" - ], - "src": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" - }, - tag: "script" - } - ]) -} -``` - -</Accordion> - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations.mdx deleted file mode 100644 index d7000aa72..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations.mdx +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: "Déployer et héberger des personnalisations avancées" -permalink: "deploy-and-host-advanced-customizations" -'description': "Code et instructions pour les personnalisations avancées de la connexion universelle" -'og:title': "Déployer et héberger des personnalisations avancées" -'og:description': "Code et instructions pour les personnalisations avancées de la connexion universelle" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Déployer et héberger des personnalisations avancées" -'twitter:description': "Code et instructions pour les personnalisations avancées de la connexion universelle" ---- - -Le guide suivant vous aidera à déployer vos écrans d’ouverture de session connexion universelle personnalisés en production et à créer un pipeline d’intégration continue et de livraison continue. - -## Mettre en place votre projet - -Préparez tous vos écrans à télécharger et utilisez la structure de fichiers suivante pour votre projet de Personnalisations avancées pour la connexion universelle (ACUL) : - -<Frame>![undefined](/docs/images/fr-ca/cdy7uua7fh8z/2Di2r84kXDTwYAgLOfd96T/caa1654e6c20fc09d766e5a2b2dfd9f2/ACUL_file_structure_diagram.png)</Frame> - -### Créer une nouvelle configuration Vite - -Ajoutez ce qui suit à un nouveau fichier nommé `vite.config.ts` : - - - -<Accordion title="config vite.config.ts"> - -```jsx lines expandable -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; -import { resolve } from 'path'; - -// Screen definitions -const screens = [ - { - name: 'login-id', - prompt: 'login-id', - screen: 'login-id' - }, - { - name: 'login-password', - prompt: 'login-password', - screen: 'login-password' - }, - { - name: 'mfa', - prompt: 'mfa-otp', - screen: 'mfa' - } -]; - -// Generate input object for all screens -const input = Object.fromEntries( - screens.map(screen => [ - screen.name, - resolve(__dirname, `src/${screen.name}/main.tsx`) - ]) -); -export default defineConfig({ - plugins: [react()], - build: { - rollupOptions: { - input, - output: { - // Ensure each screen gets its own directory - dir: 'dist', - entryFileNames: '[name]/index.js', - assetFileNames: '[name]/[name][extname]', - chunkFileNames: '[name]/chunks/[name]-[hash].js', - manualChunks: { - // Split React into a vendor chunk - 'vendor-react': ['react', 'react-dom'], - // Split Auth0 SDK into a vendor chunk - 'vendor-auth0': ['@auth0/auth0-acul-js'] - } - } - }, - // Generate sourcemaps for production debugging - sourcemap: true, - // Minify output - minify: 'terser' - } -}); -``` - -</Accordion> - -### Mettre en place des scripts de compilation - -Créez `scripts/build.ts` pour exécuter votre compilation Vite : - - - -<Accordion title="scripts/build.ts pour exécuter Vite"> - -```jsx lines -import { build } from 'vite'; -async function buildScreens() { - try { - await build(); - console.log('Build completed successfully'); - } catch (err) { - console.error('Build failed:', err); - process.exit(1); - } -} -buildScreens(); -``` - -</Accordion> - -### Créer votre infrastructure AWS - -Créez un bucket S3 et une distribution CloudFront : - - - -<Accordion title="Créer un bucket AWS S3"> - -```bash lines -#Create bucket - -aws s3 mb s3://your-acul-assets --region us-east-1 - -#Enable versioning - -aws s3api put-bucket-versioning \ - --bucket your-acul-assets \ - --versioning-configuration Status=Enabled - -#Create CloudFront distribution - -aws cloudfront create-distribution \ - --origin-domain-name your-acul-assets.s3.amazonaws.com \ - --default-root-object index.html \ - --default-cache-behavior '{"TargetOriginId":"S3Origin","ViewerProtocolPolicy":"redirect-to-https","AllowedMethods":{"Quantity":2,"Items":["GET","HEAD"]},"CachePolicyId":"658327ea-f89d-4fab-a63d-7e88639e58f6"}' -``` - -</Accordion> - -### Configurer CORS pour Auth0 - - - -<Accordion title="Configurer CORS pour Auth0"> - -```json lines -{ - "CORSRules": [{ - "AllowedHeaders": ["*"], - "AllowedMethods": ["GET"], - "AllowedOrigins": [ - "https://*.auth0.com", - "https://your-custom-domain.com" - ], - "MaxAgeSeconds": 3000 - }] -} -``` - -</Accordion> - -### Créer un script de déploiement - -Créez `scripts/deploy.ts` pour le déploiement sur AWS : - - - -<Accordion title="Créer des scripts/deploy.ts"> - -```jsx lines expandable -import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'; -import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront'; -import { readFileSync } from 'fs'; -import { resolve } from 'path'; - -// Screen definitions (keep in sync with vite.config.ts) -const screens = [ - 'login-id', - 'login-password', - 'mfa' -]; - -async function deploy() { - const s3 = new S3Client({ region: 'us-east-1' }); - const cloudfront = new CloudFrontClient({ region: 'us-east-1' }); - - const bucket = process.env.S3_BUCKET; - const distributionId = process.env.CLOUDFRONT_ID; - - for (const screen of screens) { - const distPath = resolve(__dirname, `../dist/${screen}`); - - // Upload assets - const files = ['index.js', 'index.css', 'vendor-react.js', 'vendor-auth0.js']; - for (const file of files) { - try { - const content = readFileSync(`${distPath}/${file}`); - await s3.send(new PutObjectCommand({ - Bucket: bucket, - Key: `${screen}/${file}`, - Body: content, - ContentType: file.endsWith('.js') ? 'application/javascript' : 'text/css', - CacheControl: 'max-age=31536000' - })); - } catch (err) { - console.warn(`Skipping ${file} for ${screen}: ${err.message}`); - } - } - } - - // Invalidate cache - await cloudfront.send(new CreateInvalidationCommand({ - DistributionId: distributionId, - InvalidationBatch: { - CallerReference: Date.now().toString(), - Paths: { Quantity: 1, Items: ['/*'] } - } - })); -} - -deploy().catch(console.error); -``` - -</Accordion> - -### Configurez le flux de travail GitHub Actions - -Créez `.github/workflows/deploy.yml` : - - - -<Accordion title="Configurez le flux de travail GitHub Actions"> - -```yaml lines expandable -name: Deploy ACUL Screens - -on: - push: - branches: [ main ] - workflow_dispatch: - -jobs: - deploy: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Setup Node.js - uses: actions/setup-node@v3 - with: - node-version: '18' - - - name: Install Dependencies - run: npm ci - - - name: Build Screens - run: npm run build - - - name: Configure AWS Credentials - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - aws-region: us-east-1 - - - name: Deploy to CloudFront - run: npm run deploy - env: - S3_BUCKET: your-acul-assets - CLOUDFRONT_ID: ${{ secrets.CLOUDFRONT_ID }} - CLOUDFRONT_DOMAIN: ${{ secrets.CLOUDFRONT_DOMAIN }} - - - name: Setup Auth0 CLI - run: npm install -g auth0-cli - - - name: Configure Auth0 Screens - run: | - # Login to Auth0 - auth0 login --token ${{ secrets.AUTH0_DEPLOY_TOKEN }} - - # Configure each screen - for screen in login-id login-password mfa; do - # Generate settings file - cat > settings.json << EOF - { - "rendering_mode": "advanced", - "context_configuration": [ - "screen.texts", - "branding.settings", - "organization.branding", - "tenant.name", - "tenant.friendly_name" - ], - "head_tags": [ - { - "tag": "script", - "attributes": { - "src": "https://${{ secrets.CLOUDFRONT_DOMAIN }}/${screen}/vendor-react.js", - "defer": true - } - }, - { - "tag": "script", - "attributes": { - "src": "https://${{ secrets.CLOUDFRONT_DOMAIN }}/${screen}/vendor-auth0.js", - "defer": true - } - }, - { - "tag": "script", - "attributes": { - "src": "https://${{ secrets.CLOUDFRONT_DOMAIN }}/${screen}/index.js", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "https://${{ secrets.CLOUDFRONT_DOMAIN }}/${screen}/index.css" - } - } - ] - } - EOF - - # Configure screen - auth0 ul customize \ - --rendering-mode advanced \ - --prompt ${screen} \ - --screen ${screen} \ - --settings-file settings.json - done -``` - -</Accordion> - -Enfin, ajoutez ces secrets à votre repo GitHub : - -* `AWS_ACCESS_KEY_ID` -* `AWS_SECRET_ACCESS_KEY` -* `CLOUDFRONT_ID` -* `CLOUDFRONT_DOMAIN` -* `AUTH0_DEPLOY_TOKEN` \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart.mdx deleted file mode 100644 index 3cba17c05..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart.mdx +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: "Démarrage rapide de la trousse SDK Auth0 ACUL JS" -permalink: "sdk-quickstart" -'description': "Apprenez à mettre en œuvre le démarrage rapide de la trousse SDK Auth0 ACUL JS" -'og:title': "Démarrage rapide de la trousse SDK Auth0 ACUL JS" -'og:description': "Apprenez à mettre en œuvre le démarrage rapide de la trousse SDK Auth0 ACUL JS" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Démarrage rapide de la trousse SDK Auth0 ACUL JS" -'twitter:description': "Apprenez à mettre en œuvre le démarrage rapide de la trousse SDK Auth0 ACUL JS" ---- - -<Card title="Avant de commencer"> - -Vous avez besoin de ce qui suit : - -* Un locataire de développement Auth0 avec la connexion universelle configurée. -* Une application configurée de domaine personnalisé. -* Une app de développement ou d’exemple (comme [React sample](https://auth0.com/docs/quickstart/spa/react)) s’exécutant sur votre localhost. -* [Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée -* Une connexion de base de données qui utilise les mots de passe. - -</Card> - -<Warning> - -La personnalisation avancée pour la connexion universelle est actuellement en accès anticipé. Vous pouvez demander l’accès auprès de votre Gestionnaire de compte technique. Pour en savoir plus sur les étapes de publication d’Auth0, lisez [Étapes de la publication d’un produit](/docs/fr-ca/troubleshoot/product-lifecycle/product-release-stages). - -</Warning> - -La trousse [SDK Auth0 ACUL JS](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-js) vous permet de mettre en œuvre la personnalisation avancée de la connexion universelle (ACUL). Elle simplifie l’intégration des écrans d’authentification (connexion, inscription, sans mot de passe, inscription par clé, etc.) dans vos applications Web, en fournissant les outils nécessaires pour une mise en œuvre transparente. - -Ce guide rapide vous aidera à créer un aperçu de l’écran personnalisé Identifiants de la connexion. -Pour en savoir plus, consultez le [référentiel GitHub de la trousse SDK Auth0 ACUL JS](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-js). - -## 1. Installer la trousse SDK - -Après avoir cloné les paragraphes passe-partout react, changez de répertoire vers le `dossier auth0-acul-react-boilerplate` et installez la trousse SDK. - -```javascript lines -//Clone the ACUL sample application into the root folder of your project - -git clone https://github.com/auth0-samples/auth0-acul-samples.git - -//Change directory to install the ACUL sample application - -cd auth0-acul-samples && npm i -``` - -## 2. Importer et instancier la trousse SDK - -Dans le dossier `auth0-acul-react-boilerplate/src`, modifiez le début du dossier `App.tsx` à importer et instanciez la trousse SDK. - -```javascript lines -import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js"; - -export default function LoginId() { - // Initialize the SDK for this screen - const screenProvider = new ScreenProvider(); - ... -} -``` - -## 3. Mettre en œuvre l’action de connexion - -Localisez la fonction `button click` dans le dossier `App.tsx` pour mettre en œuvre l’action de connexion. - -```javascript lines -const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => { - event.preventDefault(); - - // grab the value from the form - const identifierInput = event.target.querySelector( - "input#identifier" - ) as HTMLInputElement; - - // Call the SDK - screenProvider.login({ username: identifierInput?.value }); - }; -``` - -## 4. Construire et servir les éléments - -ACUL exige que les éléments soient hébergés sur une URL publique. Pour les besoins de ce démarrage rapide, les éléments seront servis à partir de localhost. - -```javascript lines -// Creates the local assets - -npm run build -cd dist - -// Serves the assets from localhost - -npx serve -p 8080 --cors -``` - -## 5. Activer le mode de rendu avancé ACUL - -Activez le mode avancé pour l’écran de l’identifiant de la connexion en utilisant un [jeton d’exploration Management API Auth0 de test](/docs/fr-ca/secure/tokens/access-tokens/management-api-access-tokens/get-management-api-access-tokens-for-testing) et l’adresse du [domaine personnalisé](/docs/fr-ca/customize/custom-domains) configuré pour l’application d’exemple. - -```javascript lines -curl --location --request PATCH 'https://{<CUSTOM-DOMAIN>/api/v2/prompts/login-id/screen/login-id/rendering' \ - --header 'Content-Type: application/json' \ - --header 'Authorization: Bearer <API-TOKEN>' \ - --data '{ -"rendering_mode": "advanced", -"head_tags": [ - { - "tag": "base", - "attributes": { - "href": "http://127.0.0.1:8080/" - } - }, - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/assets/main.<hash>.js", - "type": "module", - "defer": true - } - }, - { - "tag": "link", - "attributes": { - "rel": "stylesheet", - "href": "http://127.0.0.1:8080/assets/shared/style.<hash>.css" - } - }, - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/assets/login-id/index.<hash>.js", - "type": "module", - "defer": true - } - }, - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/assets/shared/common.<hash>.js", - "type": "module", - "defer": true - } - }, - { - "tag": "script", - "attributes": { - "src": "http://127.0.0.1:8080/assets/shared/vendor.<hash>.js", - "type": "module", - "defer": true - } - } -] - }' -``` - -Pour en savoir plus sur la personnalisation avancée, consultez [Déployer et héberger des personnalisations avancées](/docs/fr-ca/customize/login-pages/advanced-customizations/getting-started/deploy-and-host-advanced-customizations). - -## 6. Afficher l’écran Identifiants de la connexion - -Exécutez l’application d’exemple React Auth0 en cours d’exécution sur votre localhost et sélectionnez Connexion. - -L’écran de connexion est affiché en mode avancé avec les personnalisations activées. - -Pour en savoir plus sur les écrans proposés, consultez Écrans ACUL. - -## Référence Trousse SDK - -Pour en savoir plus sur la trousse SDK Auth0 ACUL JS, consultez le [référentiel GitHub de la trousse SDK](https://auth0.github.io/universal-login/classes/Classes.LoginId.html). \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart.mdx new file mode 100644 index 000000000..d11d39bed --- /dev/null +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/quickstart.mdx @@ -0,0 +1,99 @@ +--- +description: Démarrer avec le guide de démarrage rapide ACUL +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': Démarrage rapide ACUL +'og:url': https://auth0.com/docs/ +permalink: quickstart +title: Démarrage rapide ACUL +'twitter:description': Démarrer avec le guide de démarrage rapide ACUL +'twitter:title': Démarrage rapide ACUL +--- + +<Card title="Avant de commencer"> +Vous avez besoin de : +* Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains). +* Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0. +* [L'Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0. +* [Node.js](http://Node.js) V22 +* [Auth0 CLI](https://auth0.github.io/auth0-cli/) installé et configuré avec votre tenant de développement. + +</Card> + +Auth0 CLI vous permet d'implémenter et de tester les écrans de personnalisation avancée pour la connexion universelle (ACUL). Il simplifie la personnalisation des écrans d'authentification (tels que Login, Signup, Passwordless, et Passkey enrollment) pour qu'ils correspondent exactement à vos applications web. + +Suivez ces étapes pour créer un projet ACUL et un écran `login_id` personnalisé à l'aide d'Auth0 CLI: + +## 1. Initialiser un exemple d'application ACUL + +<Callout icon="file-lines" color="#0EA5E9" iconType="regular"> +Si vous n'avez pas configuré votre tenant de développement avec Auth0 CLI, utilisez la commande `auth0 login` pour configurer votre tenant. +</Callout> + +Naviguez vers un emplacement pour construire votre projet et exécutez la commande suivante : + +```bash +auth0 acul init "Your_App_Name" +```` + +1. Sélectionnez **React (with ACUL React SDK)**. +2. Sélectionnez l'écran **login-id**. +3. À **Would you like to proceed with installing the required dependencies using 'npm install'?** Entrez **y**. + +Auth0 CLI crée un nouveau répertoire de projet avec le nom d'application fourni. + +\<Callout icon="file-lines" color="\#0EA5E9" iconType="regular"\> +Si vous n'avez pas sélectionné **y** pour installer les dépendances requises, naviguez vers votre répertoire de projet et exécutez la commande `npm install`. +\</Callout\> + +## 2\. (Optionnel) Ajouter des écrans supplémentaires à votre projet + +Sélectionnez des écrans supplémentaires pour votre projet en exécutant la commande suivante : + +```bash +auth0 acul screen add SCREEN_NAME +``` + +## 3\. Lancer l'écran Login Id avec l'Inspecteur de Contexte Connexion Universelle + +Utilisez l'inspecteur de contexte UL pour lancer l'écran Login ID: + + 1. Naviguez vers votre répertoire de projet et exécutez la commande suivante : + ```bash + auth0 acul dev + ``` + 2. Confirmez le répertoire du projet + 3. Sélectionnez le port pour partager les assets locaux, par défaut le Port `55444` + +L'Inspecteur de Contexte Connexion universelle ouvre une nouvelle fenêtre de navigateur avec l'écran Login Id. + +## 4\. Mettre à jour l'exemple d'écran Login Id + +\<Callout icon="file-lines" color="\#0EA5E9" iconType="regular"\> +La commande auth0 acul dev construit les écrans ACUL, héberge vos assets localement, et surveille en permanence les mises à jour du répertoire des assets; vous permettant de tester vos écrans localement. Pour en savoir plus, lisez la documentation de la commande [Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html). +\</Callout\> + +1. Dans votre répertoire de projet, modifiez le répertoire `/src/index.css` et mettez à jour le widget de logo avec l'URL de votre logo : + +`--ul-theme-widget-logo-url: "Your-Logo-URL";` + +2. Enregistrez la modification. + +Le serveur de développement local se rafraîchit automatiquement avec la dernière modification. + +## 5\. Personnaliser les données de contexte pour vos écrans d'authentification + +En utilisant l'Inspecteur de Contexte Connexion universelle, vous pouvez personnaliser les données de contexte par défaut pour tester vos écrans d'authentification par rapport aux configurations spécifiques au tenant. + +1. Créez une version locale des données de contexte factices pour un écran de votre projet : + +Sélectionnez l'icône **Télécharger JSON** pour télécharger le fichier de données de contexte factices. + +\<Frame\>\<img src="/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" alt="Page ACUL du Dashboard Auth0" /\>\</Frame\> + +2. Renommez et déplacez le fichier téléchargé vers `public/screens/{prompt}/{screen}` et ajoutez-le au fichier `public/manifest.json file` dans le répertoire de votre projet. + + Par exemple, le fichier `login-id-login-id-context.json` téléchargé est renommé `login-id.json` et est déplacé vers `/public/screens/login-id/login-id.json`. + +3. Sélectionnez **Développement Local** dans la **Source de données** de l'Inspecteur de Contexte Universal Login pour charger la version locale du contexte factice pour l'écran. + +Pour en savoir plus, lisez la documentation [Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) documentation. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference.mdx index 2ae7f3898..957a86a3f 100644 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference.mdx +++ b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference.mdx @@ -1,40 +1,59 @@ --- -title: "Trousse SDK ACUL JS" -permalink: "reference" -'description': "En savoir plus sur les propriétés et méthodes ACUL JS." -'og:title': "Trousse SDK ACUL JS" -'og:description': "En savoir plus sur les propriétés et méthodes ACUL JS." -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Trousse SDK ACUL JS" -'twitter:description': "En savoir plus sur les propriétés et méthodes ACUL JS." +description: Découvrez les SDK ACUL et les ressources +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': SDK ACUL et Ressources +'og:url': https://auth0.com/docs/ +permalink: reference +title: SDK ACUL et Ressources +'twitter:description': Découvrez les SDK ACUL et les ressources +'twitter:title': SDK ACUL et ressources --- -La trousse SDK Auth0 ACUL JavaScript vous permet de mettre en place des écrans d’authentification entièrement personnalisés. - -Vous pouvez choisir parmi ces classes d’écran : - -<table class="table"><thead> -<tr> -<th>**Écrans ACUL **</th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td><a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes">Écran de connexion</a></td> -<td>Écrans pour authentifier un utilisateur : <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-screen-class">Connexion</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-id-screen-class">LoginId</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-password-screen-class">LoginPassword</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-passwordless-email-code-screen-class">LoginPasswordlessEmailCode</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes#login-passwordless-sms-otp-screen-class">LoginPasswordlessSmsOtp</a></td> -</tr> -<tr> -<td><a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes">Écran d’inscription</a></td> -<td>Écrans d’inscription d’un nouvel utilisateur : <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#signup-screen-class">Inscription</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#signup-id-screen-class">SignupId</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#signup-password-screen-class">SignupPassword</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#phone-identifier-challenge-screen-class">PhoneIdentifierChallenge</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#phone-identifier-enrollment-screen-class">PhoneIdentifierEnrollment</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#email-identifier-challenge-screen-class">EmailIdentifierChallenge</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#passkey-enrollment-screen-class">PasskeyEnrollment</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes#passkey-enrollment-local-screen-class">PasskeyEnrollmentLocal</a></td> -</tr> -<tr> -<td><a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes">Écrans ResetPassword</a></td> -<td>Écrans de réinitialisation du mot de passe d’un utilisateur : <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes#reset-password-screen-class">ResetPassword</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes#reset-password-email-screen-class">ResetPasswordEmail</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes#reset-password-error-screen-class">ResetPasswordError</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes#reset-password-request-screen-class">ResetPasswordRequest</a> <br/>* <a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes#reset-password-success-screen-class">ResetPasswordSuccess</a></td> -</tr> -<tr> -<td><a href="/docs/fr-ca/customize/login-pages/advanced-customizations/reference/interstitial-captcha-screen-class">Écran interstitiel Captcha</a></td> -<td>Écran permettant de vérifier la réponse de l’utilisateur au test captcha.</td> -</tr> -</tbody> -</table> \ No newline at end of file +Auth0 fournit un choix de SDK à utiliser avec ACUL. + +## SDK ACUL + + * [Auth0 ACUL React SDK](/docs/libraries/acul/react-sdk) + Fournit des React Hooks pour simplifier l'intégration dans les applications React. + + * [Auth0 ACUL JS SDK](/docs/libraries/acul/js-sdk) + La bibliothèque JavaScript principale (écrite en Typescript), adaptée à une utilisation avec n'importe quel framework frontend ou JavaScript pur. + + +## Applications d'exemple ACUL + +Les [applications d'exemple ACUL](https://github.com/auth0-samples/auth0-acul-samples) incluent un pipeline de compilation complet, des workflows de déploiement et des implémentations pour les écrans Universal Login courants. Ces applications d'exemple vous aident dans le développement de vos écrans. Les exemples sont disponibles en React en utilisant les SDK React et JS d'ACUL. + +Vous pouvez utiliser la commande `auth0 acul init` pour initialiser un projet React de démarrage avec l'un ou l'autre des SDK ACUL React ou JS. Pour en savoir plus, lisez [Auth0 CLI](https://github.com/auth0/auth0-cli) sur GitHub. + +## Ressources ACUL +Auth0 fournit plusieurs ressources pour personnaliser votre expérience Universal Login. + +### API de gestion Auth0 + +Mettez à jour les écrans Universal Login individuels ou configurez plusieurs écrans à la fois avec Management API. Pour utiliser l'API de gestion Auth0, vous devez disposer d'un [jeton d'accès](/docs/secure/tokens/access-tokens/management-api-access-tokens). + +**Configuration d'écran individuel** + + * Le [point de terminaison `GET /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/api/management/v2/prompts/get-rendering) vous permet de récupérer la configuration d'un écran unique. + + * Le [point de terminaison `PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/docs/api/management/v2/prompts/patch-rendering) vous permet de configurer ACUL sur un écran unique. + +**Configuration d'écran en masse** + + * Le [point de terminaison `GET /v2/prompts/rendering`](/docs/api/management/v2/prompts/get-all-rendering) vous permet de récupérer les configurations pour tous les écrans. + + * Le [point de terminaison `PATCH /v2/prompts/rendering`](/docs/api/management/v2/prompts/patch-bulk-rendering) vous permet de mettre à jour les écrans en masse. + +### Outils de développement Auth0 + +Auth0 fournit plusieurs outils pour simplifier la gestion des locataires, y compris la configuration d'ACUL. + + * **Auth0 CLI**<p></p> + Utilisez les commandes `acul` pour mettre en place des projets, développer localement et déployer vos configurations d'écran. Pour en savoir plus, lisez [Auth0 CLI](https://github.com/auth0/auth0-cli) sur GitHub. + + * **Auth0 Deploy CLI**<p></p> + Gérez l'ensemble de votre configuration de locataire en tant que code, y compris les paramètres de rendu ACUL définis dans des fichiers JSON. Pour en savoir plus, lisez [Auth0 Deploy CLI](https://github.com/auth0/auth0-deploy-cli) sur GitHub. + + * **Fournisseur Terraform Auth0**<p></p> + Définissez vos configurations d'écran ACUL. Pour en savoir plus, lisez la [ressource `promt_screen_renderer`](https://registry.terraform.io/providers/auth0/auth0/latest/docs/resources/prompt_screen_renderer) sur Terraform. \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/accept-invitation.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/accept-invitation.mdx deleted file mode 100644 index d28f02866..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/accept-invitation.mdx +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: "Accept Invitation screen class" -permalink: "accept-invitation" -'description': "Learn about the ACUL Accept Invitation screen class" -'og:title': "Accept Invitation screen class" -'og:description': "Learn about the ACUL Accept Invitation screen class" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Accept Invitation screen class" -'twitter:description': "Learn about the ACUL Accept Invitation screen class" ---- - -The Accept Invitation screen class provides methods associated with the invitation screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7E8WhBDFF6oBEE6YdGH5Of/ba6c56b47cfca43ce7a798e2c5d5a094/Screenshot_2025-03-25_at_19.58.39.png)</Frame> - -Import and instantiate the Accept Invitation screen class: - -```js lines -import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation'; -const acceptinvitation = new AcceptInvitation(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -acceptinvitation.screen.name; - -// SDK Methods return an object or array -await acceptInvitation.acceptInvitation(); -``` - -### Properties - -The Accept Invitation screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email: string; - inviter: string; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Accept Invitation screen class method is: - -#### acceptInvitation( options ?) - -This method accepts the invitation to the organization. - -```ts lines -import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation'; - - const acceptInvitation = new AcceptInvitation(); - await acceptInvitation.acceptInvitation(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/consent-screen-class.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/consent-screen-class.mdx deleted file mode 100644 index 9195bb99b..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/consent-screen-class.mdx +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: "Consent screen class" -permalink: "consent-screen-class" -'description': "Learn about the ACUL Consent screen class" -'og:title': "Consent screen class" -'og:description': "Learn about the ACUL Consent screen class" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Consent screen class" -'twitter:description': "Learn about the ACUL Consent screen class" ---- - -The Consent screen class provides methods associated with the consent screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/6cK6DkpOJYTjubOGu2vpID/80c03b32275a2c332fe3216df0eca5c7/Consent.png)</Frame> - -Import and instantiate the Consent screen class: - -```ts lines -import Consent from '@auth0/auth0-acul-js/consent'; - const consentManager = new Consent(); -``` - -### Properties - -The Consent screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - | null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - hideScopes: boolean; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - scopes: Scope[]; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface Scope { - description?: string; - value: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Consent screen class methods are: - -#### accept( options? ) - -This method submits the user's decision to accept the requested permissions. - -```ts lines -import Consent from '@auth0/auth0-acul-js/consent'; -const consentManager = new Consent(); -const handleAccept = async () => { - try { - await consentManager.accept(); - console.log('Consent accepted successfully.'); - } catch (err) { - console.error('Error accepting consent:', err); - } -}; -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### deny( options? ) - -This method submits the user's decision to deny the requested permissions. - -```ts lines -import Consent from '@auth0/auth0-acul-js/consent'; -const consentManager = new Consent(); -const handleDeny = async () => { - try { - await consentManager.deny(); - console.log('Form denied successfully.'); - } catch (err) { - console.error('Failed to deny form:', error); - } -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### getError( options? ) - -This method retrieves the array of transaction errors from context or an empty array if none exist. - -```ts lines -import Consent from '@auth0/auth0-acul-js/consent'; - const consentManager = new Consent(); - await consentManager.getError(); -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/customized-consent-screen-class.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/customized-consent-screen-class.mdx deleted file mode 100644 index 0f7f85569..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/customized-consent-screen-class.mdx +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: "Customized Consent screen class" -permalink: "customized-consent-screen-class" -'description': "Customized Learn about the ACUL Customized Consent screen class" -'og:title': "Customized Consent screen class" -'og:description': "Customized Learn about the ACUL Customized Consent screen class" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Customized Consent screen class" -'twitter:description': "Customized Learn about the ACUL Customized Consent screen class" ---- - -The Customized Consent screen class provides methods associated with the customized consent screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/6cK6DkpOJYTjubOGu2vpID/80c03b32275a2c332fe3216df0eca5c7/Consent.png)</Frame> - -Import and instantiate the Customized Consent screen class: - -```ts lines -import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent'; -const customizedconsentManager = new CustomizedConsent(); -``` - -### Properties - -The Customized Consent screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines expandable -interface screen { - authorizationDetails: AuthorizationDetail[]; - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - | null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | Classes.PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - scopes: Scope[]; - texts: null | Record<string, string>; -} - -interface AuthorizationDetail { - type: string; - [key: string]: string; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface Scope { - description?: string; - value: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Customized Consent screen class methods are: - -#### accept( options? ) - -This method submits the user's decision to accept the requested permissions. - -```js lines -import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent'; -const customizedConsentManager = new CustomizedConsent(); -const handleAccept = async () => { - try { - await customizedConsentManager.accept(); - console.log('Consent accepted successfully.'); - } catch (err) { - console.error('Error accepting consent:', err); - } -}; -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### deny( options? ) - -This method submits the user's decision to deny the requested permissions. - -```js lines -import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent'; -const customizedConsentManager = new CustomizedConsent(); -const handleDeny = async () => { -try { - await customizedConsentManager.deny({ denial_reason: "user_declined" }); - // On success, Auth0 will typically redirect. - } catch (e) { - console.error('Failed to deny consent:', e); - } - } -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### getError( options? ) - -This method retrieves the array of transaction errors from context or an empty array if none exist. - -```js lines -import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent'; - const customizedConsentManager = new CustomizedConsent(); - await customizedConsentManager.getError(); -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/device-code-activation.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/device-code-activation.mdx deleted file mode 100644 index 03f5dea73..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/device-code-activation.mdx +++ /dev/null @@ -1,988 +0,0 @@ ---- -title: "Device Code Activation screen classes" -permalink: "device-code-activation" -'description': "Learn about the ACUL Device Code Activation screen classes" -'og:title': "Device Code Activation screen classes" -'og:description': "Learn about the ACUL Device Code Activation screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Device Code Activation screen classes" -'twitter:description': "Learn about the ACUL Device Code Activation screen classes" ---- - -## Device Code Activation screen class - -The Device Code Activation screen class provides methods associated with the device-code-activation screen. This screen is displayed when a user needs to enter a code on their device to activate it. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/2O0X9zVXut4NCScLVcrqf9/45b13c2807c5cf40327ecd2b6231f66a/Screenshot_2025-04-23_at_15.07.42.png)</Frame> - -Import and instantiate the Device Code Activation screen class: - -```js lines -import DeviceCodeActivation from '@auth0/auth0-acul-js/device-code-activation'; -const deviceCodeActivationManager = new DeviceCodeActivation(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -deviceCodeActivationManager.screen.name; - -// SDK Methods return an array -deviceCodeActivationManager.continue({ - code: 'HXNL-XWMT', -}); -``` - -### Properties - -The Device Code Activation screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Device Code Activation screen class method is: - -#### continue( options ?) - -This method continues with the device code activation flow. - -```js lines -import DeviceCodeActivation from '@auth0/auth0-acul-js/device-code-activation'; -const deviceCodeActivationManager = new DeviceCodeActivation(); - -await deviceCodeActivationManager.continue({ - code: '123456', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -</tbody> -</table> - -## Device Code Activation Allowed screen class - -The Device Code Activation screen class provides methods associated with the device-code-activation-allowed screen. This screen is displayed when the device code activation is allowed. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/4IkAJ0lbhcvwv8qHnH9lgr/17e38628ff74219a623fdbcf780aa9fe/Screenshot_2025-04-23_at_16.19.11.png)</Frame> - -Import and instantiate the Device Code Activation Allowed screen class: - -```js lines -import DeviceCodeActivationAllowed from '@auth0/auth0-acul-js/device-code-activation-allowed'; -const deviceCodeActivationAllowedManager = new DeviceCodeActivationAllowed(); -``` - -### Properties - -The Device Code Activation Allowed screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -## Device Code Activation Denied screen class - -The Device Code Activation screen class provides methods associated with the device-code-activation-denied screen. This screen is displayed when the device code activation is denied. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/2nHLbMQ6oMfqWVuwvrkS9K/d4239f99eb7c646bdfa05c0b26a97c9f/Screenshot_2025-04-23_at_16.28.37.png)</Frame> - -Import and instantiate the Device Code Activation Denied screen class: - -```js lines -import DeviceCodeActivationDenied from '@auth0/auth0-acul-js/device-code-activation-denied'; -const deviceCodeActivationDeniedManager = new DeviceCodeActivationDenied(); -``` - -### Properties - -The Device Code Activation Denied screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -## Device Code Confirmation screen class - -The Device Code Confirmation screen class provides methods associated with the device-code-confirmation screen. This screen is displayed when a user needs to confirm the device code. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1Rw4mCNC9q1oYRI1jLo701/f20c5511fdb777b2dac995a9712813af/Screenshot_2025-04-23_at_16.31.23.png)</Frame> - -Import and instantiate the Device Code Confirmation screen class: - -```js lines -import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation'; -const deviceCodeConfirmationManager = new DeviceCodeConfirmation(); -``` - -### Properties - -The Device Code Confirmation screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { textCode: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Device Code Confirmation screen class methods are: - -#### cancel( options ?) - -This method cancels the confirmation process. - -```js lines -import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation'; -const deviceCodeConfirmationManager = new DeviceCodeConfirmation(); - -const handleCancel = async () => { - await deviceCodeConfirmationManager.cancel(); -}; -``` - -#### confirm( options ?) - -This method confirms the code was successfully entered. - -```js lines -import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation'; -const deviceCodeConfirmationManager = new DeviceCodeConfirmation(); - -const handleConfirm = async () => { - await deviceCodeConfirmationManager.confirm(); -}; -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-otp-challenge-screen-class.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-otp-challenge-screen-class.mdx deleted file mode 100644 index aca5dac39..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-otp-challenge-screen-class.mdx +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: "Email OTP Challenge screen class" -permalink: "email-otp-challenge-screen-class" -'description': "Learn about the ACUL Email OTP Challenge screen classes" -'og:title': "Email OTP Challenge screen class" -'og:description': "Learn about the ACUL Email OTP Challenge screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Email OTP Challenge screen class" -'twitter:description': "Learn about the ACUL Email OTP Challenge screen classes" ---- - -The Email OTP Challenge screen class provides methods associated with the email-otp-challenge screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7zje6OddItzeXHt28TPBcU/64d5259080c92c0b550d9394bd1c0049/Screenshot_2025-05-15_at_20.46.00.png)</Frame> - -Import and instantiate the Email OTP Challenge screen class: - -```js lines -import EmailOTPChallenge from '@auth0/auth0-acul-js/email-otp-challenge'; -const emailOTPChallenge = new EmailOTPChallenge(); -``` - -### Properties - -The Email OTP Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Email OTP Challenge screen class methods are: - -#### getError( options? ) - -This method retrieves the array of transaction errors from context or an empty array if none exist. - -```js lines -import EmailOTPChallenge from '@auth0/auth0-acul-js/email-otp-challenge'; - const emailOTPChallengeManager = new EmailOTPChallenge(); - await emailOTPChallengeManager.getError(); -``` - -#### resendCode( options ?) - -This method requests a new OTP code to be sent to the user's email. - -```js lines -import EmailOTPChallenge from '@auth0/auth0-acul-js/email-otp-challenge'; - -const emailOTPChallenge = new EmailOTPChallenge(); -emailOTPChallenge.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### submitCode( options ?) - -This method submits the OTP code entered by the user. - -```js lines -import EmailOTPChallenge from '@auth0/auth0-acul-js/email-otp-challenge'; - -const emailOTPChallenge = new EmailOTPChallenge(); -emailOTPChallenge.submitCode({ - code: '123456', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-verification-result-screen-class.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-verification-result-screen-class.mdx deleted file mode 100644 index 921b84db0..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/email-verification-result-screen-class.mdx +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: "Email Verification Result screen class" -permalink: "email-verification-result-screen-class" -'description': "Learn about ACUL Email Verification Result screen class" -'og:title': "Email Verification Result screen class" -'og:description': "Learn about ACUL Email Verification Result screen class" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Email Verification Result screen class" -'twitter:description': "Learn about ACUL Email Verification Result screen class" ---- - -The Email Verification Result screen class provides methods associated with the email-verification-result screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/fNvOxLFlyoL8mWRazjxJe/b0651fc03d10a5e0825a55cc7d9142a9/Screenshot_2025-05-15_at_21.04.13.png)</Frame> - -Import and instantiate the Email Verification Result screen class: - -```js lines -import EmailVerificationResult from '@auth0/auth0-acul-js/email-verification-result'; - -const emailVerificationResultScreen = new EmailVerificationResult(); - -// Access screen data -const status = emailVerificationResultScreen.screen.data?.status; -const loginLink = emailVerificationResultScreen.screen.loginLink; - -console.log(`Verification Status: ${status}`); -if (loginLink) { - console.log(`Proceed to login: ${loginLink}`); - // In a UI, you would use this link for a button or anchor tag - // e.g., <a href={loginLink}>Go to Login</a> -} -``` - -### Properties - -The Email Verification Result screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {status: string }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - loginLink: null | string; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/interstitial-captcha-screen-class.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/interstitial-captcha-screen-class.mdx deleted file mode 100644 index 1716bb9ba..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/interstitial-captcha-screen-class.mdx +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: "La classe d’écran interstitiel Captcha" -permalink: "interstitial-captcha-screen-class" -'description': "En savoir plus sur la classe d’écran interstitiel Captcha" -'og:title': "La classe d’écran interstitiel Captcha" -'og:description': "En savoir plus sur la classe d’écran interstitiel Captcha" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "La classe d’écran interstitiel Captcha" -'twitter:description': "En savoir plus sur la classe d’écran interstitiel Captcha" ---- - -La classe d’écran interstitiel Captcha fait partie du flux d’[authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et est présentée en fonction des paramètres du locataire. Pour plus de détails, consultez la section [Détection des robots](/docs/fr-ca/secure/attack-protection/bot-detection). - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1n9ZbMP9c4qTNrzszeLAuC/b1b28392eadddd645bc03722a5239e04/InterstitialCaptcha.png)</Frame> - - -Importer et instancier la classe d’écran interstitiel Captcha : - -```js lines -import InterstitialCaptcha from "@auth0/auth0-acul-js/interstitial-captcha"; -const interstitialCaptcha = new InterstitialCaptcha(); - -// SDK Properties return a string, number or boolean -// ex. "interstitial-captcha" -interstitialCaptcha.screen.name; - -// SDK Methods return an object or array -// ex. { email: "someone@example.com" } -interstitialCaptcha.screenData(); -``` - -### Propriétés - -Les propriétés de la classe d’écran interstitiel Captcha sont : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | string[] - | PhonePrefix[]>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthode - -La méthode de la classe d’écran interstitiel Captcha est : - -#### submitCaptcha( options? ) - -Cette méthode vérifie la réponse captcha et dirige l’utilisateur à l’étape suivante. - -```js lines -interstitialCaptchaManager.submitCaptcha({ - captcha: <CaptchaCodeResponse> -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Code captcha ou réponse du fournisseur de captcha.</td> -</tr> -<tr> -<td>`[clé: chaîne]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx deleted file mode 100644 index 4ce0c7b96..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: "Classes d’écran de connexion" -permalink: "login-screen-classes" -'description': "En savoir plus sur les classes d’écran de connexion ACUL" -'og:title': "Classes d’écran de connexion" -'og:description': "En savoir plus sur les classes d’écran de connexion ACUL" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes d’écran de connexion" -'twitter:description': "En savoir plus sur les classes d’écran de connexion ACUL" ---- - -## Classe d’écran de connexion - -La classe d’écran de connexion fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et recueille l’identifiant et le mot de passe de l’utilisateur. Selon la configuration de votre locataire, cet identifiant peut être un courriel, un numéro de téléphone ou un nom d’utilisateur - -<Frame>![ACUL Login](/docs/images/cdy7uua7fh8z/5be9XfnulShqeXa4MXfXky/f3a5dded3539d4d683a525dfb6ad8042/Screenshot_2025-01-28_at_10.49.07.png)</Frame> - - -Importer et instancier la classe d’écran de connexion : - -```javascript lines -import Login from "@auth0/auth0-acul-js/login"; -const loginManager = new Login(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -loginManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de connexion sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - allowedIdentifiers: null | IdentifierType[]; - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - locale: string; - passwordPolicy(): null | PasswordPolicy; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} - -interface PasswordPolicy { - minLength?: number; - policy: - | "low" - | "fair" - | "good" - | "excellent"; -} - -IdentifierType: "phone" | "email" | "username" -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Les méthodes de la classe d’écran de connexion sont : - -#### login( options? ) - -Cette méthode authentifie l’utilisateur en se basant sur l’identifiant et le mot de passe fournis. Selon la configuration du serveur, il pourrait s’agir d’un courriel, d’un nom d’utilisateur ou d’un numéro de téléphone. Examinez les [identifiants flexibles](https://auth0.com/docs/authenticate/database-connections/flexible-identifiers-and-attributes) pour plus de détails. - -```javascript lines -loginManager.login({ - username: "testUser", - password: "testPassword" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`username`</td> -<td>Chaîne</td> -<td>Oui</td> -<td>Identifiant de l’utilisateur.</td> -</tr> -<tr> -<td>`password`</td> -<td>Chaîne</td> -<td>Oui</td> -<td>Mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`captcha`</td> -<td>Chaîne</td> -<td>Conditionnellement</td> -<td>Le code Captcha ou la réponse du fournisseur de Captcha. Cette propriété est requise si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>Chaîne | Numéro | Booléen | Non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur. Ces données sont accessibles dans le déclencheur d’action `post-login`.</td> -</tr> -</tbody> -</table> - -#### socialLogin( options? ) - -Cette méthode redirige l’utilisateur au fournisseur d’identité du réseau social ou de l’entreprise pour authentification. Examinez les [fournisseurs d’identité sociaux](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers) et les [fournisseurs d’identité de l’entreprise](https://auth0.com/docs/authenticate/identity-providers/enterprise-identity-providers) pour les détails. - -```javascript lines -import Login from "@auth0/auth0-acul-js/login"; -const loginManager = new Login(); -loginManager.federatedLogin({ - connection: "google-oauth2" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`connection`</td> -<td>string</td> -<td>Oui</td> -<td>L’identifiant de la connexion.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur. Ces données sont accessibles dans le déclencheur d’Action `post-login`.</td> -</tr> -</tbody> -</table> - -## Classe d’écran de l’identifiant de la connexion - -La classe d’écran de l’identifiant de la connexion fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et recueille l’identifiant de l’utilisateur. Selon la configuration de votre locataire, cet identifiant peut être un courriel, un numéro de téléphone ou un nom d’utilisateur. - -<Frame>![](/docs/images/cdy7uua7fh8z/2kIZmIlrAHoSTyaD8thnIL/515c6f940036953d2989c7b37b7f1fe2/Screenshot_2025-05-15_at_21.18.53.png)</Frame> - - -Importer et instancier la classe d’écran de l’identifiant de la connexion : - -```javascript lines -import LoginId from '@auth0/auth0-acul-js/login-id'; -const loginIdManager = new LoginId(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -loginIdManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginIdManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de l’identifiant de la connexion sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - |null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: null | { challenge: string }; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - allowedIdentifiers: null | IdentifierType[]; - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - isUsernameRequired: boolean; - locale: string; - state: string; - usernamePolicy: null | UsernamePolicy; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} - -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} - -IdentifierType: "phone" | "email" | "username" -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="user"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Les méthodes de la classe d’écran de l’identifiant de la connexion sont : - -#### login( options? ) - -Cette méthode dirige l’utilisateur à l’étape suivante où il peut saisir son mot de passe ou son code de mot de passe unique Selon la configuration du serveur, il pourrait s’agir d’un courriel, d’un nom d’utilisateur ou d’un numéro de téléphone. Examinez les [identifiants flexibles](https://auth0.com/docs/authenticate/database-connections/flexible-identifiers-and-attributes) pour plus de détails. - -```javascript lines -loginIdManager.login({ - username: <identifierFieldValue> -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Oui</td> -<td>L’identifiant de l’utilisateur.</td> -</tr> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur captcha. Cette propriété est obligatoire si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires recueillies auprès de l’utilisateur. Les données sont accessibles dans le déclencheur d’action `post-login`.</td> -</tr> -</tbody> -</table> - -#### passkeyLogin( options? ) - -Cette méthode permet d’authentifier l’utilisateur à l’aide de la clé d’identification fournie et, en cas de succès, de le rediriger vers la `redirect_url`. - -```javascript lines -// This method does not support any parameters -loginIdManager.passkeyLogin(); -``` - -#### socialLogin( options? ) - -Cette méthode redirige l’utilisateur au fournisseur d’identité du réseau social ou de l’entreprise pour authentification. Examinez les [fournisseurs d’identité sociaux](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers) et les [fournisseurs d’identité de l’entreprise](https://auth0.com/docs/authenticate/identity-providers/enterprise-identity-providers) pour les détails. - -```javascript lines -import LoginId from "@auth0/auth0-acul-js/login-id"; -const loginIdManager = new LoginId(); - -// Check if alternateConnections is available and has at least one item -if (!loginIdManager.transaction.alternateConnections) { - console.error('No alternate connections available.'); -} - -// Select the first available connection (users can select any available connection) -const selectedConnection = alternateConnections[0]; - -// Log the chosen connection for debugging or informational purposes -console.log(`Selected connection: ${selectedConnection.name}`); - -// Proceed with federated login using the selected connection -loginIdManager.federatedLogin({ - connection: selectedConnection.name, -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`connection`</td> -<td>string</td> -<td>Oui</td> -<td>L’identifiant de la connexion.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur. Ces données sont accessibles dans le déclencheur d’Action `post-login`.</td> -</tr> -</tbody> -</table> - -#### pickCountryCode( options? ) - -Cette méthode le redirige vers la liste des indicatifs de pays, où il peut mettre à jour le préfixe de l’indicatif de pays pour son numéro de téléphone. - -```javascript lines -// This method does not support any parameters -loginIdManager.pickCountryCode(); -``` - -## Classe d’écran de connexion par mot de passe - -La classe d’écran de connexion par mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et recueille le mot de passe de l’utilisateur. - -<Frame>![](/docs/images/cdy7uua7fh8z/Em8VqaD4fPUx6FRevD8fh/a9133a19565d5d9ddc1454535a0a7a11/loginpassword.png)</Frame> - -Importer et instancier la classe d’écran de connexion par mot de passe - -```javascript lines -import LoginPassword from "@auth0/auth0-acul-js/login-password"; -const loginPasswordManager = new LoginPassword(); - -// SDK Properties return a string, number or boolean -// ex. "login-password" -loginPasswordManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginPasswordManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de connexion par mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { username: string; }; - editIdentifierLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - locale: string; - state: string; - getAllowedIdentifiers(): null | ("email" | "username" | "phone")[]; - getPasswordPolicy(): null | PasswordPolicy; - getUsernamePolicy(): null | UsernamePolicy; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconURL?: string; - showAsButton: boolean; - }; - strategy: string; -} - -interface PasswordPolicy { - minLength?: number; - policy: - | "low" - | "fair" - | "good" - | "excellent"; -} - -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -La méthode de la classe d’écran de connexion par mot de passe est : - -#### login( options? ) - -Cette méthode authentifie l’utilisateur en se basant sur l’identifiant de l’étape précédente et le mot de passe fourni. Une fois authentifié, l’utilisateur est dirigé à la prochaine étape. - -```javascript lines -loginPasswordManager.login({ - username: <usernameFieldValue>, - password: ******** -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur captcha. Cette propriété est obligatoire si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Oui</td> -<td>L’identifiant de l’utilisateur.</td> -</tr> -<tr> -<td>`password`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires recueillies auprès de l’utilisateur. Les données sont accessibles dans le déclencheur d’action `post-login`.</td> -</tr> -</tbody> -</table> - -## Classe d’écran de connexion sans mot de passe par code envoyé par courriel - -La classe d’écran de connexion sans mot de passe par code envoyé par courriel fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first). Il permet à l’utilisateur de s’authentifier à l’aide d’un mot de passe unique avec un code envoyé au courriel envoyé à l’étape précédente. - -| | -| --- | -| Code courriel sans mot de passe de connexion | - -Importer et instancier la classe d’écran de connexion sans mot de passe par code envoyé par courriel - -```javascript lines -import LoginPasswordlessEmailCode from '@auth0/auth0-acul-js/login-passwordless-email-code'; -const loginPasswordlessEmailCodeManager = new LoginPasswordlessEmailCode(); - -// SDK Properties return a string, number or boolean -// ex. "login-passwordless-email-code" -loginPasswordlessEmailCodeManager.screen.name; - -// SDK Methods return an object or array -// ex. { edit_identifier: "/edit_url" } -loginPasswordlessEmailCodeManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de classe d’écran de connexion sans mot de passe par code envoyé par courriel : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email?: string; - username?: string; - }; - editIdentifierLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isSignupEnabled: null | boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -La méthode de classe d’écran de connexion sans mot de passe par code envoyé par courriel : - -#### resendCode( options? ) - -Cette méthode envoie un nouveau code de mot de passe à usage unique à l’adresse courriel fournie à l’étape précédente. - -```javascript lines -// This method does not support any parameters -loginPasswordlessEmailCode.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### SubmitCode( options? ) - -Cette méthode authentifie l’utilisateur en se basant sur l’adresse courriel et le code unique fournis. - -```javascript lines -loginPasswordlessEmailCode.submitCode({ - email: <EmailFieldValue>; - code: <OtpCodeFieldValue>; -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>string</td> -<td>Sous conditions</td> -<td>Le code Captcha ou la réponse du fournisseur Captcha. Cette propriété est requise si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`code`</td> -<td>N° de chaîne</td> -<td>Oui</td> -<td>Code OTP envoyé au courriel.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>Chaîne | Numéro | Booléen | Non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur. Ces données sont accessibles dans le déclencheur d’action `post-login`.</td> -</tr> -</tbody> -</table> - -## Classe d’écran de connexion sans mot de passe avec code unique envoyé par SMS - -La classe d’écran de connexion sans mot de passe avec code unique envoyé par SMS fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first). Il permet à l’utilisateur de s’authentifier à l’aide d’un mot de passe unique avec un code envoyé au numéro de téléphone fourni à l’étape précédente. - -<Frame>![](/docs/images/cdy7uua7fh8z/7CNCkaU1uPRbEUsAyqlj8u/8461823cf224471d19656e4dd9027a87/Screenshot_2025-04-24_at_11.31.00.png)</Frame> - -Importer et instancier la classe d’écran de connexion sans mot de passe par code envoyé par courriel - -```javascript lines -import LoginPasswordlessSmsOtp from '@auth0/auth0-acul-js/login-passwordless-sms-otp'; -const loginPasswordlessSmsOtpManager = new LoginPasswordlessSmsOtp(); - -// SDK Properties return a string, number or boolean -// ex. "login-passwordless-sms-otp" -loginPasswordlessSmsOtpManager.screen.name; - -// SDK Methods return an object or array -// ex. { edit_identifier: "/edit_url" } -loginPasswordlessSmsOtpManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de classe d’écran de connexion sans mot de passe avec code unique envoyé par SMS sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - backLink: null | string; - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: {username: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isSignupEnabled: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -La méthode de classe d’écran de connexion sans mot de passe avec code unique envoyé par SMS sont : - -#### resendOTP( options? ) - -Cette méthode envoie un nouveau code de mot de passe à usage unique à l’adresse courriel fournie à l’étape précédente. - -```javascript lines -// This method does not support any parameters -loginPasswordlessSmsOtpManager.resendOTP() -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### submitOTP( options? ) - -Cette méthode authentifie l’utilisateur en se basant sur le numéro de téléphone et le code unique fournis. - -```javascript lines -loginPasswordlessSmsOtpManager.submitOTP({ - username: <PhoneFieldValue>; - otp: <OtpCodeFieldValue>; -}) -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur captcha. Cette propriété est obligatoire si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`otp`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le code OTP envoyé au numéro de téléphone.</td> -</tr> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le numéro de téléphone de l’étape précédente.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives recueillies auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/logout-screen-classes.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/logout-screen-classes.mdx deleted file mode 100644 index b5356b825..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/logout-screen-classes.mdx +++ /dev/null @@ -1,765 +0,0 @@ ---- -title: "Logout screen classes" -permalink: "logout-screen-classes" -'description': "Learn about ACUL Logout screen classes" -'og:title': "Logout screen classes" -'og:description': "Learn about ACUL Logout screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Logout screen classes" -'twitter:description': "Learn about ACUL Logout screen classes" ---- - -## Logout screen class - -The Logout screen class provides methods associated with the logout screen. This screen allows users to confirm or deny the logout action. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/4fvafgoqxrpjSNPdR8tlGj/185beaff20e8fe2b23a4ca3810940fe9/Screenshot_2025-05-15_at_16.04.46.png)</Frame> - -Import and instantiate the Logout screen class: - -```js lines -import Logout from '@auth0/auth0-acul-js/logout'; -const logout = new Logout(); - -// SDK Properties return a string, number or boolean -// ex. "logout" -logout.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -await logout.confirmLogout({ action: 'accept' }); -``` - -### Properties - -The Logout screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Logout screen class method is: - -#### confirmLogout( options ?) - -This method confirms the logout action (accept or deny). - -```js lines -import Logout from '@auth0/auth0-acul-js/logout'; - -const logout = new Logout(); - -await logout.confirmLogout({ action: 'accept' }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`action`</td> -<td>accept | deny</td> -<td>Yes</td> -<td>The authentication transaction state</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -## Logout Aborted screen class - -The Logout Aborted screen class provides methods associated with the logout-aborted screen. This screen is displayed when a user aborts the logout process. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7jJBCeNe2EqgQulO9fchSy/64ac9d8999f52499193766e0bf537ef6/Screenshot_2025-05-15_at_19.11.25.png)</Frame> - -Import and instantiate the Logout Aborted screen class: - -```js lines -import LogoutAborted from '@auth0/auth0-acul-js/logout-aborted'; - -const logoutAborted = new LogoutAborted(); - -// SDK Properties return a string, number or boolean -// ex. "logout-aborted" -logoutAborted.screen.name; -``` - -### Properties - -The Logout Aborted screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -## Logout Complete screen class - -The Logout Complete screen class provides methods associated with the logout-complete screen. This screen is displayed when a user completes the logout process. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5bso8fSMLDlnt4RHURVAYm/c583500e939a6aed729a04bd9da6a1f6/Screenshot_2025-05-15_at_19.20.19.png)</Frame> - -Import and instantiate the Logout Complete screen class: - -```js lines -import LogoutComplete from '@auth0/auth0-acul-js/logout-complete'; - -const logoutComplete = new LogoutComplete(); - -// SDK Properties return a string, number or boolean -// ex. "logout-complete" -logoutComplete.screen.name; -``` - -### Properties - -The Logout Complete screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa.mdx deleted file mode 100644 index c8df72602..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa.mdx +++ /dev/null @@ -1,1061 +0,0 @@ ---- -title: "Classes d’écran Authentification multifacteur (MFA)" -permalink: "mfa" -'description': "Découvrez les classes d’écran Authentification multifacteur (MFA) ACUL" -'og:title': "Classes d’écran Authentification multifacteur (MFA)" -'og:description': "Découvrez les classes d’écran Authentification multifacteur (MFA) ACUL" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes d’écran Authentification multifacteur (MFA)" -'twitter:description': "Découvrez les classes d’écran Authentification multifacteur (MFA) ACUL" ---- - -## Classe d’écran Commencer l’inscription à la MFA - -La classe d’écran Commencer l’inscription à la <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> gère la sélection et l’inscription des facteurs MFA. - -<Frame>![undefined](/docs/images/fr-ca/cdy7uua7fh8z/62OEPAxQZojISBMcfMSSDl/7e72c9355ec129e03113121e308672a8/Screenshot_2025-02-18_at_13.40.51.png)</Frame> - -Importez et instanciez la classe d’écran Commencer l’inscription à la MFA : - -```js lines -import MfaBeginEnrollOptions from "@auth0/auth0-acul-js/mfa-begin-enroll-options"; -const mfaBeginEnrollOptionsManager = new MfaBeginEnrollOptions(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaBeginEnrollOptionsManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -mfaBeginEnrollOptionsManager.enroll(); -``` - -### Propriétés - -Propriétés de la classe d’écran Commencer l’inscription à la MFA : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | string[] - | PhonePrefix[]>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthode de la classe d’écran Options d’inscription à la MFA : - -#### enroll( options ?) - -Cette méthode poursuit le processus d’inscription avec l’option de MFA fournie. - -```javascript lines -const mfaBeginEnrollOptions = new MfaBeginEnrollOptions(); -await mfaBeginEnrollOptions.enroll({ - action: 'push-notification' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`action`</td> -<td>FactorType: | push-notification | otp | sms | phone | voice | webauth-roaming</td> -<td>Oui</td> -<td>L’option d’authentification multifacteur (MFA) sélectionnée.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | numéro | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Capacités de détection du navigateur MFA - -La classe d’écran Capacités de détection du navigateur MFA détecte les capacités pour les méthodes d’authentification MFA. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7AKxEfmSBMoZw5JkKBmijz/475f620f97b3c6e22547301dffc7a41f/Screenshot_2025-02-20_at_11.20.35.png)</Frame> - -Importez et instanciez la classe d’écran Capacités de détection du navigateur MFA : - -```js lines -import MfaDetectBrowserCapabilities from "@auth0/auth0-acul-js/mfa-detect-browser-capabilities"; - -const mfaDetectBrowserCapabilitiesManager = new MfaDetectBrowserCapabilities(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaDetectBrowserCapabilitiesManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -mfaDetectBrowserCapabilitiesManager.detectCapabilities(); -``` - -### Propriétés - -Propriétés de la classe d’écran Capacités de détection du navigateur MFA : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthode de la classe d’écran Capacités de détection du navigateur MFA : - -#### detectCapabilities( options ?) - -Cette méthode vous permet de sélectionner un authentifiant en fonction des capacités du navigateur. - -```javascript lines -const mfaDetectBrowserCapabilities = new MfaDetectBrowserCapabilities(); -await mfaDetectBrowserCapabilities.detectCapabilities(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Résultat d’inscription à la MFA - -La classe d’écran Résultat d’inscription à la MFA permet aux utilisateurs de sélectionner une adresse courriel inscrite à la MFA. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/lfXmpkRzf0XoXV12vYMe9/a426e0cce6d405a0314a59e79cb4f918/Screenshot_2025-02-20_at_17.10.00.png)</Frame> - -Importez et instanciez la classe d’écran Résultat d’inscription à la MFA : - -```js lines -import MfaEnrollResult from '@auth0/auth0-acul-js/mfa-enroll-result'; -const mfaEnrollResult = new MfaEnrollResult(); - -// SDK Properties return a string, number or boolean -mfaEnrollResult.screen.name; -``` - -### Propriétés - -Propriétés de la classe d’écran Résultat d’inscription à la MFA : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -## Classe d’écran Options de connexion à la MFA - -La classe d’écran Options de connexion à la MFA permet aux utilisateurs de sélectionner un facteur MFA à utiliser pour la connexion. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/4TnKlKLKFyAdX6dcOvVlXw/ebd248e8aabf78d20ba1ffec746b4404/Screenshot_2025-02-20_at_17.25.02.png)</Frame> - -Importez et instanciez la classe d’écran Options de connexion à la MFA : - -```js lines -import MfaLoginOptions from '@auth0/auth0-acul-js/mfa-login-options'; -const mfaLoginOptions = new MfaLoginOptions(); - -// SDK Properties return a string, number or boolean -mfaLoginOptions.screen.name; - -// SDK Methods return an object or array -await mfaLoginOptions.enroll({ - action: 'push-notification' -}); -``` - -### Propriétés - -Propriétés de la classe d’écran Options de connexion à la MFA : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthode de la classe d’écran Options de connexion à la MFA : - -#### enroll( options ?) - -Cette méthode poursuit le processus de connexion avec l’option de MFA sélectionnée. - -```javascript lines -const mfaLoginOptions = new MfaLoginOptions(); -await mfaLoginOptions.enroll({ - action: 'push-notification' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`action`</td> -<td>LoginFactorType: | push-notification | otp | sms | phone | voice | email | recovery-code | webauthn-platform | webauth-roaming | duo</td> -<td>Oui</td> -<td>L’option d’authentification multifacteur (MFA) sélectionnée pour la connexion.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | numéro | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-email.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-email.mdx deleted file mode 100644 index 60ccfaeb8..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-email.mdx +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: "Classes d’écran authentification multifacteur (MFA) par courriel" -permalink: "mfa-email" -'description': "Découvrez les classes d’écran ACUL authentification multifacteur (MFA) par courriel" -'og:title': "Classes d’écran authentification multifacteur (MFA) par courriel" -'og:description': "Découvrez les classes d’écran ACUL authentification multifacteur (MFA) par courriel" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes d’écran authentification multifacteur (MFA) par courriel" -'twitter:description': "Découvrez les classes d’écran ACUL authentification multifacteur (MFA) par courriel" ---- - -## Classe d’écran Défi-réponse de la MFA par courriel - -La classe d’écran Défi-réponse de la <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> par courriel permet aux utilisateurs de vérifier leur adresse courriel à l’aise de la MFA. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/2MOpok82dGPfHvpb8hy1Yc/fda2d95621af85e0ea6ff73d51d815ad/Screenshot_2025-02-20_at_13.11.50.png)</Frame> - -Importez et instanciez la classe d’écran Défi-réponse de la MFA par courriel: - -```js lines -import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge'; -const mfaEmailChallengeManager = new MfaEmailChallenge(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaDetectBrowserCapabilitiesManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -await mfaEmailChallenge.continue({ - code: '123456', - rememberDevice: true -}); -``` - -### Propriétés - -Propriétés de la classe d’écran Défi-réponse de la MFA par courriel : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email: string; - remember_device?: boolean; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthodes de la classe d’écran Défi-réponse de la MFA par courriel : - -#### continue( options ?) - -Cette méthode continue le défi-réponse par courriel à l’aide du code fourni. - -```js lines -import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge'; - -const mfaEmailChallenge = new MfaEmailChallenge(); -await mfaEmailChallenge.continue({ - code: '123456', - rememberDevice: true -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>chaîne</td> -<td>oui</td> -<td>Code saisi par l’utilisateur.</td> -</tr> -<tr> -<td>`rememberDevice`</td> -<td>booléen</td> -<td>Non</td> -<td>Mémoriser l’appareil de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### pickEmail( options ?) - -Cette méthode permet à l’utilisateur de sélectionner d’autres adresses courriel, le cas échéant. - -```js lines -import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge'; - -const mfaEmailChallenge = new MfaEmailChallenge(); -await mfaEmailChallenge.pickEmail(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### resendCode( options ?) - -Cette méthode renvoie le code courriel. - -```js lines -import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge'; - -const mfaEmailChallenge = new MfaEmailChallenge(); -await mfaEmailChallenge.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -Cette méthode permet à l’utilisateur de sélectionner une autre option de MFA. - -```js lines -import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge'; - -const mfaEmailChallenge = new MfaEmailChallenge(); -await mfaEmailChallenge.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Liste d’adresses courriel MFA - -La classe d’écran Liste d’adresses courriel MFA permet aux utilisateurs de sélectionner une adresse courriel inscrite à la MFA. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7d8tt9q970YJ4gT5C0kNhx/dfbaefcd9d913b41addc7b652d3bf63d/Screenshot_2025-02-20_at_15.43.19.png)</Frame> - -Importez et instanciez la classe d’écran Liste d’adresses courriel MFA : - -```js lines -import MfaEmailList from '@auth0/auth0-acul-js/mfa-email-list'; -const mfaEmailList = new MfaEmailList(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaEmailList.screen.name; - -// SDK Methods return an object or array -await mfaEmailList.selectMfaEmail({ -index: 0 // for demonstration we are selecting the first index -}); -``` - -### Propriétés - -Propriétés de la classe d’écran Liste d’adresses courriel MFA : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthodes de la classe d’écran Liste d’adresses courriel MFA : - -#### goBack( options ?) - -Cette méthode permet à l’utilisateur d’aller à l’écran précédent. - -```js lines -import MfaEmailList from '@auth0/auth0-acul-js/mfa-email-list'; - -const mfaEmailList = new MfaEmailList(); -await mfaEmailList.goBack(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### selectMfaEmail( options ?) - -Cette méthode permet à l’utilisateur d’effectuer une sélection dans la liste des adresses courriel inscrites. - -```js lines -import MfaEmailList from '@auth0/auth0-acul-js/mfa-email-list'; - -const mfaEmailList = new MfaEmailList(); -await mfaEmailList.selectMfaEmail({ - index: 0 // for demonstration we are selecting the first index -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`index`</td> -<td>nombre</td> -<td>Oui</td> -<td>L’index de l’adresse courriel à sélectionner.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-otp.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-otp.mdx deleted file mode 100644 index dd9ae8a53..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-otp.mdx +++ /dev/null @@ -1,902 +0,0 @@ ---- -title: "Multi-Factor Authentication OTP screen classes" -permalink: "mfa-otp" -'description': "Learn about the ACUL Multi-Factor Authentication OTP screen classes" -'og:title': "Multi-Factor Authentication OTP screen classes" -'og:description': "Learn about the ACUL Multi-Factor Authentication OTP screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Multi-Factor Authentication OTP screen classes" -'twitter:description': "Learn about the ACUL Multi-Factor Authentication OTP screen classes" ---- - -## MFA OTP Challenge screen class - -The <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> OTP Challenge screen class provides methods associated with the mfa-otp-challenge screen. This screen is shown when a user needs to enter an OTP code during MFA. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/4EcKVu4uEjsNEpVcI5bW0b/e6fb47c9addc1c07f1f39516aafa5e0e/Screenshot_2025-03-26_at_00.01.07.png)</Frame> - -Import and instantiate the MFA OTP Challenge screen class: - -```js lines -import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge'; -const mfaOtpChallenge = new MfaOtpChallenge(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaOtpChallenge.screen.name; - -// SDK Methods return an object or array -await mfaOtpChallenge.continue({ - code: '123456', - rememberBrowser: true -}); -``` - -### Properties - -The MFA OTP Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { remember_device?: boolean; }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA OTP Challenge screen class methods are: - -#### continue( options ?) - -This method continues with the OTP challenge using the provided code. - -```js lines -import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge'; -const mfaOtpChallenge = new MfaOtpChallenge(); - -await mfaOtpChallenge.continue({ - code: '123456', - rememberBrowser: true -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -<tr> -<td>`rememberBrowser`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the user's browser configuration.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -This method allows the user to try another MFA method. - -```js lines -import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge'; -const mfaOtpChallenge = new MfaOtpChallenge(); - -await mfaOtpChallenge.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA OTP Enrollment Code screen class - -The MFA OTP Enrollment Code screen class provides methods associated with the mfa-otp-enrollment-code screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5x7zKvx9RtgMzJqkIgvE5Z/17d50fc705c6e0bf0bd75444d2b486ff/Screenshot_2025-03-26_at_00.01.21.png)</Frame> - -Import and instantiate the MFA OTP Enrollment Code screen class: - -```js lines -import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code'; -const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaOtpEnrollmentCode.screen.name; - -// SDK Methods return an object or array -await mfaOtpEnrollmentCode.continue({ - code: '123456', -}); -``` - -### Properties - -The MFA OTP Enrollment Code screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { text_code: string; }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA OTP Enrollment Code screen class methods are: - -#### continue( options ?) - -This method continues the MFA OTP enrollment process by submitting the OTP code. - -```js lines -import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code'; -const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode(); - -await mfaOtpEnrollmentCode.continue({ - code: '123456', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -This method allows the user to try another MFA method. - -```js lines -import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code'; -const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode(); - -await mfaOtpEnrollmentCode.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA OTP Enrollment QR screen class - -The MFA OTP Enrollment QR screen class provides methods associated with the mfa-otp-enrollment-qr screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/xgACud9b5L3UQ6OKH5rf8/8c3cce8d90c0b9d2162e2441df85bb01/Screenshot_2025-03-26_at_00.00.27.png)</Frame> - -Import and instantiate the MFA OTP Enrollment QR screen class: - -```js lines -import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr'; -const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaOtpEnrollmentQr.screen.name; - -// SDK Methods return an object or array -await mfaOtpEnrollmentQr.continue({ code: '123456' }); -``` - -### Properties - -The MFA OTP Enrollment QR screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { qr_code: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA OTP Enrollment QR screen class methods are: - -#### continue( options ?) - -This method continues the MFA OTP enrollment QR process by submitting the OTP code. - -```js lines -import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr'; -const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr(); - -await mfaOtpEnrollmentQr.continue({ code: '123456' }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> - -#### toggleView( options ?) - -This method navigates to the authenticator selection screen. - -```js lines -import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr'; -const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr(); - -await mfaOtpEnrollmentQr.toggleView(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`rememberBrowser`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the user's browser configuration.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -This method allows the user to try another MFA method. - -```js lines -import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr'; -const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr(); - -await mfaOtpEnrollmentQr.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`rememberBrowser`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the user's browser configuration.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-phone.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-phone.mdx deleted file mode 100644 index 7c9f1d5f9..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-phone.mdx +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: "Multi-Factor Authentication Phone screen classes" -permalink: "mfa-phone" -'description': "Learn about the ACUL Multi-Factor Authentication Phone screen classes" -'og:title': "Multi-Factor Authentication Phone screen classes" -'og:description': "Learn about the ACUL Multi-Factor Authentication Phone screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Multi-Factor Authentication Phone screen classes" -'twitter:description': "Learn about the ACUL Multi-Factor Authentication Phone screen classes" ---- - -## MFA Phone Challenge screen class - -The <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> Phone Challenge screen class provides methods associated with the mfa-phone-challenge screen. This screen is displayed when the user needs to receive a code to verity their identity. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/n4liCJdxEsE43xLVB5oEy/664d4afa0a2ede835f54aa622f893a04/Screenshot_2025-04-23_at_17.07.25.png)</Frame> - -Import and instantiate the MFA Phone Challenge screen class: - -```js lines -import MfaPhoneChallenge from '@auth0/auth0-acul-js/mfa-phone-challenge'; -const mfaPhoneChallenge = new MfaPhoneChallenge(); - -// You can access screen data like the phone number -const phoneNumber = mfaPhoneChallenge.screen.data?.phoneNumber; -console.log('Phone number for challenge:', phoneNumber); - -// Access transaction details like errors -const errors = mfaPhoneChallenge.transaction.errors; -if (errors) { - console.error('Transaction errors:', errors); -} -``` - -### Properties - -The MFA Phone Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { phoneNumber: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab></Tabs> - -### Methods - -The MFA Phone Challenge screen class methods are: - -#### continue( options ?) - -This method submits the user's choice of receiving the MFA code via SMS or voice call. It uses the phone number from the class screen property. - -```javascript lines -const mfaPhoneChallenge = new MfaPhoneChallenge(); - -// Request code via SMS -await mfaPhoneChallenge.continue({ type: 'sms' }); - -// Request code via Voice Call -await mfaPhoneChallenge.continue({ type: 'voice' }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`type`</td> -<td>sms | voice</td> -<td>Yes</td> -<td>define the method to receive the verification code.</td> -</tr> -</tbody> -</table> - -#### pickPhone( options ?) - -This method redirects the user to a phone selection screen. - -```javascript lines -const mfaPhoneChallenge = new MfaPhoneChallenge(); -await mfaPhoneChallenge.pickPhone(); -``` - -#### tryAnotherMethod( options ?) - -This method redirects the user to the authenticator selection screen. - -```javascript lines -const mfaPhoneChallenge = new MfaPhoneChallenge(); -await mfaPhoneChallenge.tryAnotherMethod(); -``` - -## MFA Phone Enrollment screen class - -The Device Code Confirmation screen class provides methods associated with the mfa-phone-enrollment screen. This screen is displayed when a user needs to confirm the device code. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/3o4ohXUXfkVaaZy0992sgL/a84b54fa31fcbf2b0695c9ff08357887/Screenshot_2025-04-23_at_17.36.28.png)</Frame> - -Import and instantiate the MFA Phone Enrollment screen class: - -```js lines -import MfaPhoneEnrollment from '@auth0/auth0-acul-js/mfa-phone-enrollment'; -const mfaPhoneEnrollment = new MfaPhoneEnrollment(); - -// Call the continueEnrollment method with a phone number and type -mfaPhoneEnrollment.continueEnrollment({ - phone: "1234567890", - type: "sms" // or "voice" -}); -``` - -### Properties - -The MFA Phone Enrollment screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Phone Enrollment screen class methods are: - -#### continueEnrollment( options ?) - -This method continues the enrollment process with the provided phone number and selected type SMS or voice. - -```javascript lines -const mfaPhoneEnrollment = new MfaPhoneEnrollment(); - -// Call the continueEnrollment method with a phone number and type -mfaPhoneEnrollment.continueEnrollment({ - phone: "1234567890", - type: "sms" // or "voice" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`phone`</td> -<td>string</td> -<td>Yes</td> -<td>The user's phone number.</td> -</tr> -<tr> -<td>`type`</td> -<td>sms | voice</td> -<td>Yes</td> -<td>define the method to receive the verification code.</td> -</tr> -</tbody> -</table> - -#### pickCountryCode( options ?) - -This method allows users to pick their country code. - -```javascript lines -const mfaPhoneEnrollment = new MfaPhoneEnrollment(); - -// Call the pickCountryCode method -mfaPhoneEnrollment.pickCountryCode(); -``` - -#### tryAnotherMethod( options ?) - -This method asks users to try another MFA method. - -```javascript lines -const mfaPhoneEnrollment = new MfaPhoneEnrollment(); - -// Call the tryAnotherMethod -mfaPhoneEnrollment.tryAnotherMethod(); -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-push.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-push.mdx deleted file mode 100644 index 394522887..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-push.mdx +++ /dev/null @@ -1,1161 +0,0 @@ ---- -title: "Classes d’écran de l’authentification multifacteur (MFA) par notification poussée" -permalink: "mfa-push" -'description': "Découvrez les classes d’écran de la MFA ACUL par authentification multifacteur (MFA) poussée" -'og:title': "Classes d’écran de l’authentification multifacteur (MFA) par notification poussée" -'og:description': "Découvrez les classes d’écran de la MFA ACUL par authentification multifacteur (MFA) poussée" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes d’écran de l’authentification multifacteur (MFA) par notification poussée" -'twitter:description': "Découvrez les classes d’écran de la MFA ACUL par authentification multifacteur (MFA) poussée" ---- - -## Classe d’écran Défi-réponse de la MFA par notification poussée - -La classe d’écran Défi-réponse de la <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> par notification poussée est affichée lorsqu’une notification poussée a été envoyée à l’appareil de l’utilisateur. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/6n6fftBZDpoT5FdmipebK6/3a777c3c9a87a6f6cf53cf96aab67c8d/Screenshot_2025-02-20_at_22.13.55.png)</Frame> - -Importez et instanciez la classe d’écran Défi-réponse de la MFA par notification poussée : - -```js lines -import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push'; -const mfaPushChallengePush = new MfaPushChallengePush(); - -// SDK Properties return a string, number or boolean -mfaPushChallengePush.screen.name; - -// SDK Methods return an object or array -await mfaPushChallengePush.continue(); -``` - -### Propriétés - -Propriétés de la classe d’écran Défi-réponse de la MFA par notification poussée : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - deviceName: string; - rememberDevice?: boolean - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthodes de la classe d’écran Défi-réponse de la MFA par notification poussée : - -#### continue( options ?) - -Cette méthode continue avec le défi-réponse par notification poussée. - -```javascript lines -const mfaPushChallengePush = new MfaPushChallengePush(); -await mfaPushChallengePush.continue(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### enterCodeManually( options ?) - -Cette méthode permet à l’utilisateur de saisir le code de vérification manuellement. - -```javascript lines -const mfaPushChallengePush = new MfaPushChallengePush(); -await mfaPushChallengePush.enterCodeManually(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### resendnotification pousséeNotification( options ?) - -Cette méthode renvoie la notification poussée. - -```javascript lines -const mfaPushChallengePush = new MfaPushChallengePush(); -await mfaPushChallengePush.resendPushNotification(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -Cette méthode permet à l’utilisateur d’essayer une autre méthode d’authentification. - -```javascript lines -const mfaPushChallengePush = new MfaPushChallengePush(); -await mfaPushChallengePush.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Inscription code QR MFA par notification poussée - -La classe d’écran Inscription code QR MFA par notification poussée met en œuvre l’écran de balayage du code QR. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/13d9Riyyn389IFhaV2NxAC/792409a4ac81fdd75ead60451742ccde/Screenshot_2025-02-20_at_22.44.09.png)</Frame> - -Importez et instanciez la classe d’écran Inscription code QR MFA par notification poussée : - -```js lines -import MfaPushEnrollmentQr from '@auth0/auth0-acul-js/mfa-push-enrollment-qr'; -const mfaPushEnrollmentQr = new MfaPushEnrollmentQr(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaPushEnrollmentQr.screen.name; - -// SDK Methods return an object or array -await mfaPushEnrollmentQr.pickAuthenticator(); -``` - -### Propriétés - -Propriétés de la classe d’écran Inscription code QR MFA par notification poussée : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { qr_code: string; qr_uri: string; show_code_copy: boolean }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthode de la classe d’écran Inscription code QR MFA par notification poussée : - -#### pickAuthenticator( options ?) - -Cette méthode renvoie l’utilisateur à l’écran de sélection d’authentifiant. - -```js lines -import MfaPushEnrollmentQr from '@auth0/auth0-acul-js/mfa-push-enrollment-qr'; - -const mfaPushEnrollmentQr = new MfaPushEnrollmentQr(); -await mfaPushEnrollmentQr.pickAuthenticator(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Liste MFA par notification poussée - -La classe d’écran Liste MFA par notification poussée met en œuvre la fonctionnalité d’écran mfa-push-list. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1OXzeT38UHHXUNmGAWaBIg/af967dcd06ed74ede90d7425323a1de8/Screenshot_2025-02-20_at_23.02.21.png)</Frame> - -Importez et instanciez la classe d’écran Liste MFA par notification poussée : - -```js lines -import MfaPushList from '@auth0/auth0-acul-js/mfa-push-list'; -const mfaPushList = new MfaPushList(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaPushList.screen.name; - -// SDK Methods return an object or array -await mfaPushList.selectMfaPushDevice({ deviceIndex: 0 }); -``` - -### Propriétés - -Propriétés de la classe d’écran Liste MFA par fication poussée : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {enrolled_devices: string[];}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthodes de la classe d’écran Liste MFA par notification poussée : - -#### goBack( options ?) - -Cette méthode permet à l’utilisateur d’aller à l’écran précédent. - -```js lines -import MfaPushList from '@auth0/auth0-acul-js/mfa-push-list'; - -const mfaPushList = new MfaPushList(); -await mfaPushList.goBack(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### selectMfaPushDevice( options ?) - -Cette méthode permet à l’utilisateur de sélectionner dans une liste un appareil enregistré pour initier la MFA par notification poussée. - -```js lines -import MfaPushList from '@auth0/auth0-acul-js/mfa-push-list'; - -const mfaPushList = new MfaPushList(); -await mfaPushList.selectMfaPushDevice({ deviceIndex: 0 }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`deviceIndex`</td> -<td>nombre</td> -<td>Oui</td> -<td>L’index de l’appareil à sélectionner dans la liste des appareils inscrits.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Bienvenue MFA par notification poussée - -La classe d’écran Bienvenue MFA par notification poussée initialise l’écran MfaPushWelcome avec des données tirées du contexte de la connexion universelle. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1eV1z2U3ivWXjGCWeQ9yhn/e70942ea41a29b32aa9797fba2cdf7cc/Screenshot_2025-02-21_at_10.09.24.png)</Frame> - -Importez et instanciez la classe d’écran Bienvenue MFA par notification poussée : - -```js lines -import MfaPushWelcome from '@auth0/auth0-acul-js/mfa-push-welcome'; -const mfaPushWelcome = new MfaPushWelcome(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaPushWelcome.screen.name; - -// SDK Methods return an object or array -await mfaPushWelcome.enroll(); -``` - -### Propriétés - -Propriétés de la classe d’écran Bienvenue MFA notification poussée : - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | string[] - | PhonePrefix[]>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - screen: { - links: { - android: string; - ios: string; - }; - name: string; - }; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Méthode de la classe d’écran Bienvenue MFA par notification poussée : - -#### enroll( options ?) - -Cette méthode envoie l’utilisateur à l’écran d’inscription. - -```js lines -import MfaPushWelcome from '@auth0/auth0-acul-js/mfa-push-welcome'; - -const mfaPushWelcome = new MfaPushWelcome(); -await mfaPushWelcome.enroll(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### pickAuthenticator( options ?) - -Cette méthode renvoie l’utilisateur à l’écran de sélection d’authentifiant. - -```js lines -import MfaPushWelcome from '@auth0/auth0-acul-js/mfa-push-welcome'; - -const mfaPushWelcome = new MfaPushWelcome(); -await mfaPushWelcome.pickAuthenticator(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-recovery-code.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-recovery-code.mdx deleted file mode 100644 index cd7fb844e..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-recovery-code.mdx +++ /dev/null @@ -1,811 +0,0 @@ ---- -title: "Multi-Factor Authentication Recovery Code screen classes" -permalink: "mfa-recovery-code" -'description': "Learn about the ACUL Multi-Factor Authentication Recovery Code screen classes" -'og:title': "Multi-Factor Authentication Recovery Code screen classes" -'og:description': "Learn about the ACUL Multi-Factor Authentication Recovery Code screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Multi-Factor Authentication Recovery Code screen classes" -'twitter:description': "Learn about the ACUL Multi-Factor Authentication Recovery Code screen classes" ---- - -## MFA Recovery Code Challenge screen class - -The <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> Recovery Code Challenge screen class provides methods associated with the mfa-recovery-code-challenge screen. This screen is displayed when the user needs to enter a recovery code to log in. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5yYzaRgj3y0g6fKLga8hD6/0b46a45ed656a3a0b96d8e0c40d00a24/Screenshot_2025-04-23_at_18.56.09.png)</Frame> - -Import and instantiate the MFA Recovery Code Challenge screen class: - -```js lines -import MfaRecoveryCodeChallenge from '@auth0/auth0-acul-js/mfa-recovery-code-challenge'; - -const mfaRecoveryCodeChallenge = new MfaRecoveryCodeChallenge(); -``` - -### Properties - -The MFA Recovery Code Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Recovery Code Challenge screen class methods are: - -#### continue( options ?) - -This method continues the MFA Recovery Code Challenge flow. - -```js lines -import MfaRecoveryCodeChallenge from '@auth0/auth0-acul-js/mfa-recovery-code-challenge'; -const mfaRecoveryCodeChallenge = new MfaRecoveryCodeChallenge(); - -mfaRecoveryCodeChallenge.continue({ - code: '123456', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -This method asks the user to try another challenge. - -```js lines -import MfaRecoveryCodeChallenge from '@auth0/auth0-acul-js/mfa-recovery-code-challenge'; -const mfaRecoveryCodeChallenge = new MfaRecoveryCodeChallenge(); - -mfaRecoveryCodeChallenge.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Recovery Code Challenge New Code screen class - -The MFA Recovery Code Challenge New Code screen class provides methods associated with the mfa-recovery-code-challenge-new-code screen. This screen displays the MFA recovery code for safe keeping. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/2z7O3hMDh95LddseNVAuqt/79dec7a52df2d4d4328cf23f9dfade90/Screenshot_2025-05-15_at_19.41.42.png)</Frame> - -Import and instantiate the MFA Recovery Code Challenge New Code screen class: - -```js lines -import MfaRecoveryCodeChallengeNewCode from '@auth0/auth0-acul-js/mfa-recovery-code-challenge-new-code'; - -const mfaRecoveryCodeChallengeNewCode = new MfaRecoveryCodeChallengeNewCode(); -``` - -### Properties - -The MFA Recovery Code Challenge New Code screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { textCode: string }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Recovery Code Challenge New Code screen class methods is: - -#### continue( options? ) - -This method confirms that the user has saved the new recovery code and continues the authentication flow. - -```javascript lines -const screenManager = new MfaRecoveryCodeChallengeNewCode(); -// Assuming a checkbox 'confirmSaved' is checked by the user -if (confirmSaved) { - try { - await screenManager.continue({ customData: 'optionalValue' }); - } catch (err) { - // Handle errors, potentially check screenManager.transaction.errors - console.error("Confirmation failed:", err); - } -} else { - // Prompt user to confirm saving the code -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Recovery Code Enrollment screen class - -The MFA Recovery Code Enrollment screen class provides methods associated with the mfa-recovery-code-enrollment screen. This screen displays the MFA recovery code for safe keeping. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/2uWvPBVRFNE3pRVctzxyOP/986cc0aa6e64db27944bbcc3c5b4ea04/Screenshot_2025-04-23_at_19.05.21.png)</Frame> - -Import and instantiate the MFA Recovery Code Enrollment screen class: - -```js lines -import MfaRecoveryCodeEnrollment from '@auth0/auth0-acul-js/mfa-recovery-code-enrollment'; - -const mfaRecoveryCodeEnrollment = new MfaRecoveryCodeEnrollment(); -``` - -### Properties - -The MFA Recovery Code Enrollment screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { textCode: string; }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Recovery Code Enrollment screen class methods is: - -#### continue( options? ) - -This method declares that the user has confirmed that they saved their recovery code and continues to the next screen in the authentication flow. - -```js lines -import MfaRecoveryCodeEnrollment from '@auth0/auth0-acul-js/mfa-recovery-code-enrollment'; -const mfaRecoveryCodeEnrollment = new MfaRecoveryCodeEnrollment(); - -// Declare that the user saved the recovery code -await mfaRecoveryCodeEnrollment.continue(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`isCodeCopied`</td> -<td>boolean</td> -<td>Yes</td> -<td>The user confirms to have copied the recovery code.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-sms.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-sms.mdx deleted file mode 100644 index ea18db330..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-sms.mdx +++ /dev/null @@ -1,1328 +0,0 @@ ---- -title: "Authentification multifacteur (MFA) par SMS – Classes d’écrans" -permalink: "mfa-sms" -'description': "Découvrez les classes d’écran de l’authentification multifacteur (MFA) par SMS" -'og:title': "Authentification multifacteur (MFA) par SMS – Classes d’écrans" -'og:description': "Découvrez les classes d’écran de l’authentification multifacteur (MFA) par SMS" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Authentification multifacteur (MFA) par SMS – Classes d’écrans" -'twitter:description': "Découvrez les classes d’écran de l’authentification multifacteur (MFA) par SMS" ---- - -## Classe d’écran Défi-réponse de la MFA par SMS - -La classe d’écran Défi-réponse de la <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> par SMS fournit des méthodes associées à l’écran mfa-sms-challenge. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/20G20ssvZiz0Z3OHp9QKmT/374f18dcf23be977240e53a51ea82012/Screenshot_2025-02-21_at_10.43.36.png)</Frame> - -Importez et instanciez la classe d’écran Défi-réponse de la MFA par SMS : - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; -const mfaSmsChallenge = new MfaSmsChallenge(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaSmsChallenge.screen.name; - -// SDK Methods return an object or array -await mfaSmsChallenge.continueMfaSmsChallenge({ - code: '123456', - rememberBrowser: true, -}); -``` - -### Propriétés - -Propriétés de la classe d’écran Défi-réponse de la MFA par SMS : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - phone_number?: string; - remember_device?: boolean; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Propriétés de la classe d’écran Défi-réponse de la MFA par SMS : - -#### continueMfaSmsChallenge( options ?) - -Cette méthode soumet le code de vérification saisi et l’option rememberBrowser. - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; - -const mfaSmsChallenge = new MfaSmsChallenge(); -await mfaSmsChallenge.continueMfaSmsChallenge({ - code: '123456', - rememberBrowser: true, -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le code saisi par l’utilisateur.</td> -</tr> -<tr> -<td>`rememberBrowser`</td> -<td>booléen</td> -<td>Non</td> -<td>Mémoriser la configuration du navigateur de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### getACall( options ?) - -Cette méthode permet d’envoyer le code de vérification par appel vocal. - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; - -const mfaSmsChallenge = new MfaSmsChallenge(); -await mfaSmsChallenge.getACall(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### pickSms( options ?) - -Cette méthode permet à l’utilisateur de sélectionner une configuration SMS différente, le cas échéant. - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; - -const mfaSmsChallenge = new MfaSmsChallenge(); -await mfaSmsChallenge.pickSms(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### resendCode( options ?) - -Cette méthode renvoie le code SMS. - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; - -const mfaSmsChallenge = new MfaSmsChallenge(); -await mfaSmsChallenge.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -Cette méthode soumet l’action pour essayer une autre méthode de MFA. - -```javascript lines -import MfaSmsChallenge from '@auth0/auth0-acul-js/mfa-sms-challenge'; - -const mfaSmsChallenge = new MfaSmsChallenge(); -await mfaSmsChallenge.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Inscription MFA par SMS - -La classe d’écran Inscription MFA par SMS fournit des méthodes associées à l’écran mfa-sms-challenge. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5DG03Sm0FFKKt9JOxOl5WN/5df6ce785b080baa951b749b4c472793/Screenshot_2025-02-21_at_11.55.42.png)</Frame> - -Importez et instanciez la classe d’écran Inscription MFA par SMS : - -```javascript lines -import MfaSmsEnrollment from '@auth0/auth0-acul-js/mfa-sms-enrollment'; -const mfaSmsEnrollment = new MfaSmsEnrollment(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaSmsEnrollment.screen.name; - -// SDK Methods return an object or array -await mfaSmsEnrollment.pickCountryCode(); -``` - -### Propriétés - -Propriétés de la classe d’écran Défi-réponse MFA par SMS : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {phone?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Propriétés de la classe d’écran Défi-réponse MFA par SMS : - -#### continueEnrollment( options ?) - -Cette méthode poursuit le processus d’inscription par SMS avec le numéro de téléphone fourni. - -```javascript lines -import MfaSmsEnrollment from '@auth0/auth0-acul-js/mfa-sms-enrollment'; - -const mfaSmsEnrollment = new MfaSmsEnrollment(); -await mfaSmsEnrollment.continueEnrollment({ phone: '1234567890' }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur de captcha.</td> -</tr> -<tr> -<td>`phone`</td> -<td>chaîne</td> -<td>Non</td> -<td>Le numéro de téléphone saisi par l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### pickCountryCode( options ?) - -Cette méthode gère l’action de sélection d’un code pays pour l’inscription par SMS. - -```javascript lines -import MfaSmsEnrollment from '@auth0/auth0-acul-js/mfa-sms-enrollment'; - -const mfaSmsEnrollment = new MfaSmsEnrollment(); -await mfaSmsEnrollment.pickCountryCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options ?) - -Cette méthode gère l’action qui consiste à essayer une autre méthode de MFA. - -```javascript lines -import MfaSmsEnrollment from '@auth0/auth0-acul-js/mfa-sms-enrollment'; - -const mfaSmsEnrollment = new MfaSmsEnrollment(); -await mfaSmsEnrollment.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Liste MFA par SMS - -La classe d’écran Liste MFA par SMS fournit des méthodes associées à l’écran mfa-sms-list. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5WKzkwCtJn5ZViHcl9xATn/6147dac2ff98da4ab190922ced35a1f2/Screenshot_2025-02-21_at_12.29.36.png)</Frame> - -Importez et instanciez la classe d’écran Liste MFA par SMS : - -```javascript lines -import MfaSmsList from '@auth0/auth0-acul-js/mfa-sms-list'; -const mfaSmsList = new MfaSmsList(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaSmsList.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -await mfaSmsList.backAction(); -``` - -### Propriétés - -Propriétés de la classe d’écran Liste MFA par SMS : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Propriétés de la classe d’écran Défi-réponse MFA par SMS : - -#### backAction( options ?) - -Cette méthode permet à l’utilisateur de revenir à l’écran précédent. - -```javascript lines -import MfaSmsList from '@auth0/auth0-acul-js/mfa-sms-list'; - -const mfaSmsList = new MfaSmsList(); -await mfaSmsList.backAction(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### selectPhoneNumber( options ?) - -Cette méthode permet à l’utilisateur de sélectionner un numéro de téléphone dans la liste des numéros de téléphone inscrits. - -```javascript lines -import MfaSmsList from '@auth0/auth0-acul-js/mfa-sms-list'; - -const mfaSmsList = new MfaSmsList(); -await mfaSmsList.selectPhoneNumber({ - index: 0 // for demonstration we are selecting the first index -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`index`</td> -<td>numéro</td> -<td>Oui</td> -<td>L’index du numéro de téléphone à sélectionner.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | numéro | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe d’écran Indicatifs de pays MFA - -La classe d’écran Indicatifs de pays MFA permet aux utilisateurs de sélectionner un indicatif de pays pour la vérification MFA par numéro de téléphone. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/7hp8LeL9cbS3nbxw8wTuqK/3c862b1c47ae18fb43f22f55ea4d695a/Screenshot_2025-02-19_at_13.23.44.png)</Frame> - -Importez et instanciez la classe d’écran Indicatifs de pays MFA - -```javascript lines -import MfaCountryCodes from '@auth0/auth0-acul-js/mfa-country-codes'; -const mfaCountryCodesManager = new MfaCountryCodes(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -mfaCountryCodesManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -await mfaCountryCodesManager.selectCountryCode({ - action: 'selection-action::US1' -}); -``` - -### Propriétés - -Propriétés de la classe d’écran Indicatifs de pays MFA : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { phone_prefixes: PhonePrefix[]; }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Propriétés de la classe d’écran Indicatifs de pays MFA : - -#### goBack( options ?) - -Cette méthode renvoie l’utilisateur à l’écran précédent. - -```javascript lines -import MfaCountryCodes from '@auth0/auth0-acul-js/mfa-country-codes'; - -const mfaCountryCodes = new MfaCountryCodes(); -await mfaCountryCodes.goBack(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### selectCountryCode( options ?) - -Cette méthode permet à l’utilisateur de sélectionner un indicatif de pays. - -```javascript lines -import MfaCountryCodes from '@auth0/auth0-acul-js/mfa-country-codes'; - -const mfaCountryCodes = new MfaCountryCodes(); - -// Get the available country codes and phone prefixes -const { screen } = mfaCountryCodes; -const { phone_prefixes } = screen.data -const {country_code, phone_prefix} = phone_prefixes[0] - -await mfaCountryCodes.selectCountryCode({ - country_code: 'US', - phone_prefix: '+1', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`country_code`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Indicatif pays à sélectionner.</td> -</tr> -<tr> -<td>`phone_prefix`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Préfixe téléphonique à sélectionner.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-voice.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-voice.mdx deleted file mode 100644 index fe91de5a7..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-voice.mdx +++ /dev/null @@ -1,607 +0,0 @@ ---- -title: "Multi-Factor Authentication Voice screen classes" -permalink: "mfa-voice" -'description': "Learn about the ACUL Multi-Factor Authentication Voice screen classes" -'og:title': "Multi-Factor Authentication Voice screen classes" -'og:description': "Learn about the ACUL Multi-Factor Authentication Voice screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Multi-Factor Authentication Voice screen classes" -'twitter:description': "Learn about the ACUL Multi-Factor Authentication Voice screen classes" ---- - -## MFA Voice Challenge screen class - -The <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> Voice Challenge screen class provides methods associated with the mfa-voice-challenge screen. This screen is displayed when the user needs to enter a recovery code to verify their identity. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5L3KKdJ5negUbZJueVaMi8/ee711dc884da655088a63bb116f277f9/Screenshot_2025-04-23_at_18.17.24.png)</Frame> - -Import and instantiate the MFA Voice Challenge screen class: - -```js lines -import MfaVoiceChallenge from '@auth0/auth0-acul-js/mfa-voice-challenge'; -const mfaVoiceChallenge = new MfaVoiceChallenge(); -``` - -### Properties - -The MFA Voice Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - phoneNumber?: string; - rememberDevice?: boolean; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Voice Challenge screen class methods are: - -#### continue( options? ) - -This method continues the voice challenge flow. - -```js lines -import MfaVoiceChallenge from '@auth0/auth0-acul-js/mfa-voice-challenge'; -const mfaVoiceChallenge = new MfaVoiceChallenge(); - -// Submit the verification code the user received via voice call -mfaVoiceChallenge.continue({ - code: '123456', - rememberBrowser: true // Optional: to remember this device for 30 days -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`code`</td> -<td>string</td> -<td>Yes</td> -<td>The code entered by the user.</td> -</tr> -<tr> -<td>`rememberBrowser`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the user's browser configuration.</td> -</tr> -</tbody> -</table> - -#### pickPhone( options ?) - -This method redirects the user to a phone selection screen. - -```javascript lines -const mfaVoiceChallenge = new MfaVoiceChallenge(); - -// Navigate to the screen for selecting a different phone number -mfaVoiceChallenge.pickPhone(); -``` - -#### resendCode( options ?) - -This method requests a new voice call with a verification code. - -```javascript lines -const mfaVoiceChallenge = new MfaVoiceChallenge(); - -// Request a new voice call with verification code -mfaVoiceChallenge.resendCode(); -``` - -#### switchToSms( options? ) - -This method switches the user from voice confirmation to SMS confirmation. - -```javascript lines -const mfaVoiceChallenge = new MfaVoiceChallenge(); - -// Switch to SMS verification instead of voice call -mfaVoiceChallenge.switchToSms(); -``` - -#### tryAnotherMethod( options ?) - -This method allows the user to request an alternative MFA method. - -```javascript lines -const mfaVoiceChallenge = new MfaVoiceChallenge(); - -// Navigate to the screen for selecting an alternative MFA method -mfaVoiceChallenge.tryAnotherMethod(); -``` - -## MFA Voice Enrollment screen class - -The MFA Voice Enrollment screen class provides methods associated with the mfa-voice-enrollment screen. This screen is displayed for a user needs to enter a phone number to receive a voice call with a code to continue enrollment. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/10B062fqHG48WmJSPSHMmY/177fd3fb4fef03dccb75f8c6bab626bc/Screenshot_2025-04-23_at_18.39.35.png)</Frame> - -Import and instantiate the MFA Voice Enrollment screen class: - -```js lines -import MfaVoiceEnrollment from '@auth0/auth0-acul-js/mfa-voice-enrollment'; -const mfaVoiceEnrollment = new MfaVoiceEnrollment(); -``` - -### Properties - -The MFA Voice Enrollment screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Voice Enrollment screen class methods are: - -#### continue( options ?) - -This method continues the enrollment process. - -```js lines -import MfaVoiceEnrollment from '@auth0/auth0-acul-js/mfa-voice-enrollment'; -const mfaVoiceEnrollment = new MfaVoiceEnrollment(); - -// Call the continue method with a phone number -mfaVoiceEnrollment.continue({ - phone: "1234567890" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`phone`</td> -<td>string</td> -<td>No</td> -<td>The phone number entered by the user.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> - -#### selectPhoneCountryCode( options ?) - -This method allows users to pick their country code. - -```js lines -import MfaVoiceEnrollment from '@auth0/auth0-acul-js/mfa-voice-enrollment'; -const mfaVoiceEnrollment = new MfaVoiceEnrollment(); - -// Call the pickCountryCode method -mfaVoiceEnrollment.selectPhoneCountryCode(); -``` - -#### tryAnotherMethod( options ?) - -This method asks users to try SMS if they already tried voice, or vice versa. - -```js lines -import MfaVoiceEnrollment from '@auth0/auth0-acul-js/mfa-voice-enrollment'; -const mfaVoiceEnrollment = new MfaVoiceEnrollment(); - -// Call the tryAnotherMethod -mfaVoiceEnrollment.tryAnotherMethod(); -``` - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-webauthn.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-webauthn.mdx deleted file mode 100644 index 283f2820c..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/mfa/mfa-webauthn.mdx +++ /dev/null @@ -1,2521 +0,0 @@ ---- -title: "Multi-Factor Authentication Webauthn screen classes" -permalink: "mfa-webauthn" -'description': "Learn about ACUL Multi-Factor Authentication Webauthn screen classes" -'og:title': "Multi-Factor Authentication Webauthn screen classes" -'og:description': "Learn about ACUL Multi-Factor Authentication Webauthn screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Multi-Factor Authentication Webauthn screen classes" -'twitter:description': "Learn about ACUL Multi-Factor Authentication Webauthn screen classes" ---- - -## MFA Webauthn Change Key Nickname screen class - -The <Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" tip="Authentification multifacteur (MFA) -Processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip> Webauthn Change Key Nickname screen class provides methods associated with the mfa-webauthn-change-key-nickname screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1qsKiEY1kiRSIYqhORr4nQ/ef11f60e9262e0a794dc34964a91bdee/Screenshot_2025-05-22_at_12.22.51.png)</Frame> - -Import and instantiate the MFA Webauthn Change Key Nickname screen class: - -```javascript lines -import MfaWebAuthnChangeKeyNickname from "@auth0/auth0-acul-js/mfa-webauthn-change-key-nickname"; -const mfaWebAuthnChangeKeyNicknameManager = new MfaWebAuthnChangeKeyNickname(); -``` - -### Properties - -The MFA Webauthn Change Key Nickname screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { nickname: string }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Change Key Nickname screen class methods is: - -#### continueWithNewNickname( options? ) - -This method submits the new nickname provided by the user for their WebAuthn security key. - -```javascript lines -const mfaWebAuthnChangeKeyNickname = new MfaWebAuthnChangeKeyNickname(); -mfaWebAuthnChangeKeyNickname.continueWithNewNickname({ - nickname: 'string' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`nickname`</td> -<td>string</td> -<td>Yes</td> -<td>The nickame entered by the user.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Enrollment Success screen class - -The MFA Webauthn Enrollment Success screen class provides methods associated with the mfa-webauthn-enrollment-success screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/Mq86ebcuUuTYSqaRdFJlb/73788cad3f355c41ceb7a4a9e658bddb/Screenshot_2025-05-27_at_19.58.21.png)</Frame> - -Import and instantiate the MFA Webauthn Enrollment Success screen class: - -```javascript lines -import MfaWebAuthnEnrollmentSuccess from "@auth0/auth0-acul-js/mfa-webauthn-enrollment-success"; -const mfaWebAuthnEnrollmentSuccessManager = new MfaWebAuthnEnrollmentSuccess(); -``` - -### Properties - -The MFA Webauthn Enrollment Success screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { nickname: string; webauthnType: WebAuthnType }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface WebAuthnType { - webauthn-roaming: string; - webauthn-platform: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Enrollment Success screen class methods is: - -#### continue( options? ) - -This method allows the user to continue the authentication flow after a successful WebAuthn enrollment. - -```javascript lines -// Assuming 'mfaWebAuthnEnrollmentSuccessManager' is an instance of MfaWebAuthnEnrollmentSuccess -async function handleContinueClick() { - try { - await mfaWebAuthnEnrollmentSuccessManager.continue(); - // User will be redirected by Auth0. - } catch (error) { - console.error("Error continuing after WebAuthn enrollment success:", error); - // Display error message to the user, potentially from mfaWebAuthnEnrollmentSuccessManager.transaction.errors - } -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Error screen class - -The MFA Webauthn Error screen class provides methods associated with the mfa-webauthn-error screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/4YEVrKX7HVo2LYWyZGxajt/865744113a4dbf5beff6bbce6587d8dc/Screenshot_2025-05-27_at_20.15.31.png)</Frame> - -Import and instantiate the MFA Webauthn Error screen class: - -```javascript lines -import MfaWebAuthnError from "@auth0/auth0-acul-js/mfa-webauthn-error"; -const mfaWebAuthnErrorManager = new MfaWebAuthnError(); -``` - -### Properties - -The MFA Webauthn Error screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { errorType: string; webauthnType: WebAuthnType }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface WebAuthnType { - webauthn-roaming: string; - webauthn-platform: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Error screen class methods are: - -#### noThanks( options? ) - -This method allows the user to decline the current WebAuthn operation (e.g., refuse to add a device during enrollment). - -```javascript lines -const mfaWebAuthnErrorManager = new MfaWebAuthnError(); -await mfaWebAuthnErrorManager.noThanks(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAgain( options? ) - -This method allows the user to retry the previous WebAuthn operation. - -```javascript lines -const mfaWebAuthnErrorManager = new MfaWebAuthnError(); -await mfaWebAuthnErrorManager.tryagain(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options? ) - -This method allows the user to choose a different Multi-Factor Authentication method. - -```javascript lines -const mfaWebAuthnErrorManager = new MfaWebAuthnError(); -await mfaWebAuthnErrorManager.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### usePassword( options? ) - -This method allows the user to attempt authentication using their password, if this alternative is configured and appropriate for the current flow (e.g., if password was a prior authentication step or is a valid MFA bypass). - -```javascript lines -const mfaWebAuthnErrorManager = new MfaWebAuthnError(); -await mfaWebAuthnErrorManager.usePassword(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Not Available Error screen class - -The MFA Webauthn Not Available Error screen class provides methods associated with the mfa-webauthn-platform-not-available-error screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/3TbCxY8cZNbhwmuZJ2ekCY/36dac0216ce83db1f93ab2423c9e0843/mfa-webauthn-not-available-error.png)</Frame> - -Import and instantiate the MFA Webauthn Not Available Error screen class: - -```javascript lines -import MfaWebAuthnNotAvailableError from "@auth0/auth0-acul-js/mfa-webauthn-not-available-error"; -const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError(); -``` - -### Properties - -The MFA Webauthn Not Available Error screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Platform Challenge screen class methods are: - -#### getError( options? ) - -This method retrieves the array of transaction errors from context or an empty array if none exist. - -```javascript lines -const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError(); -await mfaWebAuthnNotAvailableErrorManager.getError(); -``` - -#### tryAnotherMethod( options? ) - -This method allows the user to try another MFA method. This corresponds to the "Try Another Method" button. - -```javascript lines -const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError(); - -try { - await mfaWebAuthnNotAvailableErrorManager.tryAnotherMethod(); - // On success, Auth0 typically handles redirection to the MFA factor selection screen. -} catch (error) { - console.error('Failed to initiate "try another method":', error); - // Update UI to inform the user about the failure to switch methods. -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Platform Challenge screen class - -The MFA Webauthn Platform Challenge screen class provides methods associated with the mfa-webauthn-platform-challenge screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/1DFJ4Od7ukDasV7uAPH53P/f4018367fbf636f488cf94b6c6c62fda/Screenshot_2025-05-27_at_20.34.24.png)</Frame> - -Import and instantiate the MFA Webauthn Platform Challenge screen class: - -```javascript lines -import MfaWebAuthnPlatformChallenge from "@auth0/auth0-acul-js/mfa-webauthn-platform-challenge"; -const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge(); -``` - -### Properties - -The MFA Webauthn Platform Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: null | { challenge: string }; - showRememberDevice: boolean; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Platform Challenge screen class methods are: - -#### reportBrowserError( options? ) - -This method reports a browser-side error encountered during the WebAuthn `navigator.credentials.get()` operation. It sends the error details to the server with a specific action format. - -```javascript lines -const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge(); -await mfaWebAuthnPlatformChallengeManager.reportBrowserError( { - error: 'message' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`error`</td> -<td>message: string | name: string</td> -<td>Yes</td> -<td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options? ) - -This method allows the user to opt-out of the WebAuthn platform challenge and select a different MFA method. - -```javascript lines -const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge(); -await mfaWebAuthnPlatformChallengeManager.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### verify( options? ) - -This method initiates the WebAuthn platform authenticator challenge. - -```javascript lines -const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge(); -await mfaWebAuthnPlatformChallengeManager.verify(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`rememberDevice`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Platform Enrollment screen class - -The MFA Webauthn Platform Enrollment screen class provides methods associated with the mfa-webauthn-platform-enrollment screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/6hWi1hV5cPw336LB0JHYvM/7833f62a4339322bc55744c0477c4787/Screenshot_2025-05-27_at_21.04.27.png)</Frame> - -Import and instantiate the MFA Webauthn Platform Enrollment screen class: - -```javascript lines -import MfaWebAuthnPlatformEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-platform-enrollment"; -const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment(); -``` - -### Properties - -The MFA Webauthn Platform Enrollment screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - | null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: - | null - | { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; - texts: null - | Record<string, string>; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Platform Enrollment screen class methods are: - -#### refuseEnrollmentOnThisDevice( options? ) - -This method allows the user to refuse WebAuthn platform enrollment on the current device. - -```javascript lines -const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment(); - mfaWebAuthnPlatformEnrollmentManager.refuseEnrollmentOnThisDevice(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### reportBrowserError( options? ) - -This method reports a browser-side error encountered during the WebAuthn `navigator.credentials.create()` operation. - -```javascript lines -const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment(); -await mfaWebAuthnPlatformEnrollmentManager.reportBrowserError( { - error: 'message' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`error`</td> -<td>message: string | name: string</td> -<td>Yes</td> -<td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -#### snoozeEnrollment( options? ) - -This method allows the user to choose to snooze the WebAuthn platform enrollment. - -```javascript lines -const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment(); - mfaWebAuthnPlatformEnrollmentManager.snoozeEnrollment(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### submitPasskeyCredential( options? ) - -This method initiates the WebAuthn platform credential creation process using the public key options available on `this.screen.publicKey` and submits the resulting credential to the server. This method internally calls `createPasskeyCredentials` (which wraps `navigator.credentials.create()`). - -```javascript lines -const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment(); - - try { - await mfaWebAuthnPlatformEnrollmentManager.submitPasskeyCredential(); // No need to pass publicKey explicitly - // On success, Auth0 handles redirection. -} catch (error) { - console.error('Passkey enrollment failed:', error); - if (error.name && error.message) { // Check if it looks like a WebAuthn error - await mfaWebAuthnPlatformEnrollmentManager.reportBrowserError({ error: { name: error.name, message: error.message } }); - } -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Roaming Challenge screen class - -The MFA Webauthn Roaming Challenge screen class provides methods associated with the mfa-webauthn-roaming-challenge screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/joy7T4RglZYOlWItGk5Xm/0a4b2477cba476281ce05f2605acfb12/Screenshot_2025-05-28_at_11.40.56.png)</Frame> - -Import and instantiate the MFA Webauthn Roaming Challenge screen class: - -```javascript lines -import MfaWebAuthnRoamingChallenge from "@auth0/auth0-acul-js/mfa-webauthn-roaming-challenge"; -const mfaWebAuthnRoamingChallengeManager = new MfaWebAuthnRoamingChallenge(); -``` - -### Properties - -The MFA Webauthn Roaming Challenge screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - | null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: null | { challenge: string; }; - showRememberDevice?: boolean; - texts: null | Record<string, string>; - webauthnType: null | string; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Roaming Challenge screen class methods are: - -#### reportWebauthn( options? ) - -This method reports a specific WebAuthn API error to Auth0. This method should be used if `navigator.credentials.get()` fails in a way that `verify()` does not automatically handle, or if the developer wants to explicitly report an error before trying another action. It submits the error details with `action: "showError::{errorDetails}"`. - -```javascript lines -try { - await mfaWebAuthnRoamingChallengeManager.reportWebAuthnError({ - error: { name: webAuthnError.name, message: webAuthnError.message } - }); -} catch (submitError) { - console.error("Failed to report WebAuthn error:", submitError); -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`error`</td> -<td>message: string | name: string</td> -<td>Yes</td> -<td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options? ) - -This method allows the user to opt-out of the WebAuthn challenge and select a different MFA method. - -```javascript lines -try { - await mfaWebAuthnRoamingChallengeManager.tryAnotherMethod(); - // On success, Auth0 handles redirection to MFA selection. -} catch (error) { - console.error("Failed to switch MFA method:", error); -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### verify( options? ) - -This method initiates the WebAuthn platform authenticator challenge by calling `navigator.credentials.get()` with the options provided in `screen.data.publicKeyChallengeOptions`. - -```javascript lines -try { - await mfaWebAuthnRoamingChallengeManager.verify({ rememberDevice: true }); - // On success, Auth0 handles redirection. -} catch (error) { - console.error("Security key verification failed:", error); - // Check mfaWebAuthnRoamingChallengeManager.transaction.errors for server-side validation messages if the page reloads. -} -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`rememberDevice`</td> -<td>boolean</td> -<td>No</td> -<td>Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -## MFA Webauthn Roaming Enrollment screen class - -The MFA Webauthn Roaming Enrollment screen class provides methods associated with the mfa-webauthn-roaming-enrollment screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/71Il3P3UP1Z2mpY9LdjHUQ/31e9f3e51bec04cdd0f4e78b744f6472/Screenshot_2025-05-28_at_12.19.06.png)</Frame> - -Import and instantiate the MFA Webauthn Roaming Enrollment screen class: - -```javascript lines -import MfaWebAuthnRoamingEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment"; -const mfaWebAuthnRoamingEnrollmentManager = new MfaWebAuthnRoamingEnrollment(); -``` - -### Properties - -The MFA Webauthn Roaming Enrollment screen class properties are: - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - | null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record<string, string[]> - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: - | null - | { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; - texts: null - | Record<string, string>; - webauthnType: null | string; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The MFA Webauthn Roaming Enrollment screen class methods are: - -#### enroll( options? ) - -This method initiates the WebAuthn credential creation and submits the result to the server. This corresponds to the user interacting with the FIDO Security Keys prompt. - -```javascript lines -import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment'; - -const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment(); -// Assuming you have obtained the WebAuthn credential response (e.g., from navigator.credentials.create) -const credentialResponse = { /* ... serialized credential ... */ }; -await webauthnEnrollment.enroll({ response: JSON.stringify(credentialResponse) }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### showError( options? ) - -This method submits details about a WebAuthn browser error to the server. This is used when the browser's WebAuthn API encounters an error. - -```javascript lines -import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment'; - -const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment(); -await webauthnEnrollment.showError({ - error: { - name: 'NotAllowedError', - message: 'The operation either timed out or was not allowed.', - }, -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong></th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`error`</td> -<td>message: string | name: string</td> -<td>Yes</td> -<td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Additional data collected from the user.</td> -</tr> -</tbody> -</table> - -#### tryAnotherMethod( options? ) - -This method allows the user to try another MFA method. This corresponds to the "Try Another Method" button. - -```javascript lines -import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment'; - -const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment(); -await webauthnEnrollment.tryAnotherMethod(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/organization.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/organization.mdx deleted file mode 100644 index c78634ec4..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/organization.mdx +++ /dev/null @@ -1,563 +0,0 @@ ---- -title: "Organization screen classes" -permalink: "organization" -'description': "Learn about the ACUL Organization screen classes" -'og:title': "Organization screen classes" -'og:description': "Learn about the ACUL Organization screen classes" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Organization screen classes" -'twitter:description': "Learn about the ACUL Organization screen classes" ---- - -## Organization Selection screen class - -The Organization Selection screen class provides methods associated with the organization-selection screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/3okogBPGS1KmSlhUSk9xhk/07bc19ad8b58772d3de872a49b8f6ca5/Screenshot_2025-03-25_at_20.27.41.png)</Frame> - -Import and instantiate the Organization Selection screen class: - -```js lines -import OrganizationSelection from '@auth0/auth0-acul-js/organization-selection'; -const organizationSelection = new OrganizationSelection(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -organizationSelection.screen.name; - -// SDK Methods return an object or array -await organizationSelection.continueWithOrganizationName({ - organizationName: 'testOrganizationName', -}); -``` - -### Properties - -The Organization Selection screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="screen"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | string[] - | PhonePrefix[] - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab></Tabs> - -### Methods - -The Organization Selection screen class method is: - -#### continueMfaSmsChallenge( options ?) - -This method continues with the selected organization name. - -```js lines -import OrganizationSelection from '@auth0/auth0-acul-js/organization-selection'; -const organizationSelection = new OrganizationSelection(); - -await organizationSelection.continueWithOrganizationName({ - organizationName: 'testOrganizationName', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`organizationName`</td> -<td>string</td> -<td>Yes</td> -<td>The organization name.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected from user.</td> -</tr> -</tbody> -</table> - -## Organization Picker screen class - -The Organization Picker screen class provides methods associated with the organization-picker screen. This screen allows users to select an organization from a list of available organizations. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/3aFR1VujjNlIauzRAuMapf/12e80cb2e3f131d2eb45aa0ca13f1d8c/Screenshot_2025-03-25_at_20.49.09.png)</Frame> - -Import and instantiate the Organization Picker screen class: - -```js lines -import OrganizationPicker from '@auth0/auth0-acul-js/organization-picker'; -const organizationPicker = new OrganizationPicker(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -organizationPicker.screen.name; - -// SDK Methods return an object or array -organizationPicker.selectOrganization({ - organization: 'org_XXXXXXXXXXXXXXX' -}); -``` - -### Properties - -The Organization Picker screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Organization Picker screen class method are: - -#### continueEnrollment( options ?) - -This method submits the selected organization ID. - -```js lines -import OrganizationPicker from '@auth0/auth0-acul-js/organization-picker'; -const organizationPicker = new OrganizationPicker(); - -organizationPicker.selectOrganization({ - organization: 'org_XXXXXXXXXXXXXXX' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`organization`</td> -<td>string</td> -<td>Yes</td> -<td>The organization ID.</td> -</tr> -<tr> -<td>`state`</td> -<td>string</td> -<td>No</td> -<td></td> -</tr> -</tbody> -</table> - -#### skipOrganizationSelection( options ?) - -This method submits the action to skip the organization selection. - -```js lines -import OrganizationPicker from '@auth0/auth0-acul-js/organization-picker'; -const organizationPicker = new OrganizationPicker(); - -organizationPicker.skipOrganizationSelection(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> - -#### \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/redeem-ticket.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/redeem-ticket.mdx deleted file mode 100644 index 4b9f6866b..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/redeem-ticket.mdx +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: "Redeem Ticket screen class" -permalink: "redeem-ticket" -'description': "Learn about the ACUL Redeem Ticket screen class" -'og:title': "Redeem Ticket screen class" -'og:description': "Learn about the ACUL Redeem Ticket screen class" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Redeem Ticket screen class" -'twitter:description': "Learn about the ACUL Redeem Ticket screen class" ---- - -## Redeem Ticket screen class - -The Redeem Ticket screen class provides methods associated with the redeem-ticket screen. - -<Frame>![](/docs/images/fr-ca/cdy7uua7fh8z/5BiASkwQRQfJe61xCMq2Sx/f24832f81cf056562cec20b09394d0f9/Screenshot_2025-04-24_at_09.30.28.png)</Frame> - -Import and instantiate the Redeem Ticket screen class: - -```js lines -import RedeemTicket from '@auth0/auth0-acul-js/redeem-ticket'; - -const redeemTicketManager = new RedeemTicket(); -``` - -### Properties - -The Redeem Ticket screen class properties are: - -<Tabs><Tab title="image de marque"> - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organisation"> - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```ts lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, - | string - | boolean - | PasskeyCreate - | string[] - | PhonePrefix[]> - | Record<string, string[]>>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` - -</Tab><Tab title="locataire"> - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -The Redeem Ticket screen class method is: - -#### continue( options ?) - -This method continues the flow. - -```js lines -import RedeemTicket from '@auth0/auth0-acul-js/redeem-ticket'; -const redeemTicket = new RedeemTicket(); - -// Continue with the default action -await redeemTicket.continue(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Parameter</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Required</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>string | number | boolean | undefined</td> -<td>No</td> -<td>Optional data collected to user.</td> -</tr> -</tbody> -</table> \ No newline at end of file diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes.mdx deleted file mode 100644 index 8294a1871..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/reset-password-screen-classes.mdx +++ /dev/null @@ -1,1235 +0,0 @@ ---- -title: "Classes d’écran de réinitialisation de mot de passe" -permalink: "reset-password-screen-classes" -'description': "En savoir plus sur les classes d’écran de réinitialisation de mot de passe ACUL" -'og:title': "Classes d’écran de réinitialisation de mot de passe" -'og:description': "En savoir plus sur les classes d’écran de réinitialisation de mot de passe ACUL" -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes d’écran de réinitialisation de mot de passe" -'twitter:description': "En savoir plus sur les classes d’écran de réinitialisation de mot de passe ACUL" ---- - -## Classe d’écran de réinitialisation de mot de passe - -La classe d’écran de réinitialisation de mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et réinitialise le mot de passe de l’utilisateur. - -<Frame>![ACUL Reset password](/docs/images/cdy7uua7fh8z/1sUs1I4uL5GHwAH4RacAEQ/8acef7b055c4ed31405d7125d4e181f6/Screenshot_2025-01-27_at_17.30.17.png)</Frame> - -Importer et instancier la classe d’écran de réinitialisation de mot de passe - -```javascript lines -import ResetPassword from '@auth0/auth0-acul-js/reset-password'; -const resetPasswordManager = new ResetPassword(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -resetPasswordManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -resetPasswordManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de réinitialisation de mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Les méthodes de la classe d’écran de réinitialisation de mot de passe sont : - -#### resetPassword( options? ) - -Cette méthode invite l’utilisateur à fournir un courriel pour recevoir des instructions afin de réinitialiser son mot de passe. - -```javascript lines -import ResetPassword from '@auth0/auth0-acul-js/reset-password'; - -const resetPassword = new ResetPassword(); -resetPassword.resetPassword({ - 'password-reset': 'Test@123!', - 're-enter-password': 'Test@123!', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`password`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`re-enter-password`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe d’écran de courriel de réinitialisation de mot de passe - -La classe d’écran de courriel de réinitialisation de mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et envoie à l’utilisateur des instructions par courriel pour réinitialiser son mot de passe. - -<Frame>![ACUL Reset_password_email](/docs/images/cdy7uua7fh8z/6uIv1ljdFyLLeToSfTcl5d/4fa2681220056964ed9179f45fd7c062/Screenshot_2025-01-27_at_18.01.26.png)</Frame> - - -Importer et instancier la classe d’écran de courriel de réinitialisation de mot de passe - -```javascript lines -import ResetPasswordEmail from '@auth0/auth0-acul-js/reset-password-email'; -const resetPasswordEmailManager = new ResetPasswordEmail(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -resetPasswordEmailManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -resetPasswordEmailManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de courriel de réinitialisation de mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Les méthodes de la classe d’écran de courriel de réinitialisation de mot de passe sont : - -#### resendEmail( options? ) - -Cette méthode renvoie un courriel contenant des instructions pour réinitialiser leur mot de passe. . - -```javascript lines -import ResetPasswordEmail from '@auth0/auth0-acul-js/reset-password-email'; - -const resetPasswordEmail = new ResetPasswordEmail(); -resetPasswordEmail.resendEmail(); -``` - -|**Paramètre**                  -| **Type** | **Requis** | **Description** | -| ---------- | ---------- | ---------- |---------- | -| `[key: string]` | chaîne | nombre | booléen | non défini | Non | Données facultatives collectées auprès de l’utilisateur. | - -## Classe d’écran d’erreur de réinitialisation de mot de passe - -La classe d’écran d’erreur de réinitialisation de mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et renvoie l’utilisateur à votre application. - -<Frame>![ACUL reset password error ](/docs/images/cdy7uua7fh8z/2Et6s21E7IYviNgbnk94Z0/34d0a3772b062b8b13af173d11e5d03b/Screenshot_2025-01-27_at_18.47.26.png)</Frame> - - -Importer et instancier la classe d’écran d’erreur de réinitialisation de mot de passe - -```javascript lines -import ResetPasswordError from '@auth0/auth0-acul-js/reset-password-error'; -const resetPasswordErrorManager = new ResetPasswordError(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -resetPasswordErrorManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -resetPasswordErrorManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran d’erreur de réinitialisation de mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -## Classe d’écran de demande de réinitialisation de mot de passe - -La classe d’écran de demande de réinitialisation de mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et invite l’utilisateur à fournir un courriel pour recevoir des instructions de réinitialisation de mot de passe. - -<Frame>![](/docs/images/cdy7uua7fh8z/3sY6D83USU8smQ4ozQuNzP/6e856749303830f72b764f539918b8ab/Screenshot_2025-03-27_at_14.44.14.png)</Frame> - - -Importer et instancier la classe d’écran de demande de réinitialisation de mot de passe - -```javascript lines -import ResetPasswordRequest from '@auth0/auth0-acul-js/reset-password-request'; -const resetPasswordRequestManager = new ResetPasswordRequest(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -resetPasswordRequestManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -resetPasswordRequestManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de demande de réinitialisation de mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email?: string; - username?: string; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Méthodes - -Les méthodes de la classe d’écran de demande de réinitialisation de mot de passe sont : - -#### backToLogin( options? ) - -Cette méthode ramène l’utilisateur à votre application pour se connecter. - -```javascript lines -import ResetPasswordRequest from '@auth0/auth0-acul-js/reset-password-request'; - -const resetPasswordRequest = new ResetPasswordRequest(); -resetPasswordRequest.backToLogin(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### resetPassword( options? ) - -Cette méthode invite l’utilisateur à entrer son courriel ou son nom d’utilisateur pour recevoir des instructions de réinitialisation de mot de passe. - -```javascript lines -import ResetPasswordRequest from '@auth0/auth0-acul-js/reset-password-request'; - -const resetPasswordRequest = new ResetPasswordRequest(); -resetPasswordRequest.resetPassword({ username: 'testuser' }); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnelle</td> -<td>Le code captcha ou la réponse du fournisseur de captcha. Cette propriété est requise si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`email`</td> -<td>chaîne</td> -<td>Conditionnelle</td> -<td>L’adresse courriel de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | numéro | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe d’écran de succès de réinitialisation de mot de passe - -La classe d’écran de succès de réinitialisation de mot de passe fait partie du flux d’[authentification Identifier First](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first), confirme la modification du mot de passe et renvoie l’utilisateur à votre application. - -<Frame>![ACUL Request password success](/docs/images/cdy7uua7fh8z/5eQfQYCZSu4ZaYaYz3ln8j/d6fdc02e205c14388aa13f868fa747a3/Screenshot_2025-01-28_at_10.16.09.png)</Frame> - - -Importer et instancier la classe d’écran de succès de réinitialisation de mot de passe - -```javascript lines -import ResetPasswordSuccess from '@auth0/auth0-acul-js/reset-password-success'; -const resetPasswordSuccessManager = new ResetPasswordSuccess(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -resetPasswordSuccessManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -resetPasswordSuccessManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe d’écran de succès de réinitialisation de mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - diff --git a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes.mdx b/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes.mdx deleted file mode 100644 index 9f864606b..000000000 --- a/main/docs/fr-ca/customize/login-pages/advanced-customizations/reference/signup-screen-classes.mdx +++ /dev/null @@ -1,2519 +0,0 @@ ---- -title: "Classes de l’écran d’inscription" -permalink: "signup-screen-classes" -'description': "En savoir plus sur les classes de l’écran d’inscription ACUL." -'og:title': "Classes de l’écran d’inscription" -'og:description': "En savoir plus sur les classes de l’écran d’inscription ACUL." -'og:image': "https://cdn2.auth0.com/docs/1.14567.0/img/share-image.png" -'twitter:title': "Classes de l’écran d’inscription" -'twitter:description': "En savoir plus sur les classes de l’écran d’inscription ACUL." ---- - -## Classe de l’écran d’inscription - -La classe de l’écran d’inscription fait partie du flux [Identifier First Authentication (authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et recueille le mot de passe de l’identifiant de l’utilisateur. Selon la configuration de votre locataire, cet identifiant peut être une adresse courriel, un numéro de téléphone ou un nom d’utilisateur. - -| | -| --- | -| ID d’inscription | - -Importer et instancier la classe de l’écran d’inscription - -```javascript lines -import Signup from '@auth0/auth0-acul-js/signup'; -const signupManager = new Signup(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -signupManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -signupManager.screenLinks(); -``` - -### Propriétés - -Les propriétés de la classe de l’écran d’inscription sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - loginLink?: string; - name?: string; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface TransactionMembersOnSignup { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isPasskeyEnabled: boolean; - locale: string; - optionalIdentifiers: null | ("email" | "username" | "phone")[]; - requiredIdentifiers: null | ("email" | "username" | "phone")[]; - state: string; - usernamePolicy: null | UsernamePolicy; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} - -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="user"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran d’inscription sont : - -#### pickCountryCode( options? ) - -Cette méthode redirige l’utilisateur vers la liste de sélection du code pays, où il peut mettre à jour le préfixe du code pays pour son numéro de téléphone. - -```javascript lines -import Signup from "@auth0/auth0-acul-js/signup"; -const signupManager = new Signup(); - -signupManager.pickCountryCode(); -``` - -#### signup( options? ) - -Cette méthode redirige l’utilisateur vers l’étape suivante du flux d’authentification. Selon la configuration du serveur, cet écran peut inclure des entrées pour un ou plusieurs des éléments suivants : courriel, nom d’utilisateur ou numéro de téléphone. Pour plus de détails, veuillez consulter [Identifiants flexibles](https://auth0.com/docs/authenticate/database-connections/flexible-identifiers-and-attributes). - -```javascript lines -import Signup from '@auth0/auth0-acul-js/signup'; - -const signupManager = new Signup(); - -signupManager.signup({ - email: 'test@example.com', - password: 'P@$$wOrd123!', -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`email`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Adresse courriel de l’utilisateur.</td> -</tr> -<tr> -<td>`phone`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Numéro de téléphone de l’utilisateur.</td> -</tr> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Nom d’utilisateur de l’utilisateur.</td> -</tr> -<tr> -<td>`password`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Code Captcha ou réponse du fournisseur de Captcha. Cette propriété est requise si votre locataire Auth0 a activé la détection des robots.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>Chaîne | Numéro | Booléen | Non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur. Ces données sont accessibles dans le déclencheur d’action `pre-user-registration`.</td> -</tr> -</tbody> -</table> - -#### socialSignup( options? ) - -Cette méthode redirige l’utilisateur vers le fournisseur d’identité sociale ou d’entreprise (<Tooltip href="/docs/fr-ca/glossary?term=idp" tip="Fournisseur d’identité (IdP) -Service de stockage et de gestion des identités numériques." cta="Voir le glossaire">IdP</Tooltip>) pour l’authentification. Pour plus de détails, veuillez consulter [Social Identity Providers (Fournisseurs d’identité sociale)](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers) et [Enterprise Identity Providers (Fournisseurs d’identité de l’entreprise)](https://auth0.com/docs/authenticate/identity-providers/enterprise-identity-providers). - -```javascript lines -import Signup from '@auth0/auth0-acul-js/signup'; - -const signupManager = new Signup(); - -signupManager.federatedSignup({ - connection: 'google-oauth2' -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`connection`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Identifiant de la connexion.</td> -</tr> -<tr> -<td>`[clé: chaîne]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe de l’identifiant de l’écran d’inscription - -La classe de l’identifiant de l’écran d’inscription fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et recueille le mot de passe de l’identifiant de l’utilisateur. Selon la configuration de votre locataire, cet identifiant peut être une adresse courriel, un numéro de téléphone ou un nom d’utilisateur. - -| | -| --- | -| ID d’inscription | - -Importer et instancier la classe de l’identifiant de l’écran d’inscription - -```javascript lines -import SignupId from '@auth0/auth0-acul-js/signup-id'; -const signupIdManager = new SignupId(); - -// SDK Properties return a string, number or boolean -// ex. "signup-id" -signupIdManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url"} -signupIdManager.screenLinks(); -``` - -### Properties - -Les propriétés de la classe de l’identifiant de l’écran d’inscription sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, string>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - loginLink: null | string; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isPasskeyEnabled: boolean; - locale: string; - optionalIdentifiers: null | ("email" | "username" | "phone")[]; - requiredIdentifiers: null | ("email" | "username" | "phone")[]; - state: string; - usernamePolicy: null | UsernamePolicy; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} - -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} -``` - -</Tab><Tab title="unstrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’identifiant de l’écran d’inscription sont : - -#### signup( options? ) - -Cette méthode redirige l’utilisateur vers l’étape suivante du flux d’authentification. Selon la configuration du serveur, cet écran peut inclure des entrées pour un ou plusieurs des éléments suivants : courriel, nom d’utilisateur ou numéro de téléphone. Pour plus de détails, veuillez consulter [Identifiants flexibles](https://auth0.com/docs/authenticate/database-connections/flexible-identifiers-and-attributes). - -```javascript lines -import SignupId from "@auth0/auth0-acul-js/signup-id"; - -const signupIdManager = new SignupId(); -const { transaction } = signupIdManager; - -//get mandatory & optional identifiers required for signup -const mandatoryIdentifier = transaction.getRequiredIdentifiers(); // eg: email -const optionalIdentifiers = transaction.getOptionalIdentifiers() // eg: phone - -const signupParams = { - email : "testEmail", - phone : "+91923456789" -}; - -signupIdManager.signup(signupParams); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`email`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le courriel de l’utilisateur.</td> -</tr> -<tr> -<td>`phone`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le numéro de téléphone de l’utilisateur.</td> -</tr> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le nom d’utilisateur de l’utilisateur.</td> -</tr> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur captcha. Cette propriété est obligatoire si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires recueillies auprès de l’utilisateur. Les données sont accessibles dans le déclencheur d’action `pre-user-registration`.</td> -</tr> -</tbody> -</table> - -#### socialSignup( options? ) - -Cette méthode redirige l’utilisateur vers le fournisseur d’identité sociale ou d’entreprise (IdP) pour l’authentification. Pour plus de détails, veuillez consulter [Social Identity Providers (Fournisseurs d’identité sociale)](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers) et [Enterprise Identity Providers (Fournisseurs d’identité de l’entreprise)](https://auth0.com/docs/authenticate/identity-providers/enterprise-identity-providers). - -```javascript lines -import SignupId from "@auth0/auth0-acul-js/signup-id"; - -const signupIdManager = new SignupId(); -const { transaction } = signupIdManager; - -//get social connections -const socialConnection = transaction.getAlternateConnections(); //eg: "google-oauth2" - -const signupParams = { - connection : socialConnection[0].name, // "google-oauth2" -}; - -signupIdManager.federatedSignup(signupParams); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`connection`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Identifiant de la connexion.</td> -</tr> -<tr> -<td>`[clé: chaîne]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Écran d’inscription avec mot de passe - -L’écran d’inscription par mot de passe fait partie du flux [Identifier First Authentication (Authentification Identifier First)](https://auth0.com/docs/authenticate/login/auth0-universal-login/identifier-first) et permet à l’utilisateur de créer un mot de passe pour son profil. - -| | -| --- | -| Mot de passe d’inscription | - -Importer et instancier la classe de l’identifiant de l’écran d’inscription - -```javascript lines -import SignupPassword from '@auth0/auth0-acul-js/signup-password'; -const signupPasswordManager = new SignupPassword(); - -// SDK Properties return a string, number or boolean -// ex. "signup-password" -signupPasswordManager.screen.name; - -// SDK Methods return an object or array -// ex. { login: "/login_url", edit_identifier: "/edit_url"} -signupPasswordManager.screenLinks(); -``` - -### Properties - -Les propriétés de la classe de l’écran inscription par mot de passe sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email?: string; - phone?: string; - username?: string; - }; - editLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - loginLink: null | string; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="Transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isPasskeyEnabled: boolean; - locale: string; - optionalIdentifiers: null | ("email" | "username" | "phone")[]; - passwordPolicy: null | PasswordPolicy; - requiredIdentifiers: null | ("email" | "username" | "phone")[]; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} - -interface PasswordPolicy { - minLength?: number; - policy: - | "low" - | "fair" - | "good" - | "excellent"; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -La méthode de classe de l’écran inscription par mot de passe est : - -#### signup( options? ) - -Cette méthode soumet l’identifiant de l’étape précédente et le mot de passe fourni pour créer le compte de l’utilisateur. Une fois créé, l’utilisateur est dirigé vers l’étape suivante. - -```javascript lines -signupPasswordManager.signup({ - email: <EmailFieldValue> - phone: <PhoneFieldValue> - username: <UsernameFieldValue> - password: ******** -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Obligatoire</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code captcha ou la réponse du fournisseur captcha. Cette propriété est obligatoire si votre locataire Auth0 a activé la détection de robots.</td> -</tr> -<tr> -<td>`email`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le courriel de l’utilisateur.</td> -</tr> -<tr> -<td>`password`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le mot de passe de l’utilisateur.</td> -</tr> -<tr> -<td>`phone`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le numéro de téléphone de l’utilisateur.</td> -</tr> -<tr> -<td>`username`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le nom d’utilisateur de l’utilisateur.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données supplémentaires recueillies auprès de l’utilisateur. Les données sont accessibles dans le déclencheur d’action `pre-user-registration`.</td> -</tr> -</tbody> -</table> - -## Classe de l’écran d’inscription par clé d’identification. - -La classe de l’écran d’inscription par clé d’identification fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first). Il permet à l’utilisateur de créer une clé d’identification à utiliser comme identifiant d’authentification pour toutes les authentifications ultérieures sur votre application. Veuillez consulter [Passkeys (Clés d’identification)](/docs/fr-ca/authenticate/database-connections/passkeys) pour en savoir plus sur l’utilisation des clés d’identification dans Auth0. - -| | -| --- | -| Inscription par clé d’identification | - -Importer et instancier la classe de l’écran d’inscription par clé d’identification - -```javascript lines -import PasskeyEnrollment from '@auth0/auth0-acul-js/passkey-enrollment'; -const passskeyEnrollmentManager = new PasskeyEnrollment(); - -// SDK Properties return a string, number or boolean -// ex. "passkey-enrollment" -passskeyEnrollmentManager.screen.name; - -// SDK Methods return an object or array -// ex. { back: "/back_url" } -passskeyEnrollmentManager.screenLinks(); -``` - -### Properties - -Les propriétés de la classe de l’écran d’inscription par clé d’identification sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - backLink: null | string; - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, string>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - loginLink: null | string; - name: string; - publicKey: null | { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ - alg: number; - type: string; - }]; - rp: { - id: string; - name: string; - }; - user: { - displayName: string; - id: string; - name: string; - }; - }; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran d’inscription par clé d’identification sont : - -#### abortPasskeyEnrollment( options? ) - -Cette méthode envoie l’utilisateur vers l’écran d’inscription par mot de passe pour créer son mot de passe. - -```javascript lines -// This method does not support any parameters -passkeyEnrollment.abortPasskeyEnrollment(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### continuePasskeyEnrollment( options? ) - -Créez une clé d’identification et authentifiez l’utilisateur. Après avoir créé la clé d’identification, cette méthode envoie l’utilisateur à `redirect_url`. - -```javascript lines -// This method does not support any parameters -passkeyEnrollment.continuePasskeyEnrollment(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe de l’écran local d’inscription par clé d’identification - -La classe de l’écran local d’inscription par clé d’identification fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first). Il permet à l’utilisateur de créer une clé d’identification à utiliser comme identifiant d’authentification pour toutes les authentifications ultérieures sur votre application. Veuillez consulter [Passkeys (Clés d’identification)](/docs/fr-ca/authenticate/database-connections/passkeys) pour en savoir plus sur l’utilisation des clés d’identification dans Auth0 - -| | -| --- | -| Inscription locale par clé d’identification | - -Importer et instancier la classe de l’écran local d’inscription par clé d’identification - -```javascript lines -import PasskeyEnrollmentLocal from '@auth0/auth0-acul-js/passkey-enrollment-local'; -const passskeyEnrollmentLocalManager = new PasskeyEnrollmentLocal(); - -// SDK Properties return a string, number or boolean -// ex. "passkey-enrollment-local" -passskeyEnrollmentLocalManager.screen.name; - -// SDK Methods return an object or array -// ex. { back: "/back_url" } -passskeyEnrollmentLocalManager.screenLinks(); -``` - -### Properties - -Les propriétés de la classe de l’écran local d’inscription par clé d’identification sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record<string, string>; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - publicKey: null | { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ - alg: number; - type: string; - }]; - rp: { - id: string; - name: string; - }; - user: { - displayName: string; - id: string; - name: string; - }; - }; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran local d’inscription par clé d’identification sont : - -#### abortPasskeyEnrollment( options ) - -Ignorez la création de la clé d’identification et fournissez plutôt un mot de passe. Cette méthode envoie l’utilisateur vers Signup Password Screen (Écran d’inscription par mot de passe) pour créer son mot de passe. - -```javascript lines -passkeyEnrollment.abortPasskeyEnrollment({ - doNotShowAgain: <BooleanFieldValue> -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`doNotShowAgain`</td> -<td>booléen</td> -<td>Oui</td> -<td>Indique si l’utilisateur souhaite ou non qu’on lui rappelle de créer à nouveau une clé d’identification après avoir ignoré la création initiale.</td> -</tr> -</tbody> -</table> - -#### continuePasskeyEnrollment( options? ) - -Créez une clé d’identification et authentifiez l’utilisateur. Après avoir créé la clé d’identification, cette opération envoie l’utilisateur à la `redirect_url`. - -```javascript lines -// This method does not support any parameters -passkeyEnrollment.continuePasskeyEnrollment(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe de l’écran de défi d'identifiant du téléphone - -La classe de l’écran de vérification du numéro de téléphone fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et vérifie le numéro de téléphone de l’utilisateur avant de lui permettre de s’inscrire. Pour plus de détails, veuillez consulter A[ctiver et configurer les attributs pour les identifiants flexibles](/docs/fr-ca/authenticate/database-connections/activate-and-configure-attributes-for-flexible-identifiers). - -| | -| --- | -| phoneidentifierchallenge | - -Importer et instancier la classe de l’écran de défi d'identifiant du téléphone - -```javascript lines -import PhoneIdentifierChallenge from '@auth0/auth0-acul-js/phone-identifier-challenge'; -const phoneIdentifierChallengeManager = new PhoneIdentifierChallenge(); - -// SDK Properties return a string, number or boolean -// ex. "phone-identifier-challenge" -phoneIdentifierChallengeManager.screen.name; - -// SDK Methods return an object or array -// ex. data: { message_type: "text", phone: "+1234567890" }; -phoneIdentifierChallengeManager.screenData(); -``` - -### Properties - -Les propriétés de la classe de l’écran de défi d'identifiant du téléphone sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - messageType?: "text" | "voice"; - phone?: string; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran de défi d'identifiant du téléphone sont : - -#### resendCode( options? ) - -Cette méthode envoie un nouveau code OTP à l’adresse courriel fournie à l’étape précédente. - -```javascript lines -// This method does not support any parameters -phoneIdentifierChallenge.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### returnToPrevious( options? ) - -Cette méthode renvoie l’utilisateur à l’étape précédente. - -```javascript lines -// This method does not support any parameters -phoneIdentifierChallenge.returnToPrevious(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### submitPhoneChallenge( options ) - -Cette méthode vérifie le numéro de téléphone fourni et permet à l’utilisateur de continuer à s’inscrire. - -```javascript lines -phoneIdentifierChallenge.submitPhoneChallenge({ - code: "<CodeFieldValue>" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code CAPTCHA ou la réponse du fournisseur de CAPTCHA. Cette propriété est requise si la détection de robots est activée dans votre tenant Auth0.</td> -</tr> -<tr> -<td>`code`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le code OTP envoyé au numéro de téléphone.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | indéfini</td> -<td>Non</td> -<td>Données facultatives recueillies de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe de l’écran d’inscription à l'identifiant du téléphone - -La classe de l’écran d’inscription à la vérification du numéro de téléphone fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et permet à l’utilisateur de sélectionner une méthode pour vérifier son numéro de téléphone avant de poursuivre le processus d’inscription. Pour plus de détails, veuillez consulter A[ctiver et configurer les attributs pour les identifiants flexibles](/docs/fr-ca/authenticate/database-connections/activate-and-configure-attributes-for-flexible-identifiers). - -| | -| --- | -| Inscription de l’identifiant téléphonique | - -Importer et instancier de l’écran d’inscription à l'identifiant du téléphone - -```javascript lines -import PhoneIdentifierEnrollment from '@auth0/auth0-acul-js/phone-identifier-enrollment'; -const phoneIdentifierEnrollmentManager = new PhoneIdentifierEnrollment(); - -// SDK Properties return a string, number or boolean -// ex. "phone-identifier-enrollment" -phoneIdentifierEnrollmentManager.screen.name; - -// SDK Methods return an object or array -// ex. { phone_number: "+1234567890" } -phoneIdentifierEnrollmentManager.screenData(); -``` - -### Properties - -Les propriétés de la classe de l’écran d’inscription à l'identifiant du téléphone sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - messageType?: "text" | "voice"; - phone?: "string"; - }; - editIdentifierLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran d’inscription à l'identifiant du téléphone sont : - -#### continuePhoneEnrollment( options ) - -Envoyez un code de mot de passe à usage unique via la méthode choisie par l’utilisateur au numéro de téléphone fourni à l’étape précédente. - -```javascript lines -phoneIdentifierChallenge.continuePhoneEnrollment({ - type: "text" | "voice" -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`type`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Valeurs possibles : `text` or `voice`</td> -</tr> -<tr> -<td>`[clé: chaîne]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données optionnelles collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### returnToPrevious( options? ) - -Cette méthode renvoie l’utilisateur à l’étape précédente. - -```javascript lines -// This method does not support any parameters -phoneIdentifierChallenge.returnToPrevious(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -## Classe de l’écran de défi de l’identifiant de l’adresse courriel - -La classe de l’écran de vérification de l’adresse courriel fait partie du flux [Identifier First Authentication (Authentification Identifier First)](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) et vérifie l’adresse courriel de l’utilisateur avant de lui permettre de s’inscrire. Pour plus de détails, veuillez consulter A[ctiver et configurer les attributs pour les identifiants flexibles](/docs/fr-ca/authenticate/database-connections/activate-and-configure-attributes-for-flexible-identifiers). - -| | -| --- | -| Défi d’identifiant de courriel | - -Importer et instancier la classe de l’écran de l'identifiant de l’adresse courriel : - -```javascript lines -import EmailIdentifierChallenge from '@auth0/auth0-acul-js/email-identifier-challenge'; -const emailIdentifierChallengeManager = new EmailIdentifierChallenge(); - -// SDK Properties return a string, number or boolean -// ex. "email-identifier-challenge" -emailIdentifierChallengeManager.screen.name; - -// SDK Methods return an object or array -// ex. { email: "someone@example.com" } -emailIdentifierChallengeManager.screenData(); -``` - -### Properties - -Les propriétés de la classe de l’écran de vérification de l'identifiant de l’adresse courriel sont : - -<Tabs><Tab title="image de marque"> - -```javascript lines -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record<string, string | number | boolean>; - colors: Record<string, string>; - displayName: string; - fonts: Record<string, string | boolean | object>; - pageBackground: Record<string, string>; - widget: Record<string, string | number>; - }; -} -``` - -</Tab><Tab title="client"> - -```javascript lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - -</Tab><Tab title="organization"> - -```javascript lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - -</Tab><Tab title="invite"> - -```javascript lines -interface prompt{ - name: string; -} -``` - -</Tab><Tab title="Écran"> - -```javascript lines -interface screen{ - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email?: string; - messageType?: string; - }; - isCaptchaAvailable: boolean; - links: null | Record<string, string>; - name: string; - texts: null | Record<string, string>; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - -</Tab><Tab title="locataire"> - -```javascript lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - -</Tab><Tab title="transaction"> - -```javascript lines -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record<string, string>; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record<string, string>; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - -</Tab><Tab title="untrustedData"> - -```javascript lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - -</Tab><Tab title="utilisateur"> - -```javascript lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity<Key>: { - id: number; -} & Record<Key, string> -``` - -</Tab></Tabs> - -### Methods - -Les méthodes de la classe de l’écran de l'identifiant de l’adresse courriel : - -#### resendCode( options? ) - -Cette méthode envoie un nouveau code OTP à l’adresse courriel fournie à l’étape précédente. - -```javascript lines -// This method does not support any parameters -emailIdentifierChallenge.resendCode(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### returnToPrevious( options? ) - -Cette méthode renvoie l’utilisateur à l’étape précédente. - -```javascript lines -// This method does not support any parameters -emailIdentifierChallenge.returnToPrevious(); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong>                 </th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | non défini</td> -<td>Non</td> -<td>Données facultatives collectées auprès de l’utilisateur.</td> -</tr> -</tbody> -</table> - -#### submitEmailChallenge( options? ) - -Cette méthode vérifie l’adresse courriel fournie et permet à l’utilisateur de continuer à s’inscrire. - -```javascript lines -emailIdentifierChallenge.submitEmailChallenge({ - code: <CodeFieldValue> -}); -``` - -<table class="table"><thead> -<tr> -<th><strong>Paramètre</strong></th> -<th><strong>Type</strong></th> -<th><strong>Requis</strong></th> -<th><strong>Description</strong></th> -</tr> -</thead> -<tbody> -<tr> -<td>`captcha`</td> -<td>chaîne</td> -<td>Conditionnellement</td> -<td>Le code CAPTCHA ou la réponse du fournisseur de CAPTCHA. Cette propriété est requise si la détection de robots est activée dans votre tenant Auth0.</td> -</tr> -<tr> -<td>`code`</td> -<td>chaîne</td> -<td>Oui</td> -<td>Le code OTP envoyé à l'adresse courriel.</td> -</tr> -<tr> -<td>`[key: string]`</td> -<td>chaîne | nombre | booléen | indéfini</td> -<td>Non</td> -<td>Données supplémentaires recueillies de l’utilisateur.</td> -</tr> -</tbody> -</table> \ No newline at end of file