Activer l’authentification dans votre propre application monopage en utilisant Azure Active Directory B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article explique comment ajouter l’authentification Azure Active Directory B2C (Azure AD B2C) à votre propre application monopage (SPA). Découvrez comment créer une application SPA à l’aide de la bibliothèque d’authentification Microsoft pour JavaScript (MSAL.js).

Utilisez cet article avec Configurer l’authentification dans un exemple d’application SPA, en remplaçant l’exemple d’application SPA par votre propre application SPA.

Aperçu

Cet article utilise Node.js et Express pour créer une application web Node.js de base. Express est un cadre d’application Web Node.js minimal et flexible qui fournit un ensemble de fonctionnalités pour les applications Web et mobiles.

La bibliothèque d’authentificationMSAL.js est une bibliothèque fournie par Microsoft qui simplifie l’ajout de la prise en charge de l’authentification et de l’autorisation aux applications SPA.

Conseil / Astuce

L’ensemble du code MSAL.js s’exécute côté client. Vous pouvez remplacer le code côté serveur Node.js et Express par d’autres solutions, telles que .NET Core, Java et les langages de script PHP.

Conditions préalables

Pour passer en revue les prérequis et les instructions d’intégration, consultez Configurer l’authentification dans un exemple d’application SPA.

Étape 1 : Créer un projet d’application SPA

Vous pouvez utiliser un projet d’application SPA existant ou en créer un. Pour créer un projet, procédez comme suit :

Ouvrez un interpréteur de commandes et créez un répertoire (par exemple, myApp). Ce répertoire contient le code de votre application, l’interface utilisateur et les fichiers de configuration.
Entrez le répertoire que vous avez créé.
Utilisez la npm init commande pour créer un package.json fichier pour votre application. Cette commande vous invite à fournir des informations sur votre application (par exemple, le nom et la version de votre application, ainsi que le nom du point d’entrée initial, le fichier index.js ). Exécutez la commande suivante et acceptez les valeurs par défaut :

npm init

Étape 2 : Installer les dépendances

Pour installer le package Express, dans votre interpréteur de commandes, exécutez la commande suivante :

npm install express

Pour localiser les fichiers statiques de l’application, le code côté serveur utilise le package Path .

Pour installer le package Path, dans votre interpréteur de commandes, exécutez la commande suivante :

npm install path

Étape 3 : Configurer votre serveur web

Dans votre dossier myApp , créez un fichier nommé index.js, qui contient le code suivant :

// Initialize express
const express = require('express');
const app = express();

// The port to listen to incoming HTTP requests
const port = 6420;

// Initialize path
const path = require('path');

// Set the front-end folder to serve public assets.
app.use(express.static('App'));

// Set up a route for the index.html
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

// Start the server, and listen for HTTP requests
app.listen(port, () => {
  console.log(`Listening on http://localhost:${port}`);
});

Étape 4 : Créer l’interface utilisateur SPA

Ajoutez le fichier de l'application SPA index.html. Ce fichier implémente une interface utilisateur créée avec une infrastructure Bootstrap et importe des fichiers de script pour les appels d’API web, d’authentification et de configuration.

Les ressources référencées par le fichier index.html sont détaillées dans le tableau suivant :

Référence	Définition
Bibliothèque MSAL.js	Chemin CDN de la bibliothèque JavaScript d’authentification MSAL.js.
Feuille de style Bootstrap	Infrastructure frontale gratuite pour un développement web plus rapide et plus facile. L’infrastructure inclut des modèles de conception basés sur HTML et CSS.

