Seleccionar entre varias opciones de conexión

Cómo seleccionar distintos tipos de conexión para varias opciones de inicio de sesión con Lock V11.

Con Auth0, puede ofrecer a los usuarios múltiples métodos de autenticación. Esto es importante en aplicaciones SaaS o multiinquilino, donde muchas organizaciones usan una sola aplicación. Cada organización puede usar sistemas distintos, como LDAP, Active Directory, Google Workspace o almacenes de nombre de usuario y contraseña.

En Auth0, puede asociar distintas conexiones (métodos de autenticación) a aplicaciones específicas, o directamente a un inquilino (como conexiones de dominio). Cuando un usuario inicia sesión, deberá seleccionarse una de estas conexiones para usarla.

La selección de los Proveedores de identidad adecuados entre varias opciones se denomina “Home Realm Discovery”.

Si usa como máximo una conexión de base de datos y cero o más conexiones sociales, el proceso de selección es sencillo. El usuario hará una de las siguientes acciones:

• Hará clic en uno de los botones de proveedores de identidad social (p. ej., “Iniciar sesión con Google”)
• Introducirá su correo electrónico y contraseña (lo que significa “Usaré la conexión de base de datos”).

Pero si la aplicación o el inquilino tiene habilitados otros tipos de conexión (como conexiones empresariales o varias bases de datos), el proceso de selección puede ser más complejo. ¿Cómo indica que un usuario quiere usar una conexión de base de datos específica si hay más de una habilitada? ¿Qué sucede si un usuario quiere usar una conexión empresarial para iniciar sesión mediante inicio de sesión único (SSO)?

Si implementa una IU de inicio de sesión personalizada, tiene control total sobre el flujo de autenticación. Puede elegir la conexión según el contexto (como la dirección de correo electrónico indicada) o preguntárselo al usuario y luego proporcionar el parámetro connection a uno de los métodos de inicio de sesión de Auth0.js.

Lock y múltiples conexiones

Lock tiene funcionalidad integrada para seleccionar proveedores de identidad. Para las conexiones sociales, muestra los logotipos de todas las que estén habilitadas en una aplicación determinada. También proporciona campos de username o correo electrónico y contraseña si está habilitada una conexión de base de datos o una conexión de Active Directory.

Solo verá un botón de inicio de sesión si es la única conexión habilitada para la aplicación (en la experiencia de Classic Universal Login). De lo contrario, deberá usar una interfaz personalizada o New Universal Login, que sí permite tener un botón para cada conexión social y empresarial habilitada.

Uso de dominios de correo electrónico en conexiones empresariales

Una funcionalidad adicional de Lock es el uso de dominios de correo electrónico como forma de dirigir las solicitudes de autenticación. Las conexiones empresariales en Auth0 se pueden asignar a domains. Por ejemplo, al configurar un Proveedor de identidad ADFS o SAML-P:

Si una conexión tiene dominios asignados, el campo de contraseña se desactiva automáticamente cuando un usuario introduce un correo electrónico con un dominio asignado.

En el ejemplo anterior, el dominio auth0.com se ha asignado a una conexión empresarial.

Ten en cuenta que puedes asociar varios dominios a una sola conexión.

Selección entre varias conexiones de base de datos

Si tu aplicación tiene varias conexiones de base de datos habilitadas, Lock necesita saber cuál debe usar. Puedes proporcionar la opción connectionResolver, que recibe una función que determina qué conexión usar en función de la entrada del usuario y del contexto. En este ejemplo, se usa una conexión de base de datos alternativa si el dominio del correo electrónico es “auth0.com”:

var options = {
  connectionResolver: function (username, context, cb) {
    var domain = username.indexOf('@') !== -1 && username.split('@')[1];
    if (domain && domain ==='auth0.com') {
      // Si el username es [e-mail], la conexión utilizada será la conexión `auth0-users`.
      cb({ type: 'database', name: 'auth0-users' });
    } else {
      // Usar el enfoque predeterminado para determinar la conexión
      cb(null);
    }
  }
}

Puede usar la opción defaultDatabaseConnection para especificar la conexión de base de datos que se utilizará de forma predeterminada.

Filtrar programáticamente las conexiones disponibles

La opción allowedConnections de Lock le permite indicar cuáles de las conexiones disponibles deben mostrarse como opción para el usuario.

Esto le permite adaptar la experiencia en función de información adicional o del contexto (por ejemplo, “Haga clic aquí para iniciar sesión como estudiante o aquí para iniciar sesión como miembro del profesorado”).

Ten en cuenta que también puedes pasar la opción allowedConnections al método lock.show() si hacerlo al instanciarlo no es lo ideal para tu caso de uso. Consulta la documentación de la API del método show para obtener más información.

Envío de información del realm desde la aplicación

A veces, la aplicación que solicita autenticación puede saber de antemano qué realm pretende usar el usuario. Por ejemplo, una aplicación multiinquilino podría usar URL con un formato como: https://{customer}.yoursite.com o https://www.yoursite.com/{customer}. Cuando un usuario llega a su aplicación mediante la URL personalizada, puede tomar ese valor de tenant y pasarlo como login_hint en la solicitud a authorize:

https://{yourDomain}/authorize?client_id=[...]&login_hint={customer}

login_hint es una pista para el Servidor de autorización (Auth0) que indica qué podría usar el usuario para iniciar sesión. En este caso, según la URL a la que llegó el usuario, tratamos “customer” como el realm.

El código predeterminado de la página de inicio de sesión alojada lo usa para precompletar el campo de correo electrónico en Lock, pero podemos modificar el código para cambiar la conexión de base de datos predeterminada que se usará si se proporciona un realm en lugar de una dirección de correo electrónico real:

// de la plantilla predeterminada de la página de inicio de sesión alojada
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
[...]

var loginHint = config.extraParams.login_hint;
var realmHint;

// si el login hint no es una dirección de correo electrónico, lo tratamos como un realm hint
if (loginHint && loginHint.indexOf('@') < 0) {
  realmHint = loginHint;
  loginHint = null;
}

// ahora mapeamos el realm a una base de datos real
var defaultDatabaseConnection;
if (realmHint === 'acme') {
  defaultDatabaseConnection = 'acme-users';
} else if (realmHint === 'auth0') {
  defaultDatabaseConnection = 'auth0-DB';
}
    
// Al configurar Lock, proporcionamos los valores obtenidos anteriormente
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  [...] // otras opciones
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
  defaultDatabaseConnection: defaultDatabaseConnection
}

El código anterior es, por supuesto, solo un ejemplo. Podría ampliar esta lógica para filtrar las conexiones sociales o para establecer una conexión predeterminada que se use incluso si se proporciona una dirección de correo electrónico como login_hint.

Asignar el “cliente” como realm es una decisión de diseño arbitraria para este ejemplo. Pero, en general, conviene aislar las aplicaciones del concepto real de “conexión” que se usa dentro de Auth0 y utilizar en su lugar el concepto más abstracto de “realm”, posiblemente haciendo una asignación de realm a conexión dentro de la página de inicio de sesión alojada (donde es más fácil hacer cambios si es necesario).