Lock for Web

Un widget qui offre une expérience de connexion et d’inscription fluide pour vos applications Web.

Lock est un formulaire de connexion intégrable que vous pouvez configurer selon vos besoins. Lock vous permet d’ajouter facilement des fournisseurs d’identité sociaux, afin que vos utilisateurs puissent se connecter en toute simplicité avec le fournisseur de leur choix.

La connexion intégrée pour les applications Web utilise l’authentification inter-origine, sauf si vous configurez un domaine personnalisé pour votre tenant. L’authentification inter-origine utilise des cookies tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.

Installation de Lock

Vous pouvez installer Lock de plusieurs façons. Choisissez l’une des sources d’installation suivantes qui convient le mieux à votre environnement et à votre application.

Sources d’installation

Installez avec npm : npm install auth0-lock

Installez avec bower :

bower install auth0-lock

Ajoutez-le via notre CDN (remplacez .x et .y par les numéros de la plus récente version mineure et du plus récent correctif indiqués dans le dépôt GitHub de Lock) :

Dernière version mineure :<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>

Nous recommandons aux applications en production d’utiliser une version de correctif précise ou, à tout le moins, une version mineure précise. Quelle que soit la méthode utilisée pour inclure Lock, nous recommandons de figer la version et de la mettre à jour manuellement seulement, afin de vous assurer que ces mises à jour n’ont pas d’incidence négative sur votre mise en œuvre. Consultez le dépôt GitHub pour obtenir la liste à jour des versions publiées.

Mobile

Si vous ciblez les utilisateurs sur mobile, 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"/>

Regrouper les dépendances

Si vous utilisez browserify ou webpack pour compiler votre projet et regrouper ses dépendances, après avoir installé le module auth0-lock, vous devrez créer un bundle qui l’inclut avec toutes ses dépendances. Des exemples sont disponibles pour Browserify et webpack.

Authentification inter-origine

La connexion intégrée pour les applications web utilise l’authentification inter-origine, sauf si vous configurez un domaine personnalisé pour votre tenant. L’authentification inter-origine utilise des cookies tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.

L’intégration de Lock à votre application exige que l’authentification inter-origine soit correctement configurée. Plus précisément, vous devez définir la propriété Origines Web autorisées sur le domaine qui effectue la requête. Vous trouverez ce champ dans les Paramètres de l’application.

Utilisation

Étape 1. Initialisation de Lock

Vous devez d’abord initialiser un nouvel objet Auth0Lock et lui fournir votre Auth0 ID client (l’ID client unique de chaque application Auth0, que vous pouvez obtenir dans le tableau de bord de gestion), ainsi que votre domaine Auth0 (par exemple yourname.auth0.com).

Étape 2. Authentifier l’utilisateur et obtenir ses renseignements

Ensuite, écoutez l’événement authenticated à l’aide de la méthode on. Lorsque l’événement est déclenché, utilisez le accessToken reçu pour appeler la méthode getUserInfo et obtenir les renseignements du profil de l’utilisateur (au besoin).

Vous pouvez ensuite modifier le contenu de la page et afficher à l’utilisateur les informations de son 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 convertir l’objet de profil avec JSON.stringify, puis, lorsque vous l’utiliserez plus tard, le reconvertir avec JSON.parse, puisqu’il doit être stocké dans localStorage sous forme de chaîne plutôt que comme objet JSON.

Étape 3. Afficher Lock

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 simplement en utilisant lock.show(); au chargement de la page.

Cela affichera le widget Lock et, avec ce qui précède, vous êtes maintenant prêt à gérer les connexions!

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

Sans mot de passe

Le mode sans mot de passe de Lock est offert uniquement dans Lock v11.2.0 et les versions ultérieures. Veuillez 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 uniquement à l’aide d’une adresse courriel ou d’un numéro de téléphone mobile. Ils recevront un code qu’ils saisiront ensuite, ou cliqueront sur le lien reçu, et pourront ainsi s’authentifier sans avoir à mémoriser un mot de passe.

Dans Lock, pour mettre en œuvre le mode sans mot de passe, vous initialisez Lock d’une façon légèrement différente, avec Auth0LockPasswordless plutôt qu’avec Auth0Lock :

Options du mode sans mot de passe

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

Pour indiquer le type de connexion que vous souhaitez utiliser, initialisez Lock avec l’option allowedConnections, en lui attribuant la valeur email ou sms :

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

N’oubliez pas d’activer la connexion sans mot de passe de votre choix dans le Dashboard, sous Connections -> Passwordless, puis de l’activer pour votre application afin que, lorsque Lock essaie de l’utiliser, elle soit déjà configurée et liée à l’application.

Si vous choisissez d’utiliser email, vous avez une option supplémentaire : vous devez déterminer si vous souhaitez que vos utilisateurs reçoivent un code à saisir ou un “lien magique” à utiliser. Cela se fait à l’aide de l’option passwordlessMethod, qui accepte les valeurs code ou link.

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

Exemple d’utilisation de Passwordless

Single Sign-On avec authentification intégrée

La connexion intégrée prend en charge le Single Sign-on (SSO) lorsque vos applications présentent l’architecture suivante :

• Les applications qui utilisent le SSO sont des applications de première partie. Le partage de sessions intégrées avec des applications tierces n’est pas pris en charge.
• Les applications et votre tenant Auth0 partagent un domaine de premier niveau grâce à un domaine personnalisé. Par défaut, les domaines Auth0 suivent le format example.auth0.com. Les domaines personnalisés permettent à vos applications et à votre tenant Auth0 de partager le même domaine de premier niveau, ce qui contribue aussi à prévenir les attaques CSRF.

Si votre architecture répond à ces critères, le SSO intégré avec Lock est une bonne solution. Universal Login gère automatiquement le SSO entre plusieurs domaines ou avec des applications tierces grâce à sa couche de session. Les deux peuvent coexister dans une même application (par exemple, Universal Login pour la connexion principale et Lock pour l’inscription intégrée de facteurs ou les flux d’authentification renforcée). Pour comparer les compromis, consultez Connexion hébergée ou connexion intégrée.

Codes d’erreur et descriptions

Lorsque Lock est utilisé pour la connexion intégrée, il utilise le endpoint /co/authenticate, qui peut renvoyer les erreurs suivantes.

La description de l’erreur est rédigée pour être comprise 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 la requête invalide. Tous les paramètres suivants, et seulement ceux-ci, sont requis : client_id, credential_type, username, otp, realm.
401	unauthorized_client	Connexion inter-origine non autorisée.
400	unsupported_credential_type	Paramètre de type d’identifiant inconnu.
400	invalid_request	Realm inconnu : non-existent-connection.
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é lors d’une atteinte à la sécurité des données (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.

Compatibilité des navigateurs

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

En savoir plus

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