> ## 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 choisir 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) + "*****MASQUÉ*****";
          }
          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 <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Avec Auth0, vous pouvez offrir aux utilisateurs plusieurs méthodes d’authentification. C’est important pour les applications SaaS ou multi-locataires, où de nombreuses organisations utilisent une seule application. Chaque organisation peut utiliser des systèmes différents, comme LDAP, Active Directory, Google Workspace ou des répertoires 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 tenant (comme [les connexions au niveau du domaine](/docs/fr-ca/authenticate/identity-providers/promote-connections-to-domain-level)). Lorsqu’un utilisateur se connecte, il faut sélectionner la connexion à utiliser.

<Frame>
  <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1wnZRx9V1cyyV1nRgsu9fD/f2569441334d3b277702db225045e102/2023-09-22_14-18-30.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=60fc3339bfc39f957345192ba9818cd6" alt="Home Realm Discovery dans Lock" width="803" height="348" data-path="docs/images/cdy7uua7fh8z/1wnZRx9V1cyyV1nRgsu9fD/f2569441334d3b277702db225045e102/2023-09-22_14-18-30.png" />
</Frame>

La sélection du <Tooltip tip="Fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Identity+Providers">fournisseur d’identité</Tooltip> approprié parmi plusieurs options s’appelle "Home Realm Discovery".

Si vous utilisez au plus une connexion de base de données et aucune ou plusieurs connexions sociales, le processus de sélection est simple. L’utilisateur devra soit :

* cliquer sur l’un des boutons de fournisseurs d’identité sociaux (p. ex., "Se connecter avec Google")
* saisir son adresse courriel et son mot de passe (ce qui signifie "J’utiliserai la connexion de base de données").

Mais si l’application ou le tenant a 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 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 se connecter au moyen de <Tooltip tip="Single Sign-On (SSO) : service qui, après qu’un utilisateur se connecte à une application, le connecte automatiquement à d’autres applications." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Single+Sign-on">l’authentification unique</Tooltip> (SSO) ?

Si vous implémentez [une interface de connexion personnalisée](/docs/fr-ca/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 en le demandant à l’utilisateur, puis transmettre le paramètre `connection` à l’une des [méthodes de connexion](/docs/fr-ca/libraries/auth0js) d’Auth0.js.

<div id="lock-and-multiple-connections">
  ## Lock et plusieurs connexions
</div>

Lock comprend une fonctionnalité intégrée de sélection du fournisseur d’identité. Pour les connexions sociales, il affiche les logos de toutes celles qui sont activées pour une application donnée. Il affiche aussi des champs de nom d’utilisateur/adresse 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 [Classic Universal Login](/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 le [nouveau Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience), qui permet d’avoir un bouton pour chaque connexion sociale et d’entreprise activée.

<div id="using-email-domains-with-enterprise-connections">
  ## Utilisation des domaines de courriel avec les connexions d’entreprise
</div>

Une fonctionnalité supplémentaire de Lock est l’utilisation des domaines de courriel pour acheminer les requêtes d’authentification. Les connexions d’entreprise dans Auth0 peuvent être mappées à des `domains`. Par exemple, lors de la configuration d’ADFS ou d’un fournisseur d’identité <Tooltip tip="Security Assertion Markup Language (SAML) : protocole normalisé permettant à deux parties d’échanger des renseignements d’authentification sans mot de passe." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=SAML">SAML</Tooltip>-P :

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6c8fqJpKCPNSqlop6ZJGYK/b20b1125302b8f5511825be1299e0f96/enterprise-connection.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=ca59beea78d88c0b621a12831276230a" alt="Configuration des fournisseurs d’identité ADFS ou SAML-P" width="2496" height="1612" data-path="docs/images/cdy7uua7fh8z/6c8fqJpKCPNSqlop6ZJGYK/b20b1125302b8f5511825be1299e0f96/enterprise-connection.png" />
</Frame>

Si des domaines sont mappés à une connexion, le champ de saisie du mot de passe est automatiquement désactivé lorsqu’un utilisateur saisit une adresse courriel associée à un domaine mappé.

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6pb7kGpuHkj0rVPPaJw6Xb/373b9e7a2bf49748a1a306623c13b299/hrd-sso.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=eeab67b4f5f2c9acfae214fbcd294cb1" alt="Écran de connexion avec domaine mappé" width="1500" height="986" data-path="docs/images/cdy7uua7fh8z/6pb7kGpuHkj0rVPPaJw6Xb/373b9e7a2bf49748a1a306623c13b299/hrd-sso.png" />
</Frame>

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.

<div id="selecting-among-multiple-database-connections">
  ## Sélection parmi plusieurs connexions de base de données
</div>

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), à laquelle on passe une fonction qui détermine la connexion à utiliser selon la saisie de l’utilisateur et le 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`](/docs/fr-ca/libraries/lock/lock-configuration#defaultdatabaseconnection-string-) pour préciser la connexion de base de données qui sera utilisée par défaut.

<div id="filtering-available-connections-programmatically">
  ## Filtrer les connexions disponibles par programmation
</div>

L’option [`allowedConnections`](/docs/fr-ca/libraries/lock/lock-configuration#allowedconnections-array-) dans Lock vous permet d’indiquer lesquelles des connexions disponibles doivent être proposées à l’utilisateur.

Vous pouvez ainsi adapter l’expérience en fonction de renseignements supplémentaires ou du contexte (p. ex. « 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'];
  }
);`;

<AuthCodeBlock children={codeExample} language="js" />

Notez que vous pouvez aussi fournir l’option `allowedConnections` à la méthode `lock.show()` s’il n’est pas idéal de la fournir lors de l’instanciation pour votre cas d’usage. Veuillez consulter la [documentation de l’API](/docs/fr-ca/libraries/lock/lock-api-reference) de la méthode `show` pour en savoir plus.

<div id="sending-realm-information-from-the-application">
  ## Envoi de l’information de realm à partir de l’application
</div>

Il arrive que l’application qui demande une authentification sache d’avance quel realm l’utilisateur compte utiliser. Par exemple, une application multilocataire peut utiliser des URL sous la forme suivante : `https://{customer}.yoursite.com` ou `https://www.yoursite.com/{customer}`. Lorsqu’un utilisateur arrive dans votre application au moyen 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 destiné au <Tooltip tip="Serveur d’autorisation : serveur centralisé qui contribue à définir les limites de l’accès d’un utilisateur. Par exemple, votre serveur d’autorisation peut contrôler les données, les tâches et les fonctionnalités accessibles à un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=authorization+server">serveur d’autorisation</Tooltip> (Auth0) pour indiquer ce que l’utilisateur pourrait utiliser pour se connecter. Dans ce cas-ci, selon l’URL où l’utilisateur a abouti, nous traitons « customer » comme le realm.

Le code par défaut de la page de connexion hébergée l’utilise pour préremplir le champ de courriel dans Lock, mais nous pouvons modifier le code pour changer la connexion de base de données par défaut à utiliser si un realm est fourni au lieu d’une véritable adresse courriel :

```js lines expandable theme={null}
// à partir du modèle de page de connexion hébergée par défaut
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 realm
if (loginHint && loginHint.indexOf('@') < 0) {
  realmHint = loginHint;
  loginHint = null;
}

// on mappe maintenant le realm vers une base de données concrète
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`.

Associer le "client" à un realm est un choix de conception arbitraire pour cet exemple. Mais il est généralement 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 effectuant au besoin un mapping de realm à connexion dans la page de connexion hébergée (où il est plus facile d’apporter des modifications, au besoin).