Premiers pas avec les personnalisations avancées pour la connexion universelle

Les personnalisations avancées pour la connexion universelle (ACUL) permettent de créer des interfaces personnalisées pour chaque écran de la connexion universelle. Le diagramme suivant montre comment les écrans qui utilisent ACUL sont construits, hébergés, configurés et présentés à l’utilisateur final.

A diagram of how Advanced Customization for Universal Login screens are rendered.

Flux des personnalisations avancées

  1. Vos développeurs peuvent créer des interfaces personnalisées pour des écrans de connexion universelle déterminés en utilisant votre pile technologique frontale préférée (telle que React, Angular ou Vue) et tout système de conception interne, bibliothèque de composants ou CSS/Javascript de tierce partie.

  2. Votre pipeline CI/CD regroupe ensuite ces interfaces et les déploie sur votre réseau de diffusion de contenu (CDN).

  3. Les développeurs utilisent Auth0 Management API pour configurer un mode de rendu avancé pour des écrans de connexion universelle déterminés et fournir des liens vers vos ensembles d’actifs hébergés par le CDN.

  4. La connexion universelle détermine, lors de l’authentification des utilisateurs, l’écran à afficher et le mode de rendu adéquat pour l’écran demandé.

  5. Si l’écran actuel n’est pas configuré pour utiliser le mode de rendu avancé, la connexion universelle reprend par défaut l’interface normale de la connexion universelle, y compris toutes les personnalisations que vous avez apportées à l’interface par défaut.

  6. La connexion universelle renvoie le modèle de page du mode de rendu avancé si l’écran en cours est configuré pour utiliser ce mode.

  7. Lors de la soumission de données à partir d’interfaces personnalisées, le serveur s’attend à ce que les données soient soumises au moyen d’une requête POST à la même page que les données de formulaire codées en url en utilisant le type de contenu application/x-www-form-urlencoded. L’envoi de JSON entraîne une erreur.

  8. Le serveur valide les données soumises. Si des erreurs surviennent, le serveur renvoie l’écran actuel en plus des erreurs dans l’objet de contexte. S’il n’y a pas d’erreurs, le serveur détermine l’écran suivant à afficher et examine le mode de rendu correspondant.

Modèle de page pour le mode de rendu avancé

Voici un modèle de page HTML de base en mode de rendu avancé. Il comprend :

  • La langue basée sur ul_locales dans la balise html.

  • Les balises <meta> standardisées de la connexion universelle et le titre de l’écran par défaut, lesquels peuvent être supprimés lors de la configuration du mode de rendu avancé.

  • Un objet Javascript contenant la configuration du locataire Auth0 et les données de la transaction d’authentification.

  • Éléments HTML dans la balise <head> qui font référence à vos packs de ressources configurés.

<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <title>My App | Login</title>
    <link rel="stylesheet" href="https://cdn.saas.app/main.css" />
    <script type="text/javascript">
      window.universal_login_context = {...};
    </script>
    <script src="https://cdn.sass.app/bundle.js" defer></script>
  </head>
  <body></body>
</html>

Was this helpful?

/