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

> Un widget qui offre une expérience de connexion et d’inscription fluide pour vos applications Web.

# Lock for Web

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) + "*****MASQUÉ*****";
          }
          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>;
};

Lock est un formulaire de connexion intégrable que vous pouvez [configurer selon vos besoins](/docs/fr-ca/libraries/lock/lock-configuration). Lock vous permet d’ajouter facilement des <Tooltip tip="Fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=identity+providers">fournisseurs d’identité</Tooltip> sociaux, afin que vos utilisateurs puissent se connecter en toute simplicité avec le fournisseur de leur choix.

<Warning>
  La connexion intégrée pour les applications Web utilise l’[authentification inter-origine](/docs/fr-ca/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/docs/fr-ca/customize/custom-domains) pour votre tenant. L’authentification inter-origine utilise des cookies tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.
</Warning>

<div id="lock-installation">
  ## Installation de Lock
</div>

Vous pouvez installer Lock de plusieurs façons. Choisissez l’une des sources d’installation suivantes qui convient le mieux à votre environnement et à votre application.

<div id="installation-sources">
  ### Sources d’installation
</div>

Installez avec [npm](https://npmjs.org) :
`npm install auth0-lock`

Installez avec [bower](http://bower.io) :

`bower install auth0-lock`

Ajoutez-le via notre CDN (remplacez `.x` et `.y` par les numéros de la plus récente version mineure et du plus récent correctif indiqués dans le [dépôt GitHub de Lock](https://github.com/auth0/lock/releases)) :

Dernière version mineure :`<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>`Dernière version de correctif :
`<script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>`

Nous recommandons aux applications en production d’utiliser une version de correctif précise ou, à tout le moins, une version mineure précise. Quelle que soit la méthode utilisée pour inclure Lock, nous recommandons de figer la version et de la mettre à jour manuellement seulement, afin de vous assurer que ces mises à jour n’ont pas d’incidence négative sur votre mise en œuvre. Consultez le [dépôt GitHub](https://github.com/auth0/lock/releases) pour obtenir la liste à jour des versions publiées.

<div id="mobile">
  ### Mobile
</div>

Si vous ciblez les utilisateurs sur mobile, Auth0 recommande d’ajouter la balise méta suivante dans le `head` de votre application :

`<meta name="viewport" content="width=device-width, initial-scale=1"/>`

<div id="bundling-dependencies">
  ### Regrouper les dépendances
</div>

Si vous utilisez browserify ou webpack pour compiler votre projet et regrouper ses dépendances, après avoir installé le module `auth0-lock`, vous devrez créer un bundle qui l’inclut avec toutes ses dépendances. Des exemples sont disponibles pour [Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify) et [webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack).

<div id="cross-origin-authentication">
  ### Authentification inter-origine
</div>

<Warning>
  La connexion intégrée pour les applications web utilise l’[authentification inter-origine](/docs/fr-ca/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/docs/fr-ca/customize/custom-domains) pour votre tenant. L’authentification inter-origine utilise des cookies tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.
</Warning>

L’intégration de Lock à votre application exige que l’[authentification inter-origine](/docs/fr-ca/authenticate/login/cross-origin-authentication) soit correctement configurée. Plus précisément, vous devez définir la propriété **Origines Web autorisées** sur le domaine qui effectue la requête. Vous trouverez ce champ dans les [Paramètres de l’application](https://manage.auth0.com/#/applications/\{yourClientId}/settings).

<div id="usage">
  ## Utilisation
</div>

<div id="step-1-initializing-lock">
  ### Étape 1. Initialisation de Lock
</div>

Vous devez d’abord initialiser un nouvel objet `Auth0Lock` et lui fournir votre Auth0 <Tooltip tip="ID client : valeur d’identification fournie par Auth0 à votre ressource enregistrée." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=client+ID">ID client</Tooltip> (l’ID client unique de chaque application Auth0, que vous pouvez obtenir dans le [tableau de bord de gestion](https://manage.auth0.com/#)), ainsi que votre domaine Auth0 (par exemple `yourname.auth0.com`).

export const codeExample1 = `// Initialisation d’Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);`;

<AuthCodeBlock children={codeExample1} language="js" />

<div id="step-2-authenticating-and-getting-user-info">
  ### Étape 2. Authentifier l’utilisateur et obtenir ses renseignements
</div>

Ensuite, écoutez l’événement `authenticated` à l’aide de la méthode `on`. Lorsque l’événement est déclenché, utilisez le `accessToken` reçu pour appeler la méthode `getUserInfo` et obtenir les renseignements du profil de l’utilisateur (au besoin).

export const codeExample2 = `var Auth = (function() {

  var wm = new WeakMap();
  var privateStore = {};
  var lock;

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
    wm.set(privateStore, {
      appName: "example"
    });
  }

  Auth.prototype.getProfile = function() {
    return wm.get(privateStore).profile;
  };

  Auth.prototype.authn = function() {
    // Écouter l’événement authenticated
    this.lock.on("authenticated", function(authResult) {
      // Utiliser le jeton dans authResult pour getUserInfo() et l’enregistrer au besoin
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Gérer l’erreur
          return;
        }

        //nous recommandons de ne pas stocker les jetons d’accès, sauf en cas de nécessité absolue
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

        wm.set(privateStore, {
          profile: profile
        });

      });
    });
  };
  return Auth;
}());`;

<AuthCodeBlock children={codeExample2} language="js" />

Vous pouvez ensuite modifier le contenu de la page et afficher à l’utilisateur les informations de son profil (par exemple, son nom dans un message de bienvenue).

`<h2>Welcome <span id="nick" class="nickname"></span></h2>`

Notez que si vous stockez le profil utilisateur, vous devrez convertir l’objet de profil avec `JSON.stringify`, puis, lorsque vous l’utiliserez plus tard, le reconvertir avec `JSON.parse`, puisqu’il doit être stocké dans `localStorage` sous forme de chaîne plutôt que comme objet JSON.

<div id="step-3-showing-lock">
  ### Étape 3. Afficher Lock
</div>

Ici, vous affichez le widget Lock après que l’utilisateur a cliqué sur un bouton de connexion; vous pouvez tout aussi bien afficher Lock automatiquement à l’arrivée sur une page simplement en utilisant `lock.show();` au chargement de la page.

Cela affichera le widget Lock et, avec ce qui précède, vous êtes maintenant prêt à gérer les connexions!

```js lines theme={null}
document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});
```

<div id="passwordless">
  ## Sans mot de passe
</div>

Le <Tooltip tip="Passwordless : forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Passwordless">mode sans mot de passe</Tooltip> de Lock est offert uniquement dans Lock v11.2.0 et les versions ultérieures. Veuillez utiliser la [dernière version de Lock](https://github.com/auth0/lock/releases) pour cette fonctionnalité !

Vous pouvez utiliser le mode sans mot de passe de Lock pour permettre aux utilisateurs de s’authentifier uniquement à l’aide d’une adresse courriel ou d’un numéro de téléphone mobile. Ils recevront un code qu’ils saisiront ensuite, ou cliqueront sur le lien reçu, et pourront ainsi s’authentifier sans avoir à mémoriser un mot de passe.

Dans Lock, pour mettre en œuvre le mode sans mot de passe, vous initialisez Lock d’une façon légèrement différente, avec `Auth0LockPasswordless` plutôt qu’avec `Auth0Lock` :

export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}'
);`;

<AuthCodeBlock children={codeExample3} language="js" />

<div id="passwordless-options">
  ### Options du mode sans mot de passe
</div>

De plus, le mode sans mot de passe de Lock propose quelques options de configuration qui lui sont propres.

Pour indiquer le type de connexion que vous souhaitez utiliser, initialisez Lock avec l’option `allowedConnections`, en lui attribuant la valeur `email` ou `sms` :

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['sms']
}
```

N’oubliez pas d’activer la connexion sans mot de passe de votre choix dans le [Dashboard](https://manage.auth0.com/#), sous **Connections -> Passwordless**, puis de l’activer pour votre application afin que, lorsque Lock essaie de l’utiliser, elle soit déjà configurée et liée à l’application.

Si vous choisissez d’utiliser `email`, vous avez une option supplémentaire : vous devez déterminer si vous souhaitez que vos utilisateurs reçoivent un code à saisir ou un "lien magique" à utiliser. Cela se fait à l’aide de l’option `passwordlessMethod`, qui accepte les valeurs `code` ou `link`.

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code'
}
```

<div id="passwordless-example">
  ### Exemple d’utilisation de Passwordless
</div>

export const codeExample4 = `var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code',
  auth: {
    redirectUrl: 'http://localhost:3000/callback',   
    responseType: 'token id_token',
    params: {
      scope: 'openid email'               
    }          
  }
}

var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}',
 passwordlessOptions
);`;

<AuthCodeBlock children={codeExample4} language="js" />

<div id="single-sign-on-with-embedded-authentication">
  ### Single Sign-On avec authentification intégrée
</div>

La connexion intégrée prend en charge le <Tooltip tip="Single Sign-On (SSO) : service qui, après qu’un utilisateur se connecte à une application, le connecte automatiquement à d’autres applications." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Single+Sign-on">Single Sign-on</Tooltip> (SSO) lorsque vos applications présentent l’architecture suivante :

* Les applications qui utilisent le SSO sont des applications de première partie. Le partage de sessions intégrées avec des applications tierces n’est pas pris en charge.
* Les applications et votre tenant Auth0 partagent un domaine de premier niveau grâce à un [domaine personnalisé](/docs/fr-ca/customize/custom-domains). Par défaut, les domaines Auth0 suivent le format `example.auth0.com`. Les domaines personnalisés permettent à vos applications et à votre tenant Auth0 de partager le même domaine de premier niveau, ce qui contribue aussi à prévenir les attaques CSRF.

Si votre architecture répond à ces critères, le SSO intégré avec Lock est une bonne solution. <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, pour vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Universal+Login">Universal Login</Tooltip> gère automatiquement le SSO entre plusieurs domaines ou avec des [applications tierces](/docs/fr-ca/get-started/applications/third-party-applications/configure-third-party-applications) grâce à sa couche de session. Les deux peuvent coexister dans une même application (par exemple, Universal Login pour la connexion principale et Lock pour l’inscription intégrée de facteurs ou les flux d’authentification renforcée). Pour comparer les compromis, consultez [Connexion hébergée ou connexion intégrée](/docs/fr-ca/authenticate/login/universal-vs-embedded-login).

<div id="error-codes-and-descriptions">
  ## Codes d’erreur et descriptions
</div>

Lorsque Lock est utilisé pour la connexion intégrée, il utilise le endpoint `/co/authenticate`, qui peut renvoyer les erreurs suivantes.

La description de l’erreur est rédigée pour être comprise par un humain. Elle **ne doit pas être analysée par du code** et peut être modifiée à tout moment.

| **Statut** | **Code**                      | **Description**                                                                                                                                                                                        |
| ---------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 400        | invalid\_request              | Corps de la requête invalide. Tous les paramètres suivants, et seulement ceux-ci, sont requis : client\_id, credential\_type, username, otp, realm.                                                    |
| 401        | unauthorized\_client          | Connexion inter-origine non autorisée.                                                                                                                                                                 |
| 400        | unsupported\_credential\_type | Paramètre de type d’identifiant inconnu.                                                                                                                                                               |
| 400        | invalid\_request              | Realm inconnu : non-existent-connection.                                                                                                                                                               |
| 403        | access\_denied                | Courriel ou mot de passe incorrect.                                                                                                                                                                    |
| 403        | access\_denied                | Erreur d’authentification                                                                                                                                                                              |
| 403        | blocked\_user                 | Utilisateur bloqué                                                                                                                                                                                     |
| 401        | password\_leaked              | Cette tentative de connexion a été bloquée parce que le mot de passe que vous utilisez a déjà été divulgué lors d’une atteinte à la sécurité des données (pas dans cette application).                 |
| 429        | too\_many\_attempts           | Votre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification par votre méthode de contact préférée avec des instructions pour le débloquer. |
| 429        | too\_many\_attempts           | Nous avons détecté un comportement de connexion suspect et toute nouvelle tentative sera bloquée. Veuillez communiquer avec l’administrateur.                                                          |

<div id="browser-compatibility">
  ## Compatibilité des navigateurs
</div>

La compatibilité avec les navigateurs **Chrome**, **Safari**, **Firefox** et **IE >= 10** est assurée. Auth0 utilise actuellement [zuul](https://github.com/defunctzombie/zuul) avec [Saucelabs](https://saucelabs.com) pour exécuter des tests d’intégration à chaque envoi de code.

<div id="learn-more">
  ## En savoir plus
</div>

* [Référence de l’API Lock](/docs/fr-ca/libraries/lock/lock-api-reference)
* [Options de configuration de Lock](/docs/fr-ca/libraries/lock/lock-configuration)