Pour afficher le fichier d’index SPA, dans le dossier myApp , créez un fichier nommé index.html, qui contient l’extrait de code HTML suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>My Azure AD B2C test app</title>
    </head>
    <body>
        <h2>My Azure AD B2C test app</h2>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
        <button type="button" id="signIn" class="btn btn-secondary" onclick="signIn()">Sign-in</button>
        <button type="button" id="signOut" class="btn btn-success d-none" onclick="signOut()">Sign-out</button>
        <h5 id="welcome-div" class="card-header text-center d-none"></h5>
        <br />
        <!-- Content -->
        <div class="card">
            <div class="card-body text-center">
                <pre id="response" class="card-text"></pre>
                <button type="button" id="callApiButton" class="btn btn-primary d-none" onclick="passTokenToApi()">Call API</button>
            </div>
        </div>
        <script src="https://alcdn.msauth.net/browser/2.14.2/js/msal-browser.min.js" integrity="sha384-ggh+EF1aSqm+Y4yvv2n17KpurNcZTeYtUZUvhPziElsstmIEubyEB6AIVpKLuZgr" crossorigin="anonymous"></script>

        <!-- Importing app scripts (load order is important) -->
        <script type="text/javascript" src="./apiConfig.js"></script>
        <script type="text/javascript" src="./policies.js"></script>
        <script type="text/javascript" src="./authConfig.js"></script>
        <script type="text/javascript" src="./ui.js"></script>

        <!-- <script type="text/javascript" src="./authRedirect.js"></script>   -->
        <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
        <script type="text/javascript" src="./authRedirect.js"></script>
        <script type="text/javascript" src="./api.js"></script>
    </body>
</html>

Étape 5 : Configurer la bibliothèque d’authentification

Configurez la façon dont la bibliothèque MSAL.js s’intègre à Azure AD B2C. La bibliothèque MSAL.js utilise un objet de configuration commun pour se connecter aux points de terminaison d’authentification de votre locataire Azure AD B2C.

Pour configurer la bibliothèque d’authentification, procédez comme suit :

Dans le dossier myApp , créez un dossier appelé Application.
Dans le dossier Application , créez un fichier nommé authConfig.js.

Ajoutez le code JavaScript suivant au fichier authConfig.js :

const msalConfig = {
    auth: {
    clientId: "<Application-ID>", 
    authority: b2cPolicies.authorities.signUpSignIn.authority, 
    knownAuthorities: [b2cPolicies.authorityDomain], 
    redirectUri: "http://localhost:6420",
    },
    cache: {
    cacheLocation: "localStorage", .
    storeAuthStateInCookie: false, 
    }
};

const loginRequest = {
scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
scopes: [...apiConfig.b2cScopes],
forceRefresh: false
};

Remplacez <Application-ID> par votre ID d’inscription de l'application. Pour plus d’informations, consultez Configurer l’authentification dans un exemple d’application SPA.

Conseil / Astuce

Pour plus d’options de configuration d’objet MSAL, consultez l’article options d’authentification .

Étape 6 : Spécifier vos flux d’utilisateurs Azure AD B2C

Créez le fichier policies.js , qui fournit des informations sur votre environnement Azure AD B2C. La bibliothèque MSAL.js utilise ces informations pour créer des demandes d’authentification auprès d’Azure AD B2C.

Pour spécifier vos flux d’utilisateurs Azure AD B2C, procédez comme suit :

Dans le dossier Application , créez un fichier nommé policies.js.

Ajoutez le code suivant au fichier policies.js :

const b2cPolicies = {
    names: {
        signUpSignIn: "B2C_1_SUSI",
        editProfile: "B2C_1_EditProfile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id",
        },
        editProfile: {
            authority: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-EditProfile-Policy-Id"
        }
    },
    authorityDomain: "contoso.b2clogin.com"
}

Remplacez B2C_1_SUSI par le nom de votre stratégie Azure AD B2C de connexion.
remplacez B2C_1_EditProfile par le nom de la stratégie de modification de profil Azure AD B2C.
Remplacez toutes les instances de contoso par le nom de votre tenant Azure AD B2C.

Dans cette étape, implémentez les méthodes pour initialiser le flux de connexion, l’acquisition de jetons d’accès à l’API et les méthodes de déconnexion.

Pour plus d’informations, consultez l’article Utiliser la bibliothèque d’authentification Microsoft (MSAL) pour se connecter l'utilisateur.

Pour vous connecter à l’utilisateur, procédez comme suit :

