> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Référence de l’API Lock
> Détails sur l’API Lock v11.
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 has many methods, features, and configurable options. This reference is designed to direct you to the ones that you need, and discuss how to use them. Click below to go straight the method you’re looking for, or just browse! If you’re looking for information about events emitted by Lock, they’re listed under the [on()](#on-) method section!
* [new Auth0Lock](#auth0lock) - Instanciation du Lock
* [getUserInfo()](#getuserinfo-) - Obtention du profil d’un utilisateur connecté
* [show()](#show-) - Affichage du gadget logiciel Lock
* [on()](#on-) - Écoute des événements
* [resumeAuth()](#resumeauth-) - À utiliser pour compléter le flux d’authentification lorsque `autoParseHash` est false
* [checkSession()](#checksession-) - Obtenir un nouveau jeton depuis Auth0 pour un utilisateur authentifié
* [logout()](#logout-) - Déconnexion de 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 [Auth0](https://manage.auth0.com/#/) Dashboard. Le troisième paramètre, facultatif, est un objet `options` utilisé pour configurer Lock en fonction des besoins de votre application. Vous trouverez ces informations dans vos [paramètres d’application](https://manage.auth0.com/#/applications).
* **clientId `{String}`**: Required parameter. Your application’s clientId in Auth0.
* **domain `{String}`**: paramètre obligatoire. Votre domaine Auth0. En général, il s’agit de your-account.auth0.com.
* **options `{Object}`**: Optional parameter. Allows for the configuration of Lock’s appearance and behavior. See [the configuration options page](/docs/fr-ca/libraries/lock/lock-configuration) for details.
export const codeExample1 = `var Auth = (function() {
var privateStore = {};
function Auth() {
// Instantiate Lock - without custom options
this.lock = new Auth0Lock(
'<{yourClientId}>',
'<{yourDomain}>'
);
}
Auth.prototype.getProfile = function() {
return privateStore.profile;
};
Auth.prototype.authn = function() {
// Listening for the authenticated event and get profile
this.lock.on("authenticated", function(authResult) {
// Use the token in authResult to getUserInfo() and save it if necessary
this.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Handle error
return;
}
//save Access Token only if necessary
privateStore.accessToken = accessToken;
privateStore.profile = profile;
// Update DOM
});
});
};
return Auth;
}());`;
## getUserInfo()
`getUserInfo(accessToken, callback)`
Once the user has logged in and you are in possession of a token, you can use that token to obtain the user’s profile with `getUserInfo`. This method replaces the deprecated `getProfile()`.
* **accessToken `{String}`**: jeton utilisateur.
* **callback {Function}**: sera invoqué après récupération du profil utilisateur.
```javascript lines theme={null}
lock.getUserInfo(accessToken, function(error, profile) {
if (!error) {
alert("hello " + profile.name);
}
});
```
## show()
`show(options)`
The `show` method displays the widget. Beginning with Lock version 10.2.0, the `show` method can now accept an `options` object as a parameter. Note that this parameter is meant to be used as a way to override your Lock’s `options` for this particular displaying of the widget - options should be set when instantiating Lock, and overridden, only if needed for your specific use case, here.
Le sous-ensemble suivant d’`options` doit être remplacé par les valeurs qui leur ont été attribuées (ou leurs 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`, veuillez consulter [la page des options configurables de l’utilisateur](/docs/fr-ca/libraries/lock/lock-configuration).
Exemples de remplacement des options :
```javascript lines theme={null}
// Show the Lock widget, without overriding any options
lock.show();
// Show the Lock widget, overriding some 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 les options précédemment définies lors de l’affichage du gadget logiciel à ce moment et à cet endroit précis.
Il existe une option supplémentaire qui peut être définie dans la méthode `show` appelée `flashMessage`.
### flashMessage
L’objet n’est disponible comme option que pour la méthode `show`; il n’est pas disponible avec l’objet `options` normal lors de l’instanciation de Lock. L’objet `flashMessage` affiche un message flash d’erreur ou de réussite lors de l’affichage du Lock. Il possède les paramètres suivants :
* **type** `{String}`: le type de message, qui doit être soit `error`, soit `success`.
* **text** `{String}`: Le texte à afficher.
```javascript lines theme={null}
lock.show({
flashMessage:{
type: 'success',
text: 'Amazing Success!!'
}
});
```
Une application pratique de l’option `flashMessage` consiste à gérer les erreurs d’autorisation. L’option `flashMessage` peut être remplie avec le texte de description de l’erreur.
```javascript lines theme={null}
lock.on('authorization_error', function(error) {
lock.show({
flashMessage: {
type: 'error',
text: error.errorDescription
}
});
});
```
Ainsi, si `tester@example.com` essayait maintenant de se connecter, en tant qu’utilisateur bloqué, l’utilisateur verrait s’afficher à nouveau Lock, avec une barre supérieure affichant le message d’erreur, plutôt que de simplement échouer à se connecter et de fermer Lock.
## hide()
`hide()`
La méthode `hide` ferme le gadget logiciel s’il est actuellement ouvert. Le gadget logiciel se ferme de lui-même dans la plupart des cas, de sorte que cette méthode ne devrait être invoquée que dans des cas d’utilisation précis. Par exemple, on peut souhaiter écouter l’événement `unrecoverable_error`, puis `hide` le Lock et rediriger vers sa propre page d’erreur personnalisée. Un autre exemple concerne les utilisateurs qui mettent en œuvre le [mode popup](/docs/fr-ca/libraries/lock/lock-authentication-modes) et qui pourraient avoir besoin de `hide` manuellement le gadget logiciel après que l’événement `authenticated` s’est déclenché.
Exemple d’utilisation pour cacher (fermer) le gadget logiciel Lock en mode popup :
```javascript lines theme={null}
// Listen for authenticated event and hide Lock
lock.on("authenticated", function() {
lock.hide();
// Whatever else you'd like to do on authenticated event
});
```
## on()
Lock émet des événements au cours de son cycle de vie. La méthode `on` peut être utilisée pour écouter des événements particuliers et y réagir.
* `show`: émis lorsque Lock est affiché. N’a pas d’arguments.
* `hide`: émis lorsque le lock est caché. N’a pas d’arguments.
* `unrecoverable_error`: émis en cas d’erreur irrécupérable, par exemple lorsqu’aucune connexion n’est disponible. L’erreur est le seul argument.
* `authenticated`: emitted after a successful authentication. Has the authentication result as the only argument. The authentication result contains the token which can be used to get the user’s profile or stored to log them in on subsequent checks.
* `authorization_error`: émis lorsque l’autorisation échoue. L’erreur est le seul argument.
* `hash_parsed`: every time a new Auth0Lock object is initialized in redirect mode (the default), it will attempt to parse the hash part of the url looking for the result of a login attempt. This is a low level event for advanced use cases and `authenticated` and `authorization_error` should be preferred when possible. After that this event will be emitted with `null` if it couldn’t find anything in the hash. It will be emitted with the same argument as the `authenticated` event after a successful login or with the same argument as `authorization_error` if something went wrong. This event won’t be emitted in [popup mode](/docs/fr-ca/libraries/lock/lock-authentication-modes) because there is no need to parse the url’s hash part.
* `forgot_password ready`: émis lorsque l’écran « Mot de passe oublié » est affiché. (Uniquement dans la version > `10.18`)
* `forgot_password submit`: emitted when the user clicks on the submit button of the "Forgot password" screen. (Only in Version >`10.14`)
* `signin ready`: émis lorsque l’écran « Inscription » s’affiche.
* `signup ready`: émis lorsque l’écran « Inscription » s’affiche.
* `signin submit`: émis lorsque l’utilisateur clique sur le bouton d’envoi de l’écran « Connexion ». (Uniquement dans la version > `10.18`)
* `signup submit`: émis lorsque l’utilisateur clique sur le bouton de soumission de l’écran « Inscription ». (Uniquement dans la version > `10.18`)
* `federated login`: émis lorsque l’utilisateur clique sur un bouton de connexion par réseau social. A pour arguments le nom de la connexion et la stratégie. (Uniquement dans la version > `10.18`)
* `socialOrPhoneNumber ready`: émis lorsque l’écran Passwordless avec Social + Phone Number est affiché.
* `socialOrPhoneNumber submit`: émis lorsque l’écran Passwordless avec Social + Phone Number est soumis.
* `socialOrEmail ready`: émis lorsque l’écran Passwordless avec Social + Email est affiché.
* `socialOrEmail submit`: émis lorsque l’écran Passwordless avec Social + Email est soumis
* `vcode ready`: émis lorsque l’écran Passwordless avec mot de passe à usage unique est affiché
* `vcode submit`: émis lorsque l’écran Passwordless avec mot de passe à usage unique est soumis
L’écouteur d’événements `authenticated` a un seul argument, un objet `authResult`. Cet objet contient les propriétés suivantes : `accessToken`, `idToken`, `state`, `refreshToken` et `idTokenPayload`.
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() {
// Listening for the authenticated event
this.lock.on("authenticated", function(authResult) {
// Use the token in authResult to getUserInfo() and save it if necessary
this.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Handle error
return;
}
privateStore.profile = profile;
});
});
};
return Auth;
}());`;
## resumeAuth()
This method can only be used when you set the [auth.autoParseHash](/docs/fr-ca/libraries/lock/lock-configuration) option to `false`. You’ll need to call `resumeAuth` to complete the authentication flow. This method is useful when you’re using a client-side router that uses a `#` to handle urls (angular2 with `useHash`, or react-router with `hashHistory`).
* **hash** `{String}`: le fragment de hachage reçu de la redirection.
* **callback** {Function}: sera invoqué une fois l’analyse terminée. Le premier argument est une erreur (le cas échéant) et le second est le résultat de l’authentification. S’il n’y a pas de hash disponible, les deux arguments seront `null`.
```javascript lines theme={null}
lock.resumeAuth(hash, function(error, authResult) {
if (error) {
alert("Could not parse hash");
}
//This is just an example; you should not log Access Tokens in production.
console.log(authResult.accessToken);
});
```
## checkSession()
La méthode `checkSession` vous permet d’acquérir un nouveau jeton auprès d’Auth0 pour un utilisateur qui est déjà authentifié auprès d’Auth0 pour votre domaine. Elle prend les paramètres suivants :
* **options** `{Object}`: Optional. Accepts any valid OAuth2 parameters that would normally be sent to `/authorize`. Si vous les oubliez, les paramètres utilisés seront ceux fournis au moment de l’initialisation d’Auth0.
* **callback** {Function}: sera invoqué avec le résultat du renouvellement du jeton. Le premier argument est une erreur (le cas échéant) et le second est le résultat de l’authentification.
```javascript lines theme={null}
lock.checkSession({}, function(err, authResult) {
// handle error or new tokens
});
```
## logout()
Déconnecte l’utilisateur.
* **options** `{Object}`: facultatif, suit les mêmes règles que auth0.js logout().
```javascript lines theme={null}
lock.logout({
returnTo: 'https://myapp.com/bye-bye'
});
```