Référence de l’API Lock

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() method section!

• new Auth0Lock - Instanciation du Lock

• getUserInfo() - Obtention du profil d’un utilisateur connecté

• show() - Affichage du gadget logiciel Lock

• on() - Écoute des événements

• resumeAuth() - À utiliser pour compléter le flux d’authentification lorsque autoParseHash est false

• checkSession() - Obtenir un nouveau jeton depuis Auth0 pour un utilisateur authentifié

• logout() - Déconnexion de l’utilisateur

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

• 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 for details.

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

lock.getUserInfo(accessToken, function(error, profile) {
  if (!error) {
    alert("hello " + profile.name);
  }
});

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.

Exemples de remplacement des options :

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

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.

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.

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()

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 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 :

// Listen for authenticated event and hide Lock
lock.on("authenticated", function() {
  lock.hide();

  // Whatever else you'd like to do on authenticated event

});

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

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;
}());

This method can only be used when you set the auth.autoParseHash 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.

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);
});

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.

lock.checkSession({}, function(err, authResult) {
  // handle error or new tokens
});

Déconnecte l’utilisateur.

• options {Object}: facultatif, suit les mêmes règles que auth0.js logout().

lock.logout({
  returnTo: 'https://myapp.com/bye-bye'
});