Tutoriel : Se connecter et se déconnecter d’une application à page unique React

S’applique à : Locataires de main-d’œuvre Locataires externes (en savoir plus)

Ce tutoriel est la dernière partie d’une série qui illustre la création d’une application monopage React (SPA) et sa préparation pour l’authentification à l’aide de la plateforme d’identités Microsoft. Dans la partie 2 de cette série, vous avez ajouté des composants fonctionnels à un spa React et créé une interface utilisateur réactive. Cette dernière étape vous montre comment tester la fonctionnalité de connexion et de déconnexion dans votre application.

Dans ce tutoriel, vous allez :

• Ajouter du code au fichier claimUtils.js pour créer la table de revendications
• Se connecter à l’application et s’en déconnecter
• Afficher les revendications retournées à partir du jeton d’ID

Conditions préalables

• Achèvement des conditions préalables et des étapes décrites dans Tutoriel : création de composants pour la connexion et la déconnexion dans une application monopage React.

Ajouter du code au fichier claimUtils.js (facultatif)

Pour ajouter la fonctionnalité d’une table qui peut afficher les revendications retournées à partir du jeton d’ID, vous pouvez ajouter du code à claimUtils.js fichier. Cet extrait de code remplit la table de revendications avec la description appropriée et la valeur correspondante.

1. Ouvrez les utils/claimUtils.js et ajoutez l’extrait de code suivant :

export const createClaimsTable = (claims) => {
    let claimsObj = {};
    let index = 0;

    Object.keys(claims).forEach((key) => {
        if (typeof claims[key] !== 'string' && typeof claims[key] !== 'number') return;
        switch (key) {
            case 'aud':
                populateClaim(
                    key,
                    claims[key],
                    "Identifies the intended recipient of the token. In ID tokens, the audience is your app's Application ID, assigned to your app in the Microsoft Entra admin center.",
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'iss':
                populateClaim(
                    key,
                    claims[key],
                    'Identifies the issuer, or authorization server that constructs and returns the token. It also identifies the external tenant for which the user was authenticated. If the token was issued by the v2.0 endpoint, the URI will end in /v2.0. The GUID that indicates that the user is a consumer user from a Microsoft account is 9188040d-6c67-4c5b-b112-36a304b66dad.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'iat':
                populateClaim(
                    key,
                    changeDateFormat(claims[key]),
                    'Issued At indicates when the authentication for this token occurred.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'nbf':
                populateClaim(
                    key,
                    changeDateFormat(claims[key]),
                    'The nbf (not before) claim identifies the time (as UNIX timestamp) before which the JWT must not be accepted for processing.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'exp':
                populateClaim(
                    key,
                    changeDateFormat(claims[key]),
                    "The exp (expiration time) claim identifies the expiration time (as UNIX timestamp) on or after which the JWT must not be accepted for processing. It's important to note that in certain circumstances, a resource may reject the token before this time. For example, if a change in authentication is required or a token revocation has been detected.",
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'name':
                populateClaim(
                    key,
                    claims[key],
                    "The name claim provides a human-readable value that identifies the subject of the token. The value isn't guaranteed to be unique, it can be changed, and it's designed to be used only for display purposes. The profile scope is required to receive this claim.",
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'preferred_username':
                populateClaim(
                    key,
                    claims[key],
                    'The primary username that represents the user. It could be an email address, phone number, or a generic username without a specified format. Its value is mutable and might change over time. Since it is mutable, this value must not be used to make authorization decisions. It can be used for username hints, however, and in human-readable UI as a username. The profile scope is required in order to receive this claim.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'nonce':
                populateClaim(
                    key,
                    claims[key],
                    'The nonce matches the parameter included in the original /authorize request to the IDP. If it does not match, your application should reject the token.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'oid':
                populateClaim(
                    key,
                    claims[key],
                    'The oid (user’s object id) is the only claim that should be used to uniquely identify a user in an external tenant. The token might have one or more of the following claim, that might seem like a unique identifier, but is not and should not be used as such.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'tid':
                populateClaim(
                    key,
                    claims[key],
                    'The tenant ID. You will use this claim to ensure that only users from the current external tenant can access this app.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'upn':
                populateClaim(
                    key,
                    claims[key],
                    '(user principal name) – might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place or might change to reflect a personal change like marriage.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'email':
                populateClaim(
                    key,
                    claims[key],
                    'Email might be unique amongst the active set of users in a tenant but tend to get reassigned to new employees as employees leave the organization and others take their place.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'acct':
                populateClaim(
                    key,
                    claims[key],
                    'Available as an optional claim, it lets you know what the type of user (homed, guest) is. For example, for an individual’s access to their data you might not care for this claim, but you would use this along with tenant id (tid) to control access to say a company-wide dashboard to just employees (homed users) and not contractors (guest users).',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'sid':
                populateClaim(key, claims[key], 'Session ID, used for per-session user sign-out.', index, claimsObj);
                index++;
                break;
            case 'sub':
                populateClaim(
                    key,
                    claims[key],
                    'The sub claim is a pairwise identifier - it is unique to a particular application ID. If a single user signs into two different apps using two different client IDs, those apps will receive two different values for the subject claim.',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'ver':
                populateClaim(
                    key,
                    claims[key],
                    'Version of the token issued by the Microsoft identity platform',
                    index,
                    claimsObj
                );
                index++;
                break;
            case 'uti':
            case 'rh':
                index++;
                break;
            case '_claim_names':
            case '_claim_sources':
            default:
                populateClaim(key, claims[key], '', index, claimsObj);
                index++;
        }
    });

    return claimsObj;
};

/**
 * Populates claim, description, and value into an claimsObject
 * @param {String} claim
 * @param {String} value
 * @param {String} description
 * @param {Number} index
 * @param {Object} claimsObject
 */
const populateClaim = (claim, value, description, index, claimsObject) => {
    let claimsArray = [];
    claimsArray[0] = claim;
    claimsArray[1] = value;
    claimsArray[2] = description;
    claimsObject[index] = claimsArray;
};

/**
 * Transforms Unix timestamp to date and returns a string value of that date
 * @param {String} date Unix timestamp
 * @returns
 */
const changeDateFormat = (date) => {
    let dateObj = new Date(date * 1000);
    return `${date} - [${dateObj.toString()}]`;
};

Exécuter votre projet et vous connecter

Tous les extraits de code requis ont été ajoutés, de sorte que l’application peut maintenant être appelée et testée dans un navigateur web.

1. Ouvrez un nouveau terminal et exécutez la commande suivante pour démarrer votre serveur Web express.

   npm start
   

2. Copiez l’URL http qui s’affiche dans le terminal, par exemple, http://localhost:3000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Connectez-vous avec un compte associé au client.

4. Une interface similaire à la capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application. Si vous avez ajouté la table des revendications, vous pouvez afficher les revendications retournées à partir du jeton d’ID.

   

Se déconnecter de l’application

1. Recherchez le bouton Déconnexion sur la page, puis sélectionnez-le.
2. Vous serez invité à choisir un compte à partir duquel vous souhaitez vous déconnecter. Sélectionnez le compte que vous avez utilisé pour vous connecter.

Un message s’affiche indiquant que vous êtes déconnecté. Vous pouvez maintenant fermer la fenêtre du navigateur.

Contenu connexe

• Démarrage rapide : Protéger une API web ASP.NET Core avec la plateforme d’identités Microsoft.
• En savoir plus en créant une SPA React qui identifie les utilisateurs dans la série de tutoriels suivante à plusieurs parties.
• Activez la réinitialisation du mot de passe.
• Personnaliser l'image de marque par défaut.
• Configurer la connexion avec Google.