> ## 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 simple et fluide pour vos applications Web.

# Lock pour le 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) + "*****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>;
};

Lock est un formulaire de connexion intégrable que vous pouvez [configurer selon vos besoins](/fr-CA/docs/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="/fr-CA/docs/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-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/fr-CA/docs/customize/custom-domains) pour votre locataire. L’authentification inter-origines utilise des cookie 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 selon 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 à l’aide de notre CDN (remplacez `.x` et `.y` par les numéros de version mineure et de correctif les plus récents du [dépôt GitHub de Lock](https://github.com/auth0/lock/releases)) :

Version mineure la plus récente :`<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>`Version de correctif la plus récente :
`<script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>`

Il est recommandé que les applications en production utilisent une version de correctif précise, ou au minimum une version mineure précise. Quelle que soit la méthode utilisée pour inclure Lock, il est recommandé de fixer la version et de ne la mettre à jour que manuellement, afin de s’assurer que ces mises à jour n’aient pas d’effet négatif sur votre implémentation. Consultez le [dépôt GitHub](https://github.com/auth0/lock/releases) pour obtenir la liste à jour des versions.

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

Si vous ciblez les utilisateurs mobiles, 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">
  ### Regroupement des dépendances
</div>

Si vous utilisez browserify ou webpack pour créer votre projet et regrouper ses dépendances, après avoir installé le module `auth0-lock`, vous devrez l’inclure avec toutes ses dépendances dans le bundle. 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-origines
</div>

<Warning>
  La connexion intégrée pour les applications Web utilise l’[authentification inter-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/fr-CA/docs/customize/custom-domains) pour votre locataire. L’authentification inter-origines 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-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication) soit correctement configurée. Plus précisément, vous devez définir la propriété **Allowed Web Origins** sur le domaine d’où provient la demande. 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>

Commencez par initialiser un nouvel objet `Auth0Lock` et lui fournir votre <Tooltip tip="ID client : valeur d’identification attribuée à votre ressource enregistrée par Auth0." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=client+ID">ID client</Tooltip> Auth0 (l’ID client unique de chaque application Auth0, que vous pouvez obtenir dans l’[Auth0 Dashboard](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. Authentification et obtention des renseignements sur l’utilisateur
</div>

Ensuite, écoutez l’événement `authenticated` à l’aide de la méthode `on`. Lorsqu’il se produit, 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() {
    // Écoute de l'événement authenticated
    this.lock.on("authenticated", function(authResult) {
      // Utilisez le jeton contenu dans authResult pour appeler getUserInfo() et l'enregistrer au besoin
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Gérer l'erreur
          return;
        }

        //nous vous recommandons de ne pas stocker de 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 manipuler le contenu de la page et afficher à l’utilisateur des renseignements de 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 appliquer `JSON.stringify` à l’objet de profil, puis, lorsque vous l’utiliserez plus tard, `JSON.parse`, car il devra être stocké dans `localStorage` sous forme de chaîne de caractères 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 en utilisant simplement `lock.show();` au chargement de celle-ci.

Cela affichera le widget Lock et, combiné à 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">
  ## Passwordless
</div>

Le mode <Tooltip tip="Passwordless : forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Passwordless">Passwordless</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 profiter de cette fonctionnalité!

Vous pouvez utiliser le mode Passwordless de Lock pour permettre aux utilisateurs de s’authentifier uniquement avec une adresse courriel ou un numéro de téléphone mobile. Ils recevront alors le code, puis reviendront le saisir, ou cliqueront sur le lien, et pourront être authentifiés sans avoir à mémoriser un mot de passe.

Dans Lock, pour implémenter le mode Passwordless, 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 de Passwordless
</div>

De plus, le mode Passwordless de Lock offre quelques options de configuration qui lui sont propres.

Pour indiquer le type de connexion souhaité, 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 Passwordless de votre choix dans le [Auth0 Dashboard](https://manage.auth0.com/#), sous **Connexions -> Passwordless**, puis de l’activer pour votre application afin que, lorsque Lock essaie de l’utiliser, elle soit déjà configurée et associée à l’application.

Si vous choisissez d’utiliser `email`, vous avez une option supplémentaire à sélectionner : déterminer si vos utilisateurs recevront un code à saisir ou un "lien magique" à utiliser. Cela se configure à 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 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">
  ### Authentification unique avec authentification intégrée
</div>

Les applications qui utilisent une connexion intégrée doivent remplir deux critères pour pouvoir offrir l’<Tooltip tip="Authentification unique (SSO) : service grâce auquel, lorsqu’un utilisateur se connecte à une application, il est automatiquement connecté aux autres applications." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Single+Sign-on">authentification unique</Tooltip> (SSO).

1. Les deux applications qui tentent d’utiliser le SSO doivent être des applications de première partie. Le SSO avec des applications tierces ne fonctionnera pas.
2. Elles doivent utiliser des domaines personnalisés et faire en sorte que les applications qui doivent utiliser le SSO ainsi que le locataire Auth0 se trouvent sur le même domaine. Traditionnellement, les domaines Auth0 sont au format `foo.auth0.com`, mais les domaines personnalisés vous permettent d’utiliser le même domaine pour chacune des applications concernées ainsi que pour votre locataire Auth0, évitant ainsi le risque d’attaques CSRF.

Nous vous recommandons d’utiliser <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="/fr-CA/docs/glossary?term=Universal+Login">Universal Login</Tooltip> au lieu de configurer le SSO dans des scénarios de connexion intégrée. Universal Login est la façon la plus fiable et la plus stable d’effectuer le SSO, et c’est la seule façon d’y parvenir si vous devez utiliser plusieurs domaines pour vos applications ou des [applications tierces](/fr-CA/docs/get-started/applications/third-party-applications/configure-third-party-applications).

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

Lorsque Lock est utilisé pour une connexion intégrée, il utilise le point de terminaison `/co/authenticate`, qui renvoie les erreurs suivantes.

La description de l’erreur est lisible 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 requête non valide. Les champs requis sont uniquement client\_id, credential\_type, username, otp et realm.                                                                                   |
| 401        | unauthorized\_client          | Connexion interorigine non autorisée.                                                                                                                                                                  |
| 400        | unsupported\_credential\_type | Paramètre de type d’identifiant inconnu.                                                                                                                                                               |
| 400        | invalid\_request              | Realm « non-existent-connection » inconnu.                                                                                                                                                             |
| 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é dans une fuite de données (mais 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](/fr-CA/docs/libraries/lock/lock-api-reference)
* [Options de configuration de Lock](/fr-CA/docs/libraries/lock/lock-configuration)