Passer au contenu principal

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) 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 et le Guide de référence de la trousse SDK.

​
Configuration

Dans votre , configurez la connexion universelle, l’authentification Identifier First et une connexion de base de données 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. Après avoir cloné l’exemple d’application, allez dans le dossier auth0-acul-react-boilerplate et installez la trousse SDK. 
//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

Voici un exemple complet de l’écran. 
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<HTMLFormElement>) => {
    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 (
    <form noValidate onSubmit={formSubmitHandler}>
      <CardHeader>
        <CardTitle className="mb-2 text-3xl font-medium text-center">
          {screenProvider.screen.texts?.title ?? "Welcome"}
        </CardTitle>
        <CardDescription className="mb-8 text-center">
          {screenProvider.screen.texts?.description ?? "Login to continue"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.emailPlaceholder ??
              "Enter your email"}
          </Label>
          <Input
            type="text"
            id="identifier"
            name="identifier"
            defaultValue={
              screenProvider.screen.data?.username ??
              screenProvider.untrustedData.submittedFormData?.username
            }
          />
        </div>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.passwordPlaceholder ?? "Password"}
          </Label>
          <Input type="password" id="password" name="password" />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
        <Text className="mb-2">
          {screenProvider.screen.texts?.footerText ?? "Don't have an account yet?"}
          <Link className="ml-1" href={screenProvider.screen.signupLink ?? "#"}>
            {screenProvider.screen.texts?.footerLinkText ?? "Create your account"}
          </Link>
        </Text>
        <Text>
          Need Help?
          <Link className="ml-1" href={screenProvider.screen.resetPasswordLink ?? "#"}>
            {screenProvider.screen.texts?.forgottenPasswordText ?? "Forgot your Password?"}
          </Link>
        </Text>
      </CardContent>
    </form>
  );
}

​
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. 
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 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. 
<form noValidate onSubmit={formSubmitHandler}>
      ...
      <CardContent>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.emailPlaceholder ??
              "Enter your email"}
          </Label>
          <Input
            type="text"
            id="identifier"
            name="identifier"
            defaultValue={
              screenProvider.screen.data?.username ??
              screenProvider.untrustedData.submittedFormData?.username
            }
          />
        </div>
        <div className="mb-2 space-y-2">
          <Label htmlFor="identifier">
            {screenProvider.screen.texts?.passwordPlaceholder ?? "Password"}
          </Label>
          <Input type="password" id="password" name="password" />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
      ...
      </CardContent>
    </form>
  );
}

​
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. 
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 });
  };

​
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.
  • Interface de ligne de commande Auth0 (recommandé)
  • Auth0 Terraform
  • Auth0 Management API
Dans le répertoire racine de votre projet, créez un dossier settings et incluez-y un fichier {SCREENNAME}.json.
//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 :
auth0 ul customize --rendering-mode advanced --prompt {SCREENNAME} --screen {SCREENNAME} --settings-file ./settings/{SCREENNAME}.json

​
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. 
// 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.

​
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.
⌘I