Dans le dossier Application , créez un fichier nommé authRedirect.js.

Dans votre authRedirect.js, copiez et collez le code suivant :

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

let accountId = "";
let idTokenObject = "";
let accessToken = null;

myMSALObj.handleRedirectPromise()
    .then(response => {
        if (response) {
            /**
             * For the purpose of setting an active account for UI update, we want to consider only the auth response resulting
             * from SUSI flow. "tfp" claim in the id token tells us the policy (NOTE: legacy policies may use "acr" instead of "tfp").
             * To learn more about B2C tokens, visit https://learn.microsoft.com/azure/active-directory-b2c/tokens-overview
             */
            if (response.idTokenClaims['tfp'].toUpperCase() === b2cPolicies.names.signUpSignIn.toUpperCase()) {
                handleResponse(response);
            }
        }
    })
    .catch(error => {
        console.log(error);
    });


function setAccount(account) {
    accountId = account.homeAccountId;
    idTokenObject = account.idTokenClaims;
    myClaims= JSON.stringify(idTokenObject);
    welcomeUser(myClaims);
}

function selectAccount() {

    /**
     * See here for more information 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.length < 1) {
        return;
    } else if (currentAccounts.length > 1) {

        /**
         * Due to the way MSAL caches account objects, the auth response from initiating a user-flow
         * is cached as a new account, which results in more than one account in the cache. Here we make
         * sure we are selecting the account with homeAccountId that contains the sign-up/sign-in user-flow, 
         * as this is the default flow the user initially signed-in with.
         */
        const accounts = currentAccounts.filter(account =>
            account.homeAccountId.toUpperCase().includes(b2cPolicies.names.signUpSignIn.toUpperCase())
            &&
            account.idTokenClaims.iss.toUpperCase().includes(b2cPolicies.authorityDomain.toUpperCase())
            &&
            account.idTokenClaims.aud === msalConfig.auth.clientId 
            );

        if (accounts.length > 1) {
            // localAccountId identifies the entity for which the token asserts information.
            if (accounts.every(account => account.localAccountId === accounts[0].localAccountId)) {
                // All accounts belong to the same user
                setAccount(accounts[0]);
            } else {
                // Multiple users detected. Logout all to be safe.
                signOut();
            };
        } else if (accounts.length === 1) {
            setAccount(accounts[0]);
        }

    } else if (currentAccounts.length === 1) {
        setAccount(currentAccounts[0]);
    }
}

// in case of page refresh
selectAccount();

async function handleResponse(response) {

    if (response !== null) {
        setAccount(response.account);
    } else {
        selectAccount();
    }
}

function signIn() {
    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
    };

    myMSALObj.logoutRedirect(logoutRequest);
}

function getTokenRedirect(request) {
    request.account = myMSALObj.getAccountByHomeId(accountId); 

    return myMSALObj.acquireTokenSilent(request)
        .then((response) => {
            // In case the response from B2C server has an empty accessToken field
            // throw an error to initiate token acquisition
            if (!response.accessToken || response.accessToken === "") {
                throw new msal.InteractionRequiredAuthError;
            } else {
                console.log("access_token acquired at: " + new Date().toString());
                accessToken = response.accessToken;
                passTokenToApi();
            }
        }).catch(error => {
            console.log("Silent token acquisition fails. Acquiring token using popup. \n", error);
            if (error instanceof msal.InteractionRequiredAuthError) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenRedirect(request);
            } else {
                console.log(error);   
            }
    });
}

// Acquires and access token and then passes it to the API call
function passTokenToApi() {
    if (!accessToken) {
        getTokenRedirect(tokenRequest);
    } else {
        try {
            callApi(apiConfig.webApi, accessToken);
        } catch(error) {
            console.log(error); 
        }
    }
}

function editProfile() {


    const editProfileRequest = b2cPolicies.authorities.editProfile;
    editProfileRequest.loginHint = myMSALObj.getAccountByHomeId(accountId).username;

    myMSALObj.loginRedirect(editProfileRequest);
}

Étape 8 : Configurer l’emplacement et l’étendue de l’API web

