Skip to main content
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é.
La connexion intégrée pour le web utilise la Cross Origin Authentication (Authentification d’origine croisée). Dans certains navigateurs cela peut s’avérer peu fiable si vous ne configurez pas un domaine personnaliséet n’hébergez pas votre application dans le même domaine. Si vous ne pouvez pas utiliser des domaines personnalisés, envisagez de migrer vers la Universal Login (Connexion universelle).

​
Installation de Lock

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.

​
Sources d’installation

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.

​
Mobile

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

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

​
Authentification inter-origine

La connexion intégrée pour le web utilise la Cross Origin Authentication (Authentification d’origine croisée). Dans certains navigateurs cela peut s’avérer peu fiable si vous ne configurez pas un domaine personnaliséet n’hébergez pas votre application dans le même domaine. Si vous ne pouvez pas utiliser des domaines personnalisés, envisagez de migrer vers la Universal Login (Connexion universelle).
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.

​
Utilisation

​
1. Initialiser 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).

​
2. Authentification et obtention des informations utilisateur

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

​
3. Affichage de Lock

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

​
Sans mot de passe

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 :

​
Options Sans mot de passe

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'
}

​
Exemple de connexion sans mot de passe

​
Authentification unique avec authentification intégrée

Les applications avec connexion intégrée doivent remplir deux critères afin de bénéficier de l’Authentification unique ().
  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.

​
Codes d’erreur et descriptions

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.
StatutCodeDescription
400invalid_requestCorps de la requête non valide. Tous et seulement client_id, credential_type, username, otp, realm sont requis.
401unauthorized_clientLa connexion interorigine n’est pas autorisée.
400unsupported_credential_typeParamètre de type d’identifiant inconnu.
400invalid_requestDomaine inconnu, connexion inexistante.
403access_deniedCourriel ou mot de passe erroné.
403access_deniedErreur d’authentification
403blocked_userUtilisateur bloqué
401password_leakedCette tentative de connexion a été bloquée parce que le mot de passe que vous utilisez a déjà été divulgué dans le cadre d’une violation de données (pas dans cette application).
429too_many_attemptsVotre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification via votre méthode de contact préférée avec des instructions sur la façon de le débloquer.
429too_many_attemptsNous avons détecté un comportement de connexion suspect et les tentatives suivantes seront bloquées. Veuillez contacter l’administrateur.

​
Compatibilité des navigateurs

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.

​
En savoir plus

⌘I