Développer une connexion Identifier First avec mot de passe

Before you start

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.

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

Configuration

Dans votre Auth0 Dashboard, 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

Was this helpful?

/

1. Créer l’écran d’ID de connexion

ID de connexion

Voici un exemple complet de l’écran.

/

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

  // 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>
        <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>
  );
}

Was this helpful?

/

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 { LoginId as ScreenProvider } from "@auth0/auth0-acul-js";

export default function LoginId() {
  // Initialize the SDK for this screen
  const screenProvider = new ScreenProvider();
  ...
}

Was this helpful?

/

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. 

<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>
    <Button type="submit" className="w-full">
      {screenProvider.screen.texts?.buttonText ?? "Continue"}
    </Button>
    ...
  </CardContent>
</form>

Was this helpful?

/

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.loginid({ username: identifierInput?.value });
  };

Was this helpful?

/

2 : Créer l’écran d’inscription

Mot de passe de connexion

Voici un exemple complet de l’écran.

/

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<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 ?? "Enter Your Password"}
        </CardTitle>
        <CardDescription className="mb-8 text-center">
          {screenProvider.screen.texts?.description ??
            "Enter your password to continue"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Text className="mb-4 text-large">
          <span className="inline-block">
            Log in as
            <span className="inline-block ml-1 font-bold">
              {screenProvider.screen.data?.username}.
            </span>
          </span>
          <Link
            href={screenProvider.screen.editIdentifierLink ?? "#"}
            className="ml-2"
          >
            {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
          </Link>
        </Text>
        <Input
          type="hidden"
          name="identifier"
          id="identifier"
          value={screenProvider.screen.data?.username}
        />
        <div className="mb-2 space-y-2">
          <Label htmlFor="password">
            {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>
          Need Help?
          <Link
            href={screenProvider.screen.resetPasswordLink ?? "#"}
            className="ml-1"
          >
            {screenProvider.screen.texts?.forgottenPasswordText ??
              "Forgot your Password?"}
          </Link>
        </Text>
      </CardContent>
    </form>
  );
}

Was this helpful?

/

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 { LoginPassword as ScreenProvider } from "@auth0/auth0-acul-js";

export default function LoginPassword() {
  // Initialize the SDK
  const [SDK] = useState(() => new ScreenProvider());\
  ...
  }

Was this helpful?

/

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.

<CardContent>
        <Text className="mb-4 text-large">
          <span className="inline-block">
            Log in as
            <span className="inline-block ml-1 font-bold">
              {screenProvider.screen.data?.username}.
            </span>
          </span>
          <Link
            href={screenProvider.screen.editIdentifierLink ?? "#"}
            className="ml-2"
          >
            {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
          </Link>
        </Text>
        <Input
          type="hidden"
          name="identifier"
          id="identifier"
          value={screenProvider.screen.data?.username}
        />
        <div className="mb-2 space-y-2">
          <Label htmlFor="password">
            {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>

Was this helpful?

/

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 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,
    });
  };

Was this helpful?

/

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.

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"
    }
  ]
}

Was this helpful?

/
 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

Was this helpful?

/

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

Was this helpful?

/

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.

Contenu associé

Consultez... Pour apprendre...                                
Personnalisations avancées pour la connexion universelle Fonctionnement des personnalisations avancées.
Mise en route des personnalisations avancées Notions de base pour la mise en route des personnalisations avancées
Personnalisations avancées pour la connexion universelle : Écrans Une liste de tous les écrans proposés pour les personnalisations avancées.