> ## 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.
> Comment sélectionner différents types de connexion pour offrir plusieurs options de connexion avec Lock V11.
# Choisir parmi plusieurs options de connexion
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 offrir aux utilisateurs plusieurs méthodes d’authentification. C’est important pour les applications SaaS ou à locataires multiples, où de nombreuses organisations utilisent une même application. Chaque organisation peut utiliser des systèmes différents, comme LDAP, Active Directory, Google Workspace ou des banques de noms d’utilisateur et de mots de passe.
Dans Auth0, vous pouvez associer différentes connexions (méthodes d’authentification) à des applications précises, ou directement à un locataire (comme [connexions de domaine](/fr-CA/docs/authenticate/identity-providers/promote-connections-to-domain-level)). Lorsqu’un utilisateur se connecte, l’une de ces connexions doit être sélectionnée.
La sélection du fournisseur d’identité approprié parmi plusieurs options s’appelle "Home Realm Discovery".
Si vous utilisez au plus une connexion de base de données et zéro ou plusieurs connexions sociales, le processus de sélection est simple. L’utilisateur devra soit :
* Cliquer sur l’un des boutons des fournisseurs d’identité sociaux (p. ex., "Se connecter avec Google")
* Saisir son courriel et son mot de passe (ce qui signifie "J’utiliserai la connexion de base de données").
Mais si d’autres types de connexions sont activés pour l’application ou le locataire (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 veut utiliser une connexion de base de données précise si plusieurs sont activées ? Que faire si un utilisateur veut utiliser une connexion d’entreprise pour ouvrir une session avec l’authentification unique (SSO) ?
Si vous implémentez [une interface utilisateur de connexion personnalisée](/fr-CA/docs/customize/login-pages/classic-login/customize-with-lock-sdk), vous avez un contrôle total sur le flux d’authentification. Vous pouvez choisir la connexion en fonction du contexte (comme l’adresse courriel fournie) ou demander à l’utilisateur d’en choisir une, puis fournir le paramètre `connection` à l’une des [méthodes de connexion](/fr-CA/docs/libraries/auth0js) d’Auth0.js.
## Lock et plusieurs connexions
Lock intègre une fonctionnalité de sélection de fournisseur d’identité. Pour les connexions sociales, il affiche les logos de toutes celles qui sont activées dans une application donnée. Il fournit également des champs de nom d’utilisateur/courriel et de mot de passe si une connexion de base de données ou une connexion Active Directory est activée.
Vous ne verrez un bouton de connexion que s’il s’agit de la seule connexion activée pour l’application (dans l’expérience [Universal Login classique](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)). Sinon, vous devrez utiliser une [interface utilisateur personnalisée](/fr-CA/docs/customize/login-pages/classic-login/customize-with-lock-sdk) ou le [nouveau Universal Login](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), qui prend en charge un bouton pour chaque connexion sociale et d’entreprise activée.
## Utiliser des domaines de courriel avec des connexions d’entreprise
Une fonctionnalité supplémentaire de Lock permet d’utiliser les domaines de courriel pour acheminer les demandes d’authentification. Les connexions d’entreprise dans Auth0 peuvent être associées à `domains`. Par exemple, lors de la configuration d’ADFS ou d’un fournisseur d’identité SAML-P :
Si une connexion a des domaines qui lui sont associés, le champ de saisie du mot de passe est automatiquement désactivé lorsqu’un utilisateur saisit un courriel provenant d’un domaine associé.
Dans l’exemple ci-dessus, le domaine `auth0.com` a été associé à une connexion d’entreprise.
Notez que vous pouvez associer plusieurs domaines à une même connexion.
## Sélection d’une connexion parmi plusieurs connexions de base de données
Si votre application a plusieurs connexions de 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 accepte une fonction déterminant la connexion à utiliser en fonction de la saisie de l’utilisateur et du contexte. Dans cet exemple, une autre connexion de base de données est utilisée si le domaine du courriel est "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 le nom d'utilisateur est test@auth0.com, la connexion utilisée sera la connexion `auth0-users`.
cb({ type: 'database', name: 'auth0-users' });
} else {
// Utiliser l'approche par défaut pour déterminer la connexion
cb(null);
}
}
}
```
Vous pouvez utiliser l’[`option defaultDatabaseConnection`](/fr-CA/docs/libraries/lock/lock-configuration#defaultdatabaseconnection-string-) pour indiquer la connexion de base de données à utiliser par défaut.
## Filtrer par programmation les connexions disponibles
L’[`option allowedConnections`](/fr-CA/docs/libraries/lock/lock-configuration#allowedconnections-array-) de Lock vous permet d’indiquer lesquelles des connexions disponibles doivent être proposées à l’utilisateur.
Cela vous permet d’adapter l’expérience en fonction de renseignements ou d’un contexte supplémentaires (p. ex. "Cliquez ici pour vous connecter comme étudiant, ou ici pour vous connecter comme membre du corps professoral").
export const codeExample = `var lock = new Auth0Lock(
'{yourClientId}',
'{yourDomain}',
{
allowedConnections: ['yourConnection'];
}
);`;
Notez que vous pouvez aussi fournir l’option `allowedConnections` à la méthode `lock.show()` s’il n’est pas idéal, pour votre cas d’utilisation, de la fournir lors de l’instanciation. Consultez la [documentation de l’API](/fr-CA/docs/libraries/lock/lock-api-reference) sur la méthode `show` pour en savoir plus.
## Transmission des informations de realm depuis l’application
Il arrive que l’application qui demande une authentification connaisse à l’avance le realm que l’utilisateur souhaite utiliser. Par exemple, une application multilocataire peut utiliser des URL de la forme suivante : `https://{customer}.yoursite.com` ou `https://www.yoursite.com/{customer}`. Lorsqu’un utilisateur arrive dans votre application à l’aide de l’URL personnalisée, vous pouvez récupérer cette valeur `tenant` et la transmettre comme `login_hint` dans la requête `authorize` :
`https://{yourDomain}/authorize?client_id=[...]&login_hint={customer}`
`login_hint` est un indice fourni au serveur d’autorisation (Auth0) pour indiquer ce que l’utilisateur pourrait utiliser pour se connecter. Dans ce cas, selon l’URL sur laquelle l’utilisateur est arrivé, nous traitons "customer" comme le realm.
Le code de la page de connexion hébergée par défaut l’utilise pour préremplir le champ de courriel dans Lock, mais nous pouvons le modifier pour changer la connexion de base de données utilisée par défaut si un realm est fourni au lieu d’une véritable adresse de courriel :
```js lines expandable theme={null}
// à partir du modèle par défaut de la page de connexion hébergée
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
[...]
var loginHint = config.extraParams.login_hint;
var realmHint;
// si l'indice de connexion n'est pas une adresse courriel, on le traite comme un indice de domaine
if (loginHint && loginHint.indexOf('@') < 0) {
realmHint = loginHint;
loginHint = null;
}
// on associe maintenant le domaine à une base de données réelle
var defaultDatabaseConnection;
if (realmHint === 'acme') {
defaultDatabaseConnection = 'acme-users';
} else if (realmHint === 'auth0') {
defaultDatabaseConnection = 'auth0-DB';
}
// Lors de la configuration de Lock, on fournit les valeurs obtenues précédemment
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
[...] // autres options
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
defaultDatabaseConnection: defaultDatabaseConnection
}
```
Le code ci-dessus n’est, bien sûr, qu’un exemple. Vous pourriez étendre cette logique pour exclure les connexions sociales, ou pour définir une connexion par défaut à utiliser même si une adresse courriel est fournie dans `login_hint`.
Faire correspondre "customer" à un realm est un choix de conception arbitraire dans cet exemple. Mais, de façon générale, il est préférable d’isoler les applications du concept concret de "connexion" utilisé dans Auth0 et d’utiliser plutôt le concept plus abstrait de "realm", en faisant au besoin une correspondance entre realm et connexion dans la page de connexion hébergée (où il est plus facile d’apporter des modifications, si nécessaire).