Pour permettre à votre application SPA d’appeler une API web, fournissez l’emplacement du point de terminaison de l’API web et les étendues à utiliser pour autoriser l’accès à l’API web.

Pour configurer l’emplacement et les étendues de l’API web, procédez comme suit :

Dans le dossier Application , créez un fichier nommé apiConfig.js.

Dans votre apiConfig.js, copiez et collez le code suivant :

// The current application coordinates were pre-registered in a B2C tenant.
const apiConfig = {
    b2cScopes: ["https://contoso.onmicrosoft.com/tasks/tasks.read"],
    webApi: "https://mydomain.azurewebsites.net/tasks"
};

Remplacez contoso par votre nom de locataire. Vous trouverez le nom de l’étendue requise comme décrit dans l’article Configurer les étendues .
Remplacez la valeur de webApi par l’emplacement du point de terminaison de votre API web.

Étape 9 : Appeler votre API web

Définissez la requête HTTP sur votre point de terminaison d’API. La requête HTTP est configurée pour transmettre le jeton d’accès acquis avec MSAL.js dans l’en-tête Authorization HTTP de la demande.

Le code suivant définit la requête HTTP GET au point de terminaison de l’API, en passant le jeton d’accès dans l’en-tête Authorization HTTP. L’emplacement de l’API est défini par la webApi clé dans apiConfig.js.

Pour appeler votre API web à l’aide du jeton que vous avez acquis, procédez comme suit :

Dans le dossier Application , créez un fichier nommé api.js.

Ajoutez le code suivant au fichier api.js :

function callApi(endpoint, token) {

    const headers = new Headers();
    const bearer = `Bearer ${token}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    logMessage('Calling web API...');

    fetch(endpoint, options)
    .then(response => response.json())
    .then(response => {

        if (response) {
        logMessage('Web API responded: ' + response.name);
        }

        return response;
    }).catch(error => {
        console.error(error);
    });
}

Étape 10 : Ajouter la référence des éléments d’interface utilisateur

L’application SPA utilise JavaScript pour contrôler les éléments de l’interface utilisateur. Par exemple, elle affiche les boutons de connexion et de déconnexion, et affiche les revendications de jeton d’ID d’utilisateur à l’écran.

Pour ajouter la référence des éléments d’interface utilisateur, procédez comme suit :

Dans le dossier App , créez un fichier nommé ui.js.

Ajoutez le code suivant au fichier ui.js :

// Select DOM elements to work with
const signInButton = document.getElementById('signIn');
const signOutButton = document.getElementById('signOut')
const titleDiv = document.getElementById('title-div');
const welcomeDiv = document.getElementById('welcome-div');
const tableDiv = document.getElementById('table-div');
const tableBody = document.getElementById('table-body-div');
const editProfileButton = document.getElementById('editProfileButton');
const callApiButton = document.getElementById('callApiButton');
const response = document.getElementById("response");
const label = document.getElementById('label');

function welcomeUser(claims) {
    welcomeDiv.innerHTML = `Token claims: </br></br> ${claims}!`

    signInButton.classList.add('d-none');
    signOutButton.classList.remove('d-none');
    welcomeDiv.classList.remove('d-none');
    callApiButton.classList.remove('d-none');
}

function logMessage(s) {
    response.appendChild(document.createTextNode('\n' + s + '\n'));
}

Étape 11 : Exécuter votre application SPA

Dans votre interpréteur de commandes, exécutez les commandes suivantes :

npm install  
npm ./index.js

Accédez à https://localhost:6420.
Sélectionnez Connexion.
Terminez le processus d’inscription ou de connexion.

Une fois que vous avez correctement authentifié, le jeton d’ID analysé s’affiche à l’écran. Sélectionnez cette option Call API pour appeler votre point de terminaison d’API.

Étapes suivantes

En savoir plus sur l’exemple de code.
Configurez les options d’authentification dans votre propre application SPA à l’aide d’Azure AD B2C.
Activer l’authentification dans votre propre API web.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-05-06