Introduction

Pour les cas d'utilisation où les organisations ont plusieurs fournisseurs d'identité intégrés à IBM Security Verify, la capacité de présenter une expérience utilisateur simplifiée est essentielle et nécessaire. Les utilisateurs qui se connectent ne savent pas à quel fournisseur d'identité IdP ils appartiennent et ne savent donc pas lequel sélectionner - au lieu de cela, les individus ne connaissent que leur nom d'utilisateur et/ou leur adresse électronique et le mot de passe correspondant.

Lorsque les organisations disposent de plusieurs PDI, l'idéal est de n'avoir qu'une seule page de connexion avec un nom d'utilisateur et/ou un champ d'adresse électronique. En fonction du nom d'utilisateur et/ou de l'adresse électronique fournis, la page de connexion appropriée doit être présentée à la personne.

Considérations

Il est recommandé, si l'on souhaite activer l'expérience de l'identificateur en premier, de respecter les critères suivants afin de garantir une mise en œuvre propre et une réduction de l'impact sur l'expérience individuelle.

L'organisation qui met en œuvre le principe de l'identifiant d'abord contrôle les sources d'identité mises en œuvre.
Les identités ne s'étendent pas sur plusieurs sources d'identité (par exemple, [email protected]_ existe dans la source d'identité 1 et dans aucune autre source d'identité). [email protected]_ ne doit pas exister dans la source d'identité 1 et la source d'identité 2).

Prérequis

IBM Security Verify SaaS tenant
Compréhension des thèmes et de l'image de marque de Verify
Connaissance de base ou intermédiaire de JavaScript (des exemples de code sont fournis ci-dessous)
Au moins deux fournisseurs d'identité sont activés (ex : Cloud Directory, OIDC enterprise, SAML enterprise, Active Directory, et/ou LDAP)

Configuration de Verify

Activer les fournisseurs d'identité souhaités dans le locataire IBM Security Verify SaaS
Téléchargez le fichier de thèmes qui héberge la page de thèmes de connexion qui nécessitera une personnalisation JavaScript
Personnaliser la page de connexion avec JavaScript et HTML
Recharger la page des thèmes de connexion mis à jour dans IBM Security Verify SaaS

Activer les fournisseurs d'identité souhaités dans le locataire IBM Security Verify SaaS

L'objectif de cette activité est de s'assurer que les fournisseurs d'identité souhaités pour être connectés par les individus sont activés. Pour que ce scénario fonctionne, au moins deux fournisseurs d'identité doivent être configurés et activés.

