Passer au contenu principal

Avant de commencer

Vous avez besoin de :
Auth0 CLI vous permet de mettre en œuvre et de tester les écrans Advanced Customization for Universal Login (ACUL). Il simplifie la personnalisation des écrans d’authentification (comme la connexion, l’inscription, Passwordless et l’inscription de clés d’accès) pour qu’ils correspondent parfaitement à vos applications web. Suivez ces étapes pour créer un projet ACUL et un écran login_id personnalisé à l’aide d’Auth0 CLI :

​
1. Initialisez une application d’exemple ACUL

Si vous n’avez pas configuré votre locataire de développement à l’aide d’Auth0 CLI, utilisez la commande auth0 login pour le configurer.
Accédez à l’emplacement où vous souhaitez créer votre projet, puis exécutez la commande suivante : 
auth0 acul init "Your_App_Name"
  1. Sélectionnez React (avec le SDK React ACUL).
  2. Sélectionnez l’écran login-id.
  3. À l’invite Would you like to proceed with installing the required dependencies using ‘npm install’?, saisissez y.
Auth0 CLI crée un nouveau répertoire de projet avec le nom d’application fourni.
Si vous n’avez pas sélectionné y pour installer les dépendances requises, accédez au répertoire de votre projet et exécutez la commande npm install.

​
2. (Facultatif) Ajoutez d’autres écrans à votre projet

Sélectionnez d’autres écrans pour votre projet en exécutant la commande suivante : 
auth0 acul screen add SCREEN_NAME

​
3. Lancez l’écran Login Id à l’aide de Universal Login Context Inspector

Utilisez l’inspecteur du contexte UL pour lancer l’écran Login ID :
  1. Accédez au répertoire de votre projet et exécutez la commande suivante :
  auth0 acul dev
  1. Vérifiez le répertoire du projet
  2. Sélectionnez le port pour partager les ressources locales; par défaut, le port 55444
Le Universal Login Context Inspector ouvre une nouvelle fenêtre du navigateur avec l’écran Login Id.

​
4. Mettre à jour l’exemple d’écran Login Id

La commande auth0 acul dev génère les écrans ACUL, héberge vos ressources localement et surveille en continu les mises à jour dans le répertoire des ressources, ce qui vous permet de tester vos écrans en local. Pour en savoir plus, consultez la documentation de la commande Auth0 CLI acul.
  1. Dans le répertoire de votre projet, modifiez le fichier /src/index.css et mettez à jour le widget du logo avec l’URL de votre logo :
--ul-theme-widget-logo-url: "Your-Logo-URL";
  1. Enregistrez la modification.
Le serveur de développement local se recharge automatiquement avec la plus récente modification.

​
5. Personnalisez les données de contexte de vos écrans d’authentification

À l’aide de l’Universal Login Context Inspector, vous pouvez personnaliser les données de contexte par défaut afin de tester vos écrans d’authentification avec des configurations propres au locataire.
  1. Créez une version locale des données de contexte simulées pour un écran dans votre projet :
Sélectionnez l’icône Download JSON pour télécharger le fichier de données de contexte simulées.
Page ACUL dans Auth0 Dashboard
  1. Renommez le fichier téléchargé et déplacez-le vers public/screens/{prompt}/{screen}, puis ajoutez-le au fichier public/manifest.json dans le répertoire de votre projet.
Par exemple, le fichier téléchargé login-id-login-id-context.json est renommé login-id.json et déplacé vers /public/screens/login-id/login-id.json.
  1. Sélectionnez Local Development dans Data source de l’Universal Login Context Inspector pour charger la version locale du contexte simulé pour l’écran.
Pour en savoir plus, consultez la documentation Auth0 CLI ACUL.