Lock pour le Web

Lock est un type de connexion intégrable qui peut être configuré selon vos besoins et est recommandé pour une utilisation avec des applications monopages, de préférence conjointement avec la Connexion universelle, qu’il est conseillé d’utiliser en priorité. Lock vous permet d’ajouter facilement des fournisseurs d’identité sociale, de sorte que vos utilisateurs puissent se connecter de manière transparente en utilisant n’importe quel fournisseur souhaité.

Vous pouvez installer Lock de différentes façons. Sélectionnez l’une des sources d’installation suivantes convenant le mieux à votre environnement et à votre application.

Installer via npm : npm install auth0-lock

Installer via bower :

bower install auth0-lock

Inclure via notre CDN (remplacez .x et .y par les numéros de version mineure et de correctif les plus récents à partir du référentiel Lock Github :

Version mineure la plus récente : <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>

Il est recommandé que les applications de production utilisent une version spécifique de correctif, ou au moins une version mineure spécifique. Quelle que soit la méthode d’inclusion de Lock, il est recommandé de verrouiller la version et de la mettre à jour manuellement uniquement, afin de garantir que ces mises à jour n’affectent pas négativement votre implémentation. Consultez le référentiel GitHub pour une liste à jour des versions.

Si vous visez des audiences mobiles, Auth0 conseille d’ajouter la balise meta suivante à le head de votre application :

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

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 le regrouper avec toutes ses dépendances. Des exemples sont disponibles pour Browserify et webpack.

Incorporer Lock dans votre application nécessite une authentification cross-origin pour une configuration appropriée. Vous devez notamment définir la propriété Origines Web autorisées sur le domaine effectuant la requête. Vous pouvez trouver ce champ dans les Application Settings (Paramètres d’application).

Assurez-vous de lire concernant les limites de l’authentification inter-origine avant de mettre en place une connexion intégrée avec Lock.

Vous devrez d’abord initialiser un nouvel objet Auth0Lock et lui donner votre ID client Auth0 (l’ID client unique pour chaque application Auth0, que vous pouvez obtenir du Management Dashboard) et votre domaine Auth0 (par exemple, yourname.auth0.com).

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);

Ensuite, écoutez en utilisant la méthode on pour l’événement authentifié. Lorsque l’événement survient, utilisez le accessToken reçu pour appeler la méthode getUserInfo et acquérir les informations du profil de l’utilisateur (selon les besoins).

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

        //we recommend not storing Access Tokens unless absolutely necessary
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

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

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

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

<h2>Bienvenue <span id="nick" class="nickname"></span></h2>

Notez que si vous stockez le profil utilisateur, vous voudrez appliquer JSON.stringify à l’objet du profil, puis, lors d’une utilisation ultérieure, lui appliquer un JSON.parse, car il devra être stocké en localStorage en tant que chaîne plutôt que d’objet JSON.

Vous affichez ici le gadget logiciel Lock après que l’utilisateur ait cliqué sur un bouton de connexion. Vous pouvez tout aussi bien afficher Lock automatiquement lors de l’arrivée sur une page en utilisant simplement lock.show();.

Cela affichera le gadget logiciel Lock, et associé à ce qui précède, vous êtes désormais prêt à gérer les connexions.

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});

Le mode sans mot de passe de Lock est disponible uniquement dans Lock v11.2.0 et versions ultérieures. Nous vous conseillons d’utiliser la dernière version de Lock pour cette fonctionnalité!

Vous pouvez utiliser le mode sans mot de passe de Lock pour permettre aux utilisateurs de s’authentifier en utilisant uniquement un courriel ou un numéro de téléphone cellulaire. Ils recevront le code et ensuite le saisiront, ou cliqueront sur le lien, et ils pourront être authentifiés sans avoir à se souvenir d’un mot de passe.

Pour mettre en œuvre le mode sans mot de passe dans Lock, initialisez Lock d’une manière légèrement différente avec Auth0LockPasswordless plutôt que Auth0Lock :

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

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

Pour indiquer le type de connexion que vous souhaitez, vous initialisez Lock avec l’option allowedConnections, avec email ou sms comme valeur :

var passwordlessOptions = {
  allowedConnections: ['sms']
}

N’oubliez pas d’activer la connexion sans mot de passe de votre choix dans Dashboard, sous Connexions > Sans mot de passe, puis de l’activer pour votre application; ainsi, lorsque Lock essaye de l’utiliser, elle est déjà configurée et associée à l’application.

Si vous décidez d’utiliser email, vous devez sélectionner une autre option si vous souhaitez que vos utilisateurs reçoivent un code à saisir ou un «  lien magique » à utiliser. Il s’agit de l’option passwordlessMethod, qui prend les valeurs de code ou link.

var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code'
}

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

Les applications avec connexion intégrée doivent remplir deux critères afin de bénéficier de l’Authentification unique (SSO).

1. Les deux applications tentant d’utiliser la SSO doivent être des applications de première partie. La SSO avec des applications tierces ne fonctionnera pas.

2. Elles doivent utiliser des domaines personnalisés et avoir à la fois les applications qui souhaitent bénéficier de la SSO et le locataire Auth0 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 en question, ainsi que pour votre client Auth0, ce qui évite le risque d’attaques CSRF (Cross-Site Request Forgery).

Nous recommandons d’utiliser une connexion universelle au lieu de configurer la SSO dans des scénarios de connexion intégrée. La connexion universelle est la manière la plus fiable et stable de mettre en place la SSO, et c’est la seule option si vous devez utiliser plusieurs domaines pour vos applications, ou si vous utilisez des applications tiers.

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

La description de l’erreur est lisible par un humain. Elle ne doit pas être analysée par un code et peut changer à tout moment.

La compatibilité des navigateurs est assurée pour Chrome, Safari, Firefox et IE >= 10. Auth0 utilise actuellement zuul et Saucelabs pour exécuter des tests d’intégration à chaque sortie.

• Référence de l’API Lock
• Options de configuration de Lock