> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 Universal Login

> Universal Login vous permet de vérifier l’identité de vos utilisateurs à l’aide de notre serveur d’autorisation.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une étape du cycle de publication";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les {linkify(`${plans} forfaits`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Auth0 <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Universal+Login">Universal Login</Tooltip> offre la fonctionnalité essentielle d’un <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=authorization+server">serveur d’autorisation</Tooltip> : le flux de connexion. Lorsqu’un utilisateur doit prouver son identité pour accéder à votre application, vous pouvez le rediriger vers Universal Login et laisser Auth0 gérer le processus d’authentification.

Avec Universal Login, vous n’avez aucun travail d’intégration à effectuer pour prendre en charge différentes méthodes d’authentification. Vous pouvez commencer par un flux d’authentification simple, puis ajouter des fonctionnalités supplémentaires, comme la connexion sans mot de passe, la connexion avec un compte social ou l’<Tooltip tip="Authentification multifacteur (MFA) : processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, comme un code envoyé par SMS." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=multi-factor+authentication">authentification multifacteur</Tooltip> (MFA), afin de créer une expérience de connexion sécurisée et conviviale.

La configuration d’Universal Login est dynamique et ne nécessite aucune modification au niveau de l’application, puisque les pages Web hébergées sur le <Tooltip tip="Serveur d’authentification : serveur qui confirme ou refuse l’identité d’un utilisateur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=authentication+server">serveur d’authentification</Tooltip> centralisé d’Auth0 pilotent entièrement le flux de connexion. De plus, vous n’avez pas à mettre votre code à jour manuellement pour que les applications bénéficient des améliorations apportées par Auth0 à Universal Login.

Dans l’<Tooltip tip="Auth0 Dashboard : principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, vous pouvez personnaliser l’apparence et le comportement des pages de connexion afin de créer une expérience cohérente et adaptée à votre image de marque. Pour les cas d’utilisation avancés, vous pouvez aussi modifier le code de chaque page individuellement.

Pour en savoir plus sur les différences entre Universal Login et la connexion intégrée, consultez [Centralized Universal Login vs. Embedded Login](/fr-CA/docs/authenticate/login/universal-vs-embedded-login).

<div id="configure-universal-login">
  ## Configurer Universal Login
</div>

