Démarrage rapide de la trousse SDK Auth0 ACUL JS

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.

La trousse SDK 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.

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.

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

/

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.

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?

/

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.

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

Was this helpful?

/

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.

// Creates the local assets 

npm run build 
cd dist 

// Serves the assets from localhost

npx serve -p 8080 --cors

Was this helpful?

/

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 et l’adresse du domaine personnalisé configuré pour l’application d’exemple.

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

Was this helpful?

/

Pour en savoir plus sur la personnalisation avancée, consultez Déployer et héberger des personnalisations avancées.

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.