> ## 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.
> Détails sur l’API Lock v11.
# Référence de l’API Lock
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
{displayText}
;
};
Lock offre de nombreuses méthodes, fonctionnalités et options configurables. Cette référence est conçue pour vous orienter vers celles dont vous avez besoin et vous expliquer comment les utiliser. Cliquez ci-dessous pour accéder directement à la méthode que vous recherchez, ou parcourez simplement la référence ! Si vous cherchez de l’information sur les événements émis par Lock, ils sont répertoriés dans la section consacrée à la méthode [on()](#on-) !
* [new Auth0Lock](#auth0lock) - Instancier Lock
* [getUserInfo()](#getuserinfo-) - Obtenir le profil d’un utilisateur connecté
* [show()](#show-) - Afficher le widget Lock
* [on()](#on-) - Écouter les événements
* [resumeAuth()](#resumeauth-) - À utiliser pour terminer le flux d’authentification lorsque `autoParseHash` est défini sur `false`
* [checkSession()](#checksession-) - Obtenir un nouveau jeton d’Auth0 pour un utilisateur authentifié
* [logout()](#logout-) - Déconnecter l’utilisateur
## Auth0Lock
`new Auth0Lock(clientID, domain, options)`
Initialise une nouvelle instance de `Auth0Lock` configurée avec le `clientID` de votre application et le `domain` de votre compte, à partir de votre tableau de bord de gestion [Auth0](https://manage.auth0.com/#/). Le troisième paramètre, facultatif, est un objet `options` utilisé pour configurer Lock en fonction des besoins de votre application. Vous trouverez ces renseignements dans les [paramètres de votre application](https://manage.auth0.com/#/applications).
* **clientId `{String}`**: Paramètre requis. Le clientId de votre application dans Auth0.
* **domain `{String}`**: Paramètre requis. Votre domaine Auth0. Habituellement, your-account.auth0.com.
* **options `{Object}`**: Paramètre facultatif. Permet de configurer l’apparence et le comportement de Lock. Consultez [la page des options de configuration](/fr-CA/docs/libraries/lock/lock-configuration) pour en savoir plus.
export const codeExample1 = `var Auth = (function() {
var privateStore = {};
function Auth() {
// Instancier Lock sans options personnalisées
this.lock = new Auth0Lock(
'<{yourClientId}>',
'<{yourDomain}>'
);
}
Auth.prototype.getProfile = function() {
return privateStore.profile;
};
Auth.prototype.authn = function() {
// Écouter l’événement authenticated et récupérer le profil
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;
}
// Enregistrer le jeton d’accès seulement au besoin
privateStore.accessToken = accessToken;
privateStore.profile = profile;
// Mettre à jour le DOM
});
});
};
return Auth;
}());`;
## getUserInfo()
`getUserInfo(accessToken, callback)`
Une fois l’utilisateur connecté et en possession d’un jeton, vous pouvez utiliser ce jeton pour récupérer le profil de l’utilisateur avec `getUserInfo`. Cette méthode remplace la méthode obsolète `getProfile()`.
* **accessToken \{String}**: Jeton de l’utilisateur.
* **callback \{Function}**: Sera appelée une fois le profil de l’utilisateur récupéré.
```js lines theme={null}
lock.getUserInfo(accessToken, function(error, profile) {
if (!error) {
alert("hello " + profile.name);
}
});
```
## show()
`show(options)`
La méthode `show` affiche le widget. À partir de la version 10.2.0 de Lock, la méthode `show` peut maintenant accepter un objet `options` comme paramètre. Notez que ce paramètre sert à remplacer les `options` de votre Lock pour cet affichage précis du widget — les options doivent être définies lors de l’instanciation de Lock et remplacées ici seulement au besoin, selon votre cas d’utilisation.
Le sous-ensemble suivant de `options` peut remplacer les valeurs attribuées (ou les valeurs par défaut) lors de l’instanciation de Lock :
* allowedConnections
* auth.params
* allowLogin
* allowSignUp
* allowForgotPassword
* initialScreen
* rememberLastLogin
Pour plus de détails sur la liste complète des options configurables qui peuvent être choisies lors de l’instanciation de Lock, par opposition au sous-ensemble limité ci-dessus qui peut être remplacé dans la méthode `show`, consultez la [page des options configurables par l’utilisateur](/fr-CA/docs/libraries/lock/lock-configuration).
Exemples de remplacement d’options :
```js lines theme={null}
// Afficher le widget Lock sans remplacer aucune option
lock.show();
// Afficher le widget Lock en remplaçant certaines options
lock.show({
allowedConnections: ["twitter", "facebook"],
allowSignUp: false
});
```
Les options doivent être définies lors de la première instanciation de Lock `var lock = new Auth0Lock(clientId, domain, options);`. Les options ne doivent être transmises à `show` que pour remplacer celles que vous avez déjà définies au moment d’afficher le widget, dans ce contexte précis.
Il existe une option supplémentaire qui peut être définie dans la méthode `show`, appelée `flashMessage`.
### flashMessage
Cet objet est disponible uniquement comme option de la méthode `show` et non dans l’objet `options` standard lors de l’instanciation de Lock. L’objet `flashMessage` affiche un message flash d’erreur ou de réussite lorsque Lock est affiché. Il comporte les paramètres suivants :
* **type** \{String}: Le type de message; il doit être `error` ou `success`.
* **text** \{String}: Le texte à afficher.
```js lines theme={null}
lock.show({
flashMessage:{
type: 'success',
text: 'Amazing Success!!'
}
});
```
Une utilisation concrète de l’option `flashMessage` consiste à traiter les erreurs d’autorisation. Le `flashMessage` peut contenir le texte décrivant l’erreur.
```js lines theme={null}
lock.on('authorization_error', function(error) {
lock.show({
flashMessage: {
type: 'error',
text: error.errorDescription
}
});
});
```
Ainsi, si `tester@example.com` essaie maintenant de se connecter, comme il s’agit d’un utilisateur bloqué, l’utilisateur verra de nouveau Lock, avec une barre supérieure affichant le message d’erreur, au lieu que la connexion échoue simplement et que Lock se ferme.
## hide()
`hide()`
La méthode `hide` ferme le widget s’il est actuellement ouvert. Le widget se ferme de lui-même dans la plupart des cas; cette méthode est donc principalement utilisée dans des cas précis. Par exemple, vous pourriez vouloir écouter l’événement `unrecoverable_error`, puis appeler `hide` sur Lock et rediriger l’utilisateur vers une page d’erreur personnalisée. Autre exemple : les utilisateurs qui implémentent le [mode popup](/fr-CA/docs/libraries/lock/lock-authentication-modes) peuvent devoir `hide` manuellement le widget après le déclenchement de l’événement `authenticated`.
Exemple d’utilisation pour masquer (fermer) le widget Lock en mode popup :
```js lines theme={null}
// Écouter l'événement authenticated et masquer Lock
lock.on("authenticated", function() {
lock.hide();
// Tout autre traitement à effectuer lors de l'événement authenticated
});
```
## on()
Lock émet des événements tout au long de son cycle de vie. La méthode `on` permet d’écouter des événements précis et d’y réagir.
* `show` : émis lorsque Lock est affiché. N’a aucun argument.
* `hide` : émis lorsque Lock est masqué. N’a aucun argument.
* `unrecoverable_error` : émis lorsqu’une erreur irrécupérable se produit, par exemple lorsqu’aucune connexion n’est disponible. L’erreur est le seul argument.
* `authenticated` : émis après une authentification réussie. Le résultat de l’authentification est le seul argument. Ce résultat contient le jeton, qui peut être utilisé pour obtenir le profil de l’utilisateur ou être stocké pour lui permettre d’ouvrir une session lors de vérifications ultérieures.
* `authorization_error` : émis lorsque l’autorisation échoue. L’erreur est le seul argument.
* `hash_parsed` : chaque fois qu’un nouvel objet Auth0Lock est initialisé en mode redirection (par défaut), il tente d’analyser le fragment hash de l’URL pour y trouver le résultat d’une tentative de connexion. Il s’agit d’un événement de bas niveau destiné aux cas d’utilisation avancés; il est préférable d’utiliser `authenticated` et `authorization_error` lorsque c’est possible. Ensuite, cet événement est émis avec `null` s’il ne trouve rien dans le hash. Il est émis avec le même argument que l’événement `authenticated` après une connexion réussie, ou avec le même argument que `authorization_error` si un problème survient. Cet événement n’est pas émis en [mode popup](/fr-CA/docs/libraries/lock/lock-authentication-modes), car il n’est pas nécessaire d’analyser le fragment hash de l’URL.
* `forgot_password ready` : émis lorsque l’écran « Mot de passe oublié » est affiché. (Seulement dans la version >`10.18`)
* `forgot_password submit` : émis lorsque l’utilisateur clique sur le bouton de soumission de l’écran « Mot de passe oublié ». (Seulement dans la version >`10.14`)
* `signin ready` : émis lorsque l’écran « Se connecter » est affiché.
* `signup ready` : émis lorsque l’écran « S’inscrire » est affiché.
* `signin submit` : émis lorsque l’utilisateur clique sur le bouton de soumission de l’écran « Connexion ». (Seulement dans la version >`10.18`)
* `signup submit` : émis lorsque l’utilisateur clique sur le bouton de soumission de l’écran « S’inscrire ». (Seulement dans la version >`10.18`)
* `federated login` : émis lorsque l’utilisateur clique sur un bouton de connexion sociale. Le nom de la connexion et la stratégie sont passés en arguments. (Seulement dans la version >`10.18`)
* `socialOrPhoneNumber ready` : émis lorsque l’écran Passwordless avec Social + numéro de téléphone est affiché
* `socialOrPhoneNumber submit` : émis lorsque l’écran Passwordless avec Social + numéro de téléphone est soumis
* `socialOrEmail ready` : émis lorsque l’écran Passwordless avec Social + courriel est affiché
* `socialOrEmail submit` : émis lorsque l’écran Passwordless avec Social + courriel est soumis
* `vcode ready` : émis lorsque l’écran Passwordless avec le mot de passe à usage unique est affiché
* `vcode submit` : émis lorsque l’écran Passwordless avec le mot de passe à usage unique est soumis
L’écouteur de l’événement `authenticated` reçoit un seul argument, un objet `authResult`. Cet objet contient les propriétés suivantes : `accessToken`, `idToken`, `state`, `refreshToken` et `idTokenPayload`.
Voici un exemple d’utilisation de l’événement `authenticated` :
export const codeExample2 = `var Auth = (function() {
var privateStore = {};
function Auth() {
this.lock = new Auth0Lock(
'<{yourClientId}>',
'<{yourDomain}>'
);
}
Auth.prototype.getProfile = function() {
return privateStore.profile;
};
Auth.prototype.authn = function() {
// Écouter l'événement authenticated
this.lock.on("authenticated", function(authResult) {
// Utiliser le jeton contenu dans authResult pour getUserInfo() et l'enregistrer au besoin
this.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Gérer l'erreur
return;
}
privateStore.profile = profile;
});
});
};
return Auth;
}());`;
## resumeAuth()
Cette méthode peut uniquement être utilisée lorsque vous réglez l’option [auth.autoParseHash](/fr-CA/docs/libraries/lock/lock-configuration) sur `false`. Vous devez appeler `resumeAuth` pour terminer le flux d’authentification. Cette méthode est utile si vous utilisez un routeur côté client qui se sert de `#` pour gérer les URL (angular2 avec `useHash`, ou react-router avec `hashHistory`).
* **hash** \{String}: Le fragment de hash reçu lors de la redirection.
* **callback** \{Function}: Est appelée une fois l’analyse terminée. Elle reçoit une erreur (s’il y en a une) comme premier argument et le résultat de l’authentification comme deuxième argument. Si aucun hash n’est disponible, les deux arguments ont la valeur `null`.
```js lines theme={null}
lock.resumeAuth(hash, function(error, authResult) {
if (error) {
alert("Could not parse hash");
}
//Ceci est un exemple seulement; vous ne devriez pas consigner les jetons d'accès en production.
console.log(authResult.accessToken);
});
```
## checkSession()
La méthode `checkSession` vous permet d’obtenir un nouveau jeton d’Auth0 pour un utilisateur déjà authentifié auprès d’Auth0 pour votre domaine. Elle accepte les paramètres suivants :
* **options** \{Object}: Facultatif. Accepte tout paramètre OAuth2 valide qui serait normalement envoyé à `/authorize`. Si vous l’omettez, la méthode utilisera ceux fournis lors de l’initialisation d’Auth0.
* **callback** \{Function}: Est appelée avec le résultat du renouvellement du jeton. Reçoit une erreur (s’il y a lieu) comme premier argument et le résultat de l’authentification comme second argument.
```js lines theme={null}
lock.checkSession({}, function(err, authResult) {
// gérer l'erreur ou les nouveaux tokens
});
```
## logout()
Déconnecte l’utilisateur.
* **options** \{Object}: Ce paramètre est facultatif et suit les mêmes règles que logout() dans auth0.js.
```js lines theme={null}
lock.logout({
returnTo: 'https://myapp.com/bye-bye'
});
```