> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Choisir parmi plusieurs options de connexion
> Comment sélectionner différents types de connexion pour plusieurs options de connexion avec Lock V11.
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) + "*****MASKED*****";
}
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}
;
};
Avec Auth0, vous pouvez proposer aux utilisateurs plusieurs méthodes d’authentification. Ceci est important avec les applications SaaS ou à plusieurs locataires, où de nombreuses organisations utilisent une seule application. Chaque organisation peut utiliser différents systèmes tels que LDAP, Entra ID, Google Workspace ou des magasins de noms d’utilisateur/mots de passe.
Dans Auth0, vous pouvez associer diff]\(/docs/images/nnexions (méthodes d’authentification) à des applications spécifiques, ou directement à un locataire (en tant que [connexions de domaine](/docs/fr-ca/authenticate/identity-providers/promote-connections-to-domain-level)). Lorsqu’un utilisateur se connecte, l’une de ces connexions devra être sélectionnée pour être utilisée.
La sélection des fournisseurs d’identité appropriés parmi plusieurs options s’appelle « Découverte de domaine d’accueil ».
Si vous utilisez au maximum une connexion à une base de données et zéro ou plus de connexions sociales, le processus de sélection est simple. L’utilisateur pourra :
* Cliquer sur l’une des touches des fournisseurs d’identité sociale (par exemple, « Connectez-vous avec Google »)
* Entrer son courriel et son mot de passe (ce qui signifie « J’utiliserai la connexion à la base de données »).
Mais si l’application ou le locataire dispose d’autres types de connexion activés (comme des connexions d’entreprise ou plusieurs bases de données), le processus de sélection peut être plus complexe. Comment indiquer qu’un utilisateur souhaite utiliser la connexion à une base de données spécifique si plusieurs sont activées? Que se passe-t-il si un utilisateur désire utiliser une connexion d’entreprise pour se connecter à l’aide de l’authentification unique (SSO)?
Si vous implémentez [une interface utilisateur de connexion personnalisée](/docs/fr-ca/customize/login-pages/classic-login/customize-with-lock-sdk), vous avez le contrôle complet du flux d’authentification. Vous pouvez choisir la connexion en fonction du contexte (comme l’adresse courriel donnée) ou en demandant à l’utilisateur, puis en fournissant le paramètre de `connexion` à l’une des [méthodes de connexion](/docs/fr-ca/libraries/auth0js) d’Auth0.js.
## Lock et connexions multiples
Lock dispose d’une fonctionnalité intégrée pour la sélection du fournisseur d’identité. Pour les connexions sociales, il affiche les logos de toutes les personnes activées dans une application particulière. Il fournit également des champs de nom d’utilisateur/courriel et de mot de passe si une connexion à une base de données ou une connexion Entra ID est activée.
Vous verrez une touche de connexion seulement s’il s’agit de la seule connexion activée pour l’application (pour l’[expérience de connexion universelle classique](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)). Sinon, vous devrez utiliser une [interface utilisateur personnalisée](/docs/fr-ca/customize/login-pages/classic-login/customize-with-lock-sdk) ou la [nouvelle connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), qui prend en charge l’activation d’une touche pour chaque connexion sociale et d’entreprise.
## Utiliser des domaines de messagerie avec des connexions d’entreprise
Une fonctionnalité supplémentaire de Lock est l’utilisation de domaines de messagerie comme moyen d’acheminer les demandes d’authentification. Les connexions d’entreprise dans Auth0 peuvent être mappées à des `domains`. Par exemple, lors de la configuration d’un ADFS ou d’un fournisseur d’identité SAML-P :
Si une connexion comporte des domai]\(/docs/images/, le champ de saisie du mot de passe est automatiquement désactivé lorsqu’un utilisateur saisit un courriel avec un domaine mappé.
Dans l’exemple ci-dessus, le domaine `auth0.com` a été mappé à une connexion d’entreprise.
Notez que vous pouvez associer plusieurs domaines à une seule connexion.
## Sélectionner parmi plusieurs connexions à la base de données
Si votre application comprend plusieurs connexions à la base de données activées, Lock doit savoir laquelle utiliser. Vous pouvez fournir une [`option`connectionResolver](https://github.com/auth0/lock#other-options), qui remplit comme fonction celle de décider de la connexion à utiliser en fonction de l’entrée de l’utilisateur et du contexte. Dans cet exemple, une connexion alternative à la base de données est utilisée si le domaine de messagerie est « auth0.com » :
```javascript lines theme={null}
var options = {
connectionResolver: function (username, context, cb) {
var domain = username.indexOf('@') !== -1 && username.split('@')[1];
if (domain && domain ==='auth0.com') {
// If the username is test@auth0.com, the connection used will be the `auth0-users` connection.
cb({ type: 'database', name: 'auth0-users' });
} else {
// Use the default approach to figure it out the connection
cb(null);
}
}
}
```
Vous pouvez utiliser l’[option`defaultDatabaseConnection`](/docs/fr-ca/libraries/lock/v11/configuration#defaultdatabaseconnection-string-) pour spécifier la connexion à la base de données qui sera utilisée par défaut.
## Filtrer les connexions disponibles par programme
L’[option`AllowedConnections`](/docs/fr-ca/libraries/lock/v11/configuration#allowedconnections-array-) dans Lock vous permet d’indiquer laquelle des connexions disponibles doit être présentée comme option à l’utilisateur.
Cela permet d’adapter l’expérience en fonction d’entrées ou de contextes supplémentaires (par exemple « Cliquez ici pour vous connecter en tant qu’étudiant ou ici pour vous connecter en tant que membre du corps professoral »).
export const codeExample = `var lock = new Auth0Lock(
'{yourClientId}',
'{yourDomain}',
{
allowedConnections: ['yourConnection'];
}
);`;
Vous pouvez aussi fournir l’option `AllowedConnections` à la méthode `lock.show()` si la fournir lors de l’instanciation n’est pas idéale pour votre cas d’utilisation. Référez-vous à la [documentation de l’API](/docs/fr-ca/libraries/lock/lock-api-reference) pour obtenir plus d’informations quant à la méthode de `présentation`.
## Envoi d’informations sur le domaine à partir de l’application
Parfois, l’application qui demande une authentification peut connaître à l’avance le domaine destiné à être utilisé par l’utilisateur. Par ex. une application à multiples locataires peut utiliser des URL sous la forme de : `https://{customer}.yoursite.com` ou `https://www.yoursite.com/{customer}`. Lorsqu’un utilisateur arrive à votre application avec l’URL personnalisée, vous pouvez récupérer cette valeur de `tenant` et la transmettre comme `login_hint` dans la demande d’`authorize` :
`https://{yourDomain}/authorize?client_id=[...]&login_hint={customer}`
`login_hint` est une indication adressée au serveur d’autorisation (Auth0) pour indiquer ce qui peut être utilisé par l’utilisateur pour se connecter. Dans ce cas, en fonction de l’URL où l’utilisateur se trouve, nous traitons le « client » comme le domaine.
Le code par défaut de la page de connexion hébergée l’utilise pour populer le champ du courriel dans Lock, mais nous pouvons modifier le code pour alterner la connexion à la base de données par défaut à utiliser si un domaine est fourni au lieu d’une adresse courriel réelle :
```java lines theme={null}
// from the default Hosted Login Page template
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
[...]
var loginHint = config.extraParams.login_hint;
var realmHint;
// if the login hint is not an email address, we treat it as a realm hint
if (loginHint && loginHint.indexOf('@') < 0) {
realmHint = loginHint;
loginHint = null;
}
// now we map the realm into an actual database
var defaultDatabaseConnection;
if (realmHint === 'acme') {
defaultDatabaseConnection = 'acme-users';
} else if (realmHint === 'auth0') {
defaultDatabaseConnection = 'auth0-DB';
}
// When configuring Lock, we provide the values obtained before
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
[...] // other options
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
defaultDatabaseConnection: defaultDatabaseConnection
}
```
Le code ci-dessus n’est qu’un exemple. Vous pouvez étendre cette logique pour filtrer les connexions sociales ou pour définir une connexion par défaut à utiliser même si une adresse courriel est fournie comme `login_hint`.
Mapper le « client » en tant que domaine est une décision de conception arbitraire dans le cadre de cet exemple. Mais il est généralement bien d’isoler les applications du concept de « connexion » actuel utilisé dans Auth0 et de plutôt utiliser le concept de « domaine » plus abstrait, en effectuant éventuellement un mappage domaine-connexion dans la page de connexion hébergée (où il est plus facile de faire des changements, si nécessaire).