> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Cómo seleccionar distintos tipos de conexión para varias opciones de inicio de sesión con Lock V11.
# Seleccionar entre varias opciones de conexión
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
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](/es/docs/authenticate/identity-providers/promote-connections-to-domain-level)). 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](/es/docs/customize/login-pages/classic-login/customize-with-lock-sdk), 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](/es/docs/libraries/auth0js) 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](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)). De lo contrario, deberá usar una [interfaz personalizada](/es/docs/customize/login-pages/classic-login/customize-with-lock-sdk) o [New Universal Login](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), 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`](https://github.com/auth0/lock#other-options), 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":
```js lines theme={null}
var options = {
connectionResolver: function (username, context, cb) {
var domain = username.indexOf('@') !== -1 && username.split('@')[1];
if (domain && domain ==='auth0.com') {
// Si el username es test@auth0.com, 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`](/es/docs/libraries/lock/lock-configuration#defaultdatabaseconnection-string-) 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`](/es/docs/libraries/lock/lock-configuration#allowedconnections-array-) 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").
export const codeExample = `var lock = new Auth0Lock(
'{yourClientId}',
'{yourDomain}',
{
allowedConnections: ['yourConnection'];
}
);`;
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](/es/docs/libraries/lock/lock-api-reference) 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:
```js lines expandable theme={null}
// 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).