Créer une inscription Identifier First avec mot de passe

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.
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’ID et de mot de passe d’inscription 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 , 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 d’inscription

Voici un exemple complet de l’écran.

ID d’inscription

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<HTMLFormElement>) => {
    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 (
    <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 ?? "Create your account"}
        </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?.email ??
              screenProvider.untrustedData.submittedFormData?.email
            }
          />
        </div>
        <Button type="submit" className="w-full">
          {screenProvider.screen.texts?.buttonText ?? "Continue"}
        </Button>
        <Text>
          {screenProvider.screen.texts?.footerText ??
            "Already have an account?"}
          <Link className="ml-1" href={screenProvider.screen.loginLink ?? "#"}>
            {screenProvider.screen.texts?.footerLinkText ??
              "Log into your account"}
          </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 { 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 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.

<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?.email ??
              screenProvider.untrustedData.submittedFormData?.email
            }
          />
        </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.signup({ email: identifierInput?.value });
  };

2 : Créer l’écran de mot de passe d’inscription

Voici un exemple complet de l’écran.

Mot de passe d’inscription

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<HTMLFormElement>) => {
    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 (
    <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">
            Sign up as
            <span className="inline-block ml-1 font-bold">
              {screenProvider.screen.data?.email}.
            </span>
          </span>
          <Link
            href={screenProvider.screen.editLink ?? "#"}
            className="ml-2"
          >
            {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
          </Link>
        </Text>
        <Input
          type="hidden"
          name="identifier"
          id="identifier"
          value={screenProvider.screen.data?.email}
        />
        <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>
          {screenProvider.screen.texts?.footerText ??
            "Already have an account?"}
          <Link className="ml-1" href={screenProvider.screen.loginLink ?? "#"}>
            {screenProvider.screen.texts?.footerLinkText ??
              "Log into your account"}
          </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, puis utilisez le composant React pour initialiser la trousse SDK pour l’écran.

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

<form noValidate onSubmit={formSubmitHandler}>
      ...
  <CardContent>
   <Text className="mb-4 text-large">
    <span className="inline-block">
      Sign up as
   <span className="inline-block ml-1 font-bold">
   {screenProvider.screen.data?.email}.
  </span>
 </span>
  <Link
   href={screenProvider.screen.editLink ?? "#"}
    className="ml-2"
   >
   {screenProvider.screen.texts?.editEmailText ?? "Edit Email"}
  </Link>
  </Text>
  <Input
  type="hidden"
  name="identifier"
         id="identifier"
         value={screenProvider.screen.data?.email}
        />
 <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>

Appeler l’action de soumission

const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => {
    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.

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

Dans le répertoire racine de votre projet, créez un fichier login-id.json :

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

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.

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 <API TOKEN>' \
--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.

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

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.

Personnalisation de la marque

Personnalisation du code

Personnalisation tierce

Créer une inscription Identifier First avec mot de passe

Avant de commencer

Configuration

1. Créer l’écran d’inscription

Importer et initialiser la trousse SDK

Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

Implémenter l’action d’inscription

Appeler l’action de soumission

2 : Créer l’écran de mot de passe d’inscription

Importer et initialiser la trousse SDK

Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

Appeler l’action de soumission

3 : Configurer ACUL pour utiliser les ressources locales

Tester votre configuration sur un serveur local

4 : Déployer les ressources et mettre à jour la configuration de votre locataire

Contenu associé

Personnalisation de la marque

Personnalisation du code

Personnalisation tierce

Documentation Index

Avant de commencer

​Configuration

​1. Créer l’écran d’inscription

​Importer et initialiser la trousse SDK

​Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

​Implémenter l’action d’inscription

​Appeler l’action de soumission

​2 : Créer l’écran de mot de passe d’inscription

​Importer et initialiser la trousse SDK

​Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

​Appeler l’action de soumission

​3 : Configurer ACUL pour utiliser les ressources locales

​Tester votre configuration sur un serveur local

​4 : Déployer les ressources et mettre à jour la configuration de votre locataire

​Contenu associé

Configuration

1. Créer l’écran d’inscription

Importer et initialiser la trousse SDK

Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

Implémenter l’action d’inscription

Appeler l’action de soumission

2 : Créer l’écran de mot de passe d’inscription

Importer et initialiser la trousse SDK

Utiliser la trousse SDK pour accéder aux propriétés et méthodes à l’écran

Appeler l’action de soumission

3 : Configurer ACUL pour utiliser les ressources locales

Tester votre configuration sur un serveur local

4 : Déployer les ressources et mettre à jour la configuration de votre locataire

Contenu associé