Lock pour le Web

Un widget qui offre une expérience de connexion et d’inscription simple et 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-origines, sauf si vous configurez un domaine personnalisé pour votre locataire. L’authentification inter-origines utilise des cookie 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 selon votre environnement et votre application.

Sources d’installation

Installez avec npm : npm install auth0-lock

Installez avec bower :

bower install auth0-lock

Ajoutez-le à l’aide de notre CDN (remplacez .x et .y par les numéros de version mineure et de correctif les plus récents du dépôt GitHub de Lock) :

Version mineure la plus récente :<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>Version de correctif la plus récente : <script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>

Il est recommandé que les applications en production utilisent une version de correctif précise, ou au minimum une version mineure précise. Quelle que soit la méthode utilisée pour inclure Lock, il est recommandé de fixer la version et de ne la mettre à jour que manuellement, afin de s’assurer que ces mises à jour n’aient pas d’effet négatif sur votre implémentation. Consultez le dépôt GitHub pour obtenir la liste à jour des versions.

Mobile

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

Regroupement des dépendances

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

Authentification inter-origines

La connexion intégrée pour les applications Web utilise l’authentification inter-origines, sauf si vous configurez un domaine personnalisé pour votre locataire. L’authentification inter-origines 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-origines soit correctement configurée. Plus précisément, vous devez définir la propriété Allowed Web Origins sur le domaine d’où provient la demande. Vous trouverez ce champ dans les paramètres de l’application.

Utilisation

Étape 1. Initialisation de Lock

Commencez par initialiser un nouvel objet Auth0Lock et lui fournir votre ID client Auth0 (l’ID client unique de chaque application Auth0, que vous pouvez obtenir dans l’Auth0 Dashboard) ainsi que votre domaine Auth0 (par exemple yourname.auth0.com).

Étape 2. Authentification et obtention des renseignements sur l’utilisateur

Ensuite, écoutez l’événement authenticated à l’aide de la méthode on. Lorsqu’il se produit, 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 manipuler le contenu de la page et afficher à l’utilisateur des renseignements de 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 appliquer JSON.stringify à l’objet de profil, puis, lorsque vous l’utiliserez plus tard, JSON.parse, car il devra être stocké dans localStorage sous forme de chaîne de caractères 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 en utilisant simplement lock.show(); au chargement de celle-ci.

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

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

Passwordless

Le mode Passwordless de Lock est offert uniquement dans Lock v11.2.0 et les versions ultérieures. Veuillez utiliser la dernière version de Lock pour profiter de cette fonctionnalité!

Vous pouvez utiliser le mode Passwordless de Lock pour permettre aux utilisateurs de s’authentifier uniquement avec une adresse courriel ou un numéro de téléphone mobile. Ils recevront alors le code, puis reviendront le saisir, ou cliqueront sur le lien, et pourront être authentifiés sans avoir à mémoriser un mot de passe.

Dans Lock, pour implémenter le mode Passwordless, vous initialisez Lock d’une façon légèrement différente, avec Auth0LockPasswordless plutôt qu’avec Auth0Lock :

Options de Passwordless

De plus, le mode Passwordless de Lock offre quelques options de configuration qui lui sont propres.

Pour indiquer le type de connexion souhaité, 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 Passwordless de votre choix dans le Auth0 Dashboard, sous Connexions -> Passwordless, puis de l’activer pour votre application afin que, lorsque Lock essaie de l’utiliser, elle soit déjà configurée et associée à l’application.

Si vous choisissez d’utiliser email, vous avez une option supplémentaire à sélectionner : déterminer si vos utilisateurs recevront un code à saisir ou un “lien magique” à utiliser. Cela se configure à l’aide de l’option passwordlessMethod, qui accepte les valeurs code ou link.

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

Exemple de Passwordless

Authentification unique avec authentification intégrée

Les applications qui utilisent une connexion intégrée doivent remplir deux critères pour pouvoir offrir l’authentification unique (SSO).

1. Les deux applications qui tentent d’utiliser le SSO doivent être des applications de première partie. Le SSO avec des applications tierces ne fonctionnera pas.
2. Elles doivent utiliser des domaines personnalisés et faire en sorte que les applications qui doivent utiliser le SSO ainsi que le locataire Auth0 se trouvent 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 concernées ainsi que pour votre locataire Auth0, évitant ainsi le risque d’attaques CSRF.

Nous vous recommandons d’utiliser Universal Login au lieu de configurer le SSO dans des scénarios de connexion intégrée. Universal Login est la façon la plus fiable et la plus stable d’effectuer le SSO, et c’est la seule façon d’y parvenir si vous devez utiliser plusieurs domaines pour vos applications ou des applications tierces.

Codes d’erreur et descriptions

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

La description de l’erreur est lisible 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 requête non valide. Les champs requis sont uniquement client_id, credential_type, username, otp et realm.
401	unauthorized_client	Connexion interorigine non autorisée.
400	unsupported_credential_type	Paramètre de type d’identifiant inconnu.
400	invalid_request	Realm « non-existent-connection » inconnu.
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é dans une fuite de données (mais 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