Tutoriel : gérer les flux d’authentification dans une application monopage JavaScript Vanilla

Article
11/25/2024

Ce tutoriel est la troisième partie d’une série qui présente la construction d’une application monopage (SPA) Vanilla JavaScript (JS) et sa préparation à l’authentification. Dans la Partie 2 de cette série, vous avez créé une application monopage Vanilla JavaScript et vous l’avez préparée à l’authentification avec votre locataire externe. Dans ce tutoriel, vous apprenez à gérer les flux d’authentification dans votre application en ajoutant des composants MSAL (Microsoft Authentication Library).

Dans ce tutoriel,

Configurer les paramètres de l’application
Ajouter du code à authRedirect.js pour gérer le flux d’authentification
Ajouter du code à authPopup.js pour gérer le flux d’authentification

Prérequis

Tutoriel : Préparer votre locataire externe à authentifier des utilisateurs dans une application monopage JavaScript Vanilla.

Modifier le fichier de configuration de l’authentification

Ouvrez public/authConfig.js pour ajouter l’extrait de code suivant :

import { LogLevel } from '@azure/msal-browser';

/**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
*/
export const loginRequest = {
    scopes: [],
};

Remplacez les valeurs suivantes par les valeurs du Portail Azure :
- Recherchez la valeur Enter_the_Application_Id_Here, puis remplacez-la par l’ID d’application (clientId) de l’application que vous avez inscrite dans le Centre d’administration Microsoft Entra.
  - Dans Autorité, recherchez Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine de votre locataire. Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez comment consulter les détails de votre locataire.
Enregistrez le fichier.

Utilisation d’un domaine d’URL personnalisé (facultatif)

Utilisez un domaine personnalisé pour personnaliser entièrement l’URL d’authentification. Du point de vue des utilisateurs, ces derniers restent sur votre domaine pendant le processus d’authentification, au lieu d’être redirigés vers le nom de domaine ciamlogin.com.

Procédez de la manière suivante pour utiliser un domaine personnalisé :

Utilisez les étapes décrites dans Activer les domaines d’URL personnalisés pour les applications dans des locataires externes afin d’activer un domaine d’URL personnalisé pour votre tenant externe.
Dans votre fichier authConfig.js, recherchez l’objet auth, puis :
1. Mettez à jour la valeur de la propriété authority sur https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Remplacez Enter_the_Custom_Domain_Here par votre domaine d’URL personnalisé et Enter_the_Tenant_ID_Here par votre ID de locataire. Si vous ne disposez pas de votre ID de locataire, découvrez comment consulter les détails de votre locataire.
2. Ajoutez une propriété knownAuthorities avec une valeur [Entrer_le_domaine_personnalisé_ici].

Après avoir apporté les modifications à votre fichier authConfig.js, si votre domaine d’URL personnalisé est login.contoso.com et que votre ID de locataire est aaaabbbb-0000-cccc-1111-dddd2222eeee, votre fichier devrait ressembler à l’extrait de code suivant :

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Ajout de code au fichier de redirection

Un fichier de redirection est nécessaire pour gérer la réponse à partir de la page de connexion. Il sert à extraire le jeton d’accès du fragment d’URL et à l’utiliser pour appeler l’API protégée. Il permet également de gérer les erreurs qui se produisent pendant le processus d’authentification.

Ouvrez public/authRedirect.js, puis ajoutez l’extrait de code suivant :

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

/**
* A promise handler needs to be registered for handling the
* response returned from redirect flow. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirect-apis
*/
myMSALObj.handleRedirectPromise()
    .then(handleResponse)
    .catch((error) => {
        console.error(error);
    });

function selectAccount() {

    /**
    * See here for more info on account retrieval: 
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
    */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (!currentAccounts) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
    * To see the full list of response object properties, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
    */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();

    }
}

function signIn() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: '/signout', // remove this line if you would like navigate to index page after logout.

    };

    myMSALObj.logoutRedirect(logoutRequest);
}

Enregistrez le fichier .

Ajout de code au fichier authPopup.js

L’application utilise authPopup.js pour gérer le flux d’authentification lorsque l’utilisateur se connecte à l’aide de la fenêtre contextuelle. La fenêtre contextuelle est utilisée lorsque l’utilisateur est déjà connecté et que l’application doit obtenir un jeton d’accès pour une autre ressource.

Ouvrez public/authPopup.js, puis ajoutez l’extrait de code suivant :

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

function selectAccount () {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (!currentAccounts  || currentAccounts.length < 1) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
     * To see the full list of response object properties, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
     */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        mainWindowRedirectUri: '/signout'
    };

    myMSALObj.logoutPopup(logoutRequest);
}

selectAccount();

Enregistrez le fichier.

Étape suivante

Partie 4 : Connexion et déconnexion de la SPA Vanilla JS

Partager via