Dans votre Auth0 Dashboard, vous pouvez choisir l’expérience à utiliser pour les pages de connexion par défaut sous [Image de marque > Universal Login > Options avancées](https://manage.auth0.com/#/universal-login/customizations-new).

Auth0 propose deux expériences de connexion hébergées :

* **Universal Login** offre une expérience simplifiée aux utilisateurs et ne nécessite pas JavaScript pour la personnalisation.
* **Classic Login** utilise des contrôles JavaScript pour chaque page du flux de connexion.

À l’heure actuelle, les efforts de développement d’Auth0 sont axés sur Universal Login, et Classic Login n’est plus mis à jour. Sauf si votre cas d’utilisation exige l’expérience classique, il est recommandé d’implémenter Universal Login.

Pour en savoir plus sur les différences entre ces deux expériences, consultez [Universal Login vs. Classic Login](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login).

<div id="accessibility">
  ### Accessibilité
</div>

Auth0 applique les normes suivantes pour améliorer l’accès aux flux Universal Login pour les personnes qui utilisent des technologies d’assistance :

* [Règles pour l’accessibilité des contenus Web (WCAG), version 2.2, niveau AA](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [EN 301 549](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility)

Universal Login d’Auth0 prend en charge ces normes par défaut. Voici les éléments qui pourraient avoir une incidence sur les personnalisations apportées par les clients :

* Les erreurs de validation sont affichées directement dans le formulaire plutôt que sous forme d’infobulles afin d’être accessibles aux lecteurs d’écran.
* Les couleurs par défaut des composants de l’interface respectent les directives WCAG en matière de contraste.
* Les formulaires utilisent l’autocorrection.
* Les attributs [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) et les autres attributs des composants de l’interface facilitent la navigation avec les lecteurs d’écran.
* Les adresses de courriel sont validées côté client et suivent les mêmes règles de mise en forme que la validation côté serveur.
* Les étiquettes HTML sont accessibles et associées à leurs champs de saisie respectifs.
* Les exigences de complexité des mots de passe et les messages d’erreur intégrés au formulaire sont annoncés par les lecteurs d’écran.
* Tous les écrans du <Tooltip tip="Flux d’autorisation : octroi d’autorisation (ou flux de travail) défini dans le cadre OAuth 2.0." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=authorization+flow">flux d’autorisation</Tooltip> ont un titre de page clair et distinct.
* Les champs obligatoires comportent un indicateur visuel sur l’étiquette.

<div id="customize-login-page">
  ### Personnaliser la page de connexion
</div>

Après avoir activé Universal Login, vous pouvez personnaliser votre page de connexion directement dans l’Auth0 Dashboard. Plus précisément, vous pouvez personnaliser les modèles de page et les thèmes, les invites d’inscription et de connexion, ainsi que d’autres éléments textuels. Pour en savoir plus, consultez Personnaliser Universal Login.

Si vous décidez d’implémenter Classic Login, vous pouvez personnaliser les options de base de l’image de marque dans l’Auth0 Dashboard. Vous pouvez ensuite configurer des personnalisations avancées à l’aide du SDK utilisé pour créer votre flux de connexion. Pour en savoir plus, consultez [Personnaliser Classic Login](/fr-CA/docs/customize/login-pages/classic-login).

<div id="implement-universal-login">
  ## Mettre en œuvre Universal Login
</div>

Après avoir activé Universal Login ou Classic Login dans votre locataire, suivez les étapes ci-dessous pour mettre en œuvre cette expérience :

1. [Enregistrez votre application](/fr-CA/docs/get-started/auth0-overview/create-applications) auprès d’Auth0.
2. Configurez votre application pour appeler le [point de terminaison Login](https://auth0.com/docs/api/authentication#login) de l’API d’authentification afin de déclencher le flux de connexion et de traiter la réponse, puis de traiter la réponse. Vous pouvez effectuer cette configuration directement ou utiliser l’un des [SDK](/fr-CA/docs/libraries) d’Auth0.
3. Créez une connexion [de base de données](/fr-CA/docs/get-started/applications/set-up-database-connections), [d’entreprise](/fr-CA/docs/authenticate/enterprise-connections) ou [sociale](/fr-CA/docs/authenticate/identity-providers/social-identity-providers), puis activez-la pour votre application.

<div id="navigate-to-the-login-page">
  ### Accéder à la page de connexion
</div>

Vous pouvez appeler directement le [point de terminaison Login](https://auth0.com/docs/api/authentication#login) depuis n’importe quel navigateur :

export const codeExample = `https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri=https://{yourApp}/callback&
  state={yourState}`;

<AuthCodeBlock children={codeExample} language="bash" filename="cURL" />

La requête doit inclure les valeurs suivantes :

* `response_type` (`code` ou `token`)
* `client_id`
* `redirect_uri`
* `state`

  * Pour mieux comprendre pourquoi cette valeur est requise, consultez [Prévenir les attaques et rediriger les utilisateurs avec les paramètres state d’OAuth 2.0](/fr-CA/docs/secure/attack-protection/state-parameters).

Au besoin, vous pouvez inclure le paramètre `connection` pour inviter les utilisateurs à s’authentifier avec la connexion spécifiée.

<div id="correlation-id">
  ### ID de corrélation
</div>

<ReleaseStageNotice feature="ID de corrélation" stage="ea" terms="true" contact="l’assistance Auth0 ou votre gestionnaire de compte technique" />

Universal Login prend en charge les événements corrélés dans tous les flux d’authentification. Une fois que vous avez implémenté Universal Login, votre application génère un identifiant unique que vous transmettez comme `correlation_id` au point de terminaison `/authorize`. Cet identifiant unique est conservé tout au long des événements d’authentification suivants :

* Inscription
* Connexion
* Inscription à l’authentification multifacteur (MFA) et demandes de vérification
* Réinitialisation du mot de passe

Une fois `correlation_id` transmis, vous pouvez suivre les événements d’authentification dans les [journaux Auth0](/fr-CA/docs/deploy-monitor/logs).

Pour en savoir plus, consultez [ID de corrélation](/fr-CA/docs/authenticate/login/configure-correlation-id).

<div id="use-the-quickstart-guides">
  ### Utilisez les guides de démarrage rapide
</div>

Pour en savoir plus sur la configuration de Universal Login pour votre application, consultez les [guides de démarrage rapide](/fr-CA/docs/quickstarts). Choisissez l’approche la mieux adaptée à vos technologies et suivez le guide de démarrage rapide pour obtenir une procédure détaillée de l’implémentation.