Lock para Web

Un widget que ofrece una experiencia fluida y sin complicaciones de inicio de sesión y registro para tus aplicaciones web.

Lock es un formulario de inicio de sesión integrable que puede configurarse según sus necesidades. Lock le permite agregar fácilmente proveedores de identidad sociales, para que sus usuarios puedan iniciar sesión sin problemas con el proveedor que prefieran.

El inicio de sesión integrado para aplicaciones web utiliza autenticación entre orígenes a menos que configure un dominio personalizado para su inquilino. La autenticación entre orígenes utiliza cookies de terceros para permitir transacciones de autenticación seguras entre distintos orígenes.

Instalación de Lock

Puede instalar Lock de varias formas. Seleccione cualquiera de las siguientes opciones de instalación que mejor se adapten a su entorno y aplicación.

Fuentes de instalación

Instale con npm: npm install auth0-lock

Instale con bower:

bower install auth0-lock

Inclúyalo a través de nuestro CDN (reemplace .x y .y por los números de la versión minor y patch más recientes del repositorio de GitHub de Lock:

Última versión minor:<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>Última versión patch: <script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>

Se recomienda que las aplicaciones de producción usen una versión patch específica o, como mínimo, una versión minor específica. Independientemente del método que use para incluir Lock, se recomienda fijar la versión y actualizarla solo manualmente, para garantizar que esas actualizaciones no afecten negativamente a su implementación. Consulte el repositorio de GitHub para ver la lista actual de versiones.

Móvil

Si su aplicación está orientada a usuarios de dispositivos móviles, Auth0 recomienda añadir la siguiente metaetiqueta al head de la aplicación:

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

Empaquetar dependencias

Si usas browserify o webpack para compilar tu proyecto y empaquetar sus dependencias, después de instalar el módulo auth0-lock, tendrás que incluirlo en el paquete junto con todas sus dependencias. Hay ejemplos disponibles para Browserify y webpack.

Autenticación entre orígenes

El inicio de sesión integrado para aplicaciones web usa autenticación entre orígenes, a menos que configure un dominio personalizado para su inquilino. La autenticación entre orígenes usa cookies de terceros para permitir transacciones de autenticación seguras entre distintos orígenes.

La integración de Lock en su aplicación requiere que la autenticación entre orígenes esté configurada correctamente. En concreto, debe establecer la propiedad Allowed Web Origins en el dominio que realiza la solicitud. Puede encontrar este campo en Application Settings.

Uso

Paso 1. Inicializar Lock

Primero, deberás inicializar un nuevo objeto Auth0Lock y proporcionarle tu ID de cliente de Auth0 (el ID de cliente único de cada aplicación de Auth0, que puedes obtener en el Dashboard de administración) y tu dominio de Auth0 (por ejemplo, yourname.auth0.com).

Paso 2. Autenticación y obtención de información del usuario

A continuación, escuche el evento authenticated con el método on. Cuando se produzca, use el accessToken recibido para llamar al método getUserInfo y obtener la información del perfil del usuario, según sea necesario.

Luego, puede manipular el contenido de la página y mostrar información del perfil al usuario (por ejemplo, mostrar su nombre en un mensaje de bienvenida).

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

Tenga en cuenta que, si almacena el perfil del usuario, le convendrá aplicar JSON.stringify al objeto de perfil y, cuando vuelva a utilizarlo más adelante, JSON.parse, ya que deberá almacenarse en localStorage como una cadena en lugar de como un objeto JSON.

Paso 3. Mostrar Lock

Aquí muestras el widget Lock después de que el usuario haga clic en un botón de inicio de sesión; también puedes mostrar Lock automáticamente al llegar a una página con solo usar lock.show(); al cargarla.

Esto mostrará el widget Lock y, junto con lo anterior, ya estás listo para gestionar los inicios de sesión.

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

Sin contraseña

El modo sin contraseña de Lock solo está disponible en Lock v11.2.0 y versiones posteriores. Usa la última versión de Lock para esta funcionalidad.

Puedes usar el modo sin contraseña de Lock para permitir que los usuarios se autentiquen usando solo una dirección de correo electrónico o un número de teléfono móvil. Recibirán el code y luego volverán para introducirlo, o harán clic en el enlace, y podrán autenticarse sin necesidad de recordar una contraseña.

En Lock, para implementar el modo sin contraseña, debes inicializar Lock de una forma ligeramente distinta, con Auth0LockPasswordless en lugar de Auth0Lock:

Opciones de inicio de sesión sin contraseña

Además, el modo sin contraseña de Lock tiene un par de opciones de configuración exclusivas.

Para indicar qué tipo de conexión desea usar, inicialice Lock con la opción allowedConnections y establezca email o sms como valor:

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

Recuerde habilitar la conexión sin contraseña que prefiera en el Dashboard, en Connections -> sin contraseña, y luego habilitarla para su aplicación; de ese modo, cuando Lock intente usarla, ya estará configurada y vinculada a la aplicación.

Si decide usar email, tiene una opción adicional para elegir: si desea que sus usuarios reciban un code para introducir o un “enlace mágico” para usar. Esto se configura mediante la opción passwordlessMethod, que acepta los valores code o link.

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

Ejemplo de autenticación sin contraseña

Inicio de sesión único con autenticación embebida

Las aplicaciones con inicio de sesión integrado deben cumplir dos criterios para poder usar inicio de sesión único (SSO).

1. Ambas aplicaciones que intentan usar SSO deben ser aplicaciones de primera parte. El SSO con aplicaciones de terceros no funcionará.
2. Deben usar dominios personalizados, y tanto las aplicaciones que quieran usar SSO como el inquilino de Auth0 deben estar en el mismo dominio. Tradicionalmente, los dominios de Auth0 tienen el formato foo.auth0.com, pero los dominios personalizados le permiten usar el mismo dominio para cada una de las aplicaciones en cuestión, así como para su inquilino de Auth0, lo que evita el riesgo de ataques CSRF.

Nuestra recomendación es usar Universal Login en lugar de configurar SSO en escenarios de inicio de sesión integrado. Universal Login es la forma más fiable y estable de realizar SSO, y es la única manera de hacerlo si debe usar varios dominios para sus aplicaciones o usar aplicaciones de terceros.

Códigos de error y descripciones

Cuando Lock se usa para el inicio de sesión integrado, emplea el endpoint /co/authenticate, que puede devolver los siguientes errores.

La descripción del error es legible para humanos. No debe ser procesada por código alguno y puede cambiar en cualquier momento.

Estado	Código	Descripción
400	invalid_request	Cuerpo de la solicitud no válido. Se requieren todos y solo client_id, credential_type, username, otp y realm.
401	unauthorized_client	No se permite el inicio de sesión entre orígenes.
400	unsupported_credential_type	Parámetro de tipo de credencial desconocido.
400	invalid_request	Realm desconocido: non-existent-connection.
403	access_denied	Correo electrónico o contraseña incorrectos.
403	access_denied	Error de autenticación
403	blocked_user	Usuario bloqueado
401	password_leaked	Este intento de inicio de sesión se ha bloqueado porque la contraseña que estás usando ya se había visto comprometida en una filtración de datos (no en esta aplicación).
429	too_many_attempts	Tu cuenta se ha bloqueado tras varios intentos consecutivos de inicio de sesión. Te hemos enviado una notificación a través de tu método de contacto preferido con instrucciones para desbloquearla.
429	too_many_attempts	Hemos detectado un comportamiento de inicio de sesión sospechoso y se bloquearán más intentos. Ponte en contacto con el administrador.

Compatibilidad de navegadores

La compatibilidad con Chrome, Safari, Firefox e IE >= 10 está garantizada. Actualmente, Auth0 utiliza zuul junto con Saucelabs para ejecutar pruebas de integración con cada envío.

Más información

• Referencia de la API de Lock
• Opciones de configuración de Lock