(nécessaire uniquement si un fournisseur d'identité est activé): Créer un fournisseur d'identité peut vous aider à créer les fournisseurs d'identité nécessaires à IBM Security Verify SaaS. En outre, IBM Security Verify SaaS fournit un annuaire cloud natif.
Une fois qu'un fournisseur d'identité est créé, vous pouvez déterminer quels fournisseurs d'identité sont activés en allant dans la configuration ci-dessous sous "Authentification -> Fournisseurs d'identité".
Assurez-vous que le fournisseur d'identité est non seulement activé, mais aussi configuré comme option de connexion pour les utilisateurs finaux. Pour ce faire, naviguez vers "Sécurité -> Options de connexion". Les fournisseurs d'identité souhaités doivent être activés pour "Afficher pour l'utilisateur final".

Téléchargez le fichier de thèmes qui héberge la page de thèmes de connexion qui nécessitera une personnalisation JavaScript

L'objectif de cette activité est de télécharger la page thématique de connexion qui sera modifiée par le code JavaScript afin d'offrir l'expérience "Identifier d'abord". Il est essentiel que les fournisseurs d'identité que l'on souhaite prendre en charge dans le cadre de l'expérience "Identifier d'abord" soient activés avant le téléchargement de la page des thèmes de connexion et que les fournisseurs d'identité que l'on ne souhaite pas prendre en charge soient désactivés.

Naviguez vers "User experience -> branding" et sélectionnez la tuile de branding utilisée pour vos applications. "Par défaut" sera généralement la tuile, mais c'est le thème qui sera utilisé pour fournir l'expérience de marque aux individus.
Allez dans le thème souhaité et naviguez jusqu'à "authentification -> login -> identity_source -> identity_source_selection -> combined_login_selection.html ". Télécharger le modèle.

Personnaliser la page de connexion avec JavaScript et HTML

Le but de cette activité est d'écrire le JavaScript et le HTML correspondants dans la page " combined_login_selection.html " qui vient d'être téléchargée. Cela permettra de définir la logique qui est vérifiée lorsque les personnes saisissent le nom d'utilisateur/le courriel pour les rediriger vers la page de connexion du fournisseur d'identité correspondant.

Ouvrez le fichier " combined_login_selection.html " dans un éditeur qui vous permettra de mettre à jour la page.

Référez-vous au code ci-dessous en tant qu'exemple et apportez les modifications logiques nécessaires à la page de connexion avec les conditions requises. Avant </head>, ajoutez l'extrait suivant.

<script>
    // Realm is available in the identity source configuration. Modify the script below to use the correct realm values.
    const emailDomainRealmMap = {
        "domain1.com": "login.domain1.com",
        "domain2.com": "login.domain2.com"
    };

    // Default realm to use in the event that none of the domains match.
    const defaultRealm = "cloudIdentityRealm";
    const defaultIDSource = idSources.find(e => e.realm == defaultRealm);

    // Gets the identity source object based on the realm provided
    function getIDSource(realm) {
        var idSource = idSources.find(e => e.realm == realm);
        if (!idSource) {
            idSource = defaultIDSource;
        }

        return idSource;
    }

    // Extracts the email domain from the username keyed in and kicks off authentication
    // by matching the identity source based on the realm.
    // NOTE: This script does not cater for sub-domains in the email and should be modified
    // as appropriate based on the logic that matches requirements.
    function kickoffLogin() {
        var email = document.getElementById("username").value;
        var domain = email.substring(email.lastIndexOf('@') + 1);
        var matchedRealm = emailDomainRealmMap[domain];
        if (!matchedRealm || matchedRealm == "") {
            matchedRealm = defaultRealm;
        }

        idSource = getIDSource(matchedRealm);
        location.href = idSource.loginUrl;
    }
</script>

Certaines données du script ci-dessus devront être modifiées pour répondre aux configurations de votre locataire. Utilisez les commentaires du script pour déterminer les valeurs qui doivent être extraites du locataire (telles que les domaines).

Dans le corps de la page, ajoutez le code HTML ci-dessous, juste après la div de fermeture de @LOGIN_ERROR_MESSAGE@

<br></br>
<div>
    <form>
        Username: <input type="text" id="username" />
        <button type="button" id="usernamebtn" onclick="kickoffLogin()" disabled>Submit</button>
    </form>
</div>
</br>
</br>
<div hidden>

Ajouter </div> ci-dessus @PAGE_FOOTER@

Ajoutez le script suivant avant </body>.

<script>
    // Logic to simulate button click if user hits Enter vs Clicks on button
    // Get the input field
    var input = document.getElementById("username");
    // Execute a function when the user presses a key on the keyboard
    input.addEventListener("keypress", function(event) {
        // If the user presses the "Enter" key on the keyboard
        if (event.key === "Enter") {
            // Cancel the default action, if needed
            event.preventDefault();
            // Trigger the button element with a click
            document.getElementById("usernamebtn").click();
        }
    });

    // Logic to disable the button until text is entered
    const textField = document.getElementById("username");
    const submitButton = document.getElementById("usernamebtn");

    textField.addEventListener("input", () => {
        if (textField.value.length > 0) {
            submitButton.removeAttribute("disabled");
        } else {
            submitButton.setAttribute("disabled", true);
        }
    });
</script>

Télécharger la page personnalisée

L'objectif de cette activité est de télécharger les mises à jour de la page thématique de connexion dans Verify SaaS afin d'expérimenter les flux de connexion par identifiant.

Retournez dans la tuile du thème et naviguez vers "authentification -> login -> identity_source -> identity_source_selection -> combined_login_selection.html "
Recharger le fichier " combined_login_selection.html " qui vient d'être mis à jour