Choisir parmi plusieurs options de connexion

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érentes connexions (méthodes d’authentification) à des applications spécifiques, ou directement à un locataire (en tant que connexions de domaine). 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, 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 d’Auth0.js.

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). Sinon, vous devrez utiliser une interface utilisateur personnalisée ou la nouvelle connexion universelle, qui prend en charge l’activation d’une touche pour chaque connexion sociale et 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 domaines mappés, 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.

Si votre application comprend plusieurs connexions à la base de données activées, Lock doit savoir laquelle utiliser. Vous pouvez fournir une optionconnectionResolver, 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 » :

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’optiondefaultDatabaseConnection pour spécifier la connexion à la base de données qui sera utilisée par défaut.

L’optionAllowedConnections 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 »).

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 pour obtenir plus d’informations quant à la méthode de présentation.

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://{YOUR_AUTH0_DOMAIN}/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 :

// 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).