Aktivieren der Authentifizierung in Ihrer eigenen einzelseitigen Anwendung mithilfe von Azure AD B2C

2025-05-07

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird gezeigt, wie Sie Ihrer eigenen Einzelseitenanwendung (SPA) azure Active Directory B2C (Azure AD B2C)-Authentifizierung hinzufügen. Erfahren Sie, wie Sie eine SPA-Anwendung mithilfe der Microsoft-Authentifizierungsbibliothek für JavaScript (MSAL.js) erstellen.

Verwenden Sie diesen Artikel mit "Konfigurieren der Authentifizierung" in einer Beispiel-SPA-Anwendung, wobei Sie die Beispiel-SPA-App durch Ihre eigene SPA-App ersetzen.

Überblick

In diesem Artikel werden Node.js und Express verwendet, um eine grundlegende Node.js Web-App zu erstellen. Express ist ein minimalistisches und flexibles Node.js Web-App-Framework, das eine Reihe von Funktionen für Web- und mobile Anwendungen bietet.

Die MSAL.js-Authentifizierungsbibliothek ist eine von Microsoft bereitgestellte Bibliothek, die das Hinzufügen von Authentifizierungs- und Autorisierungsunterstützung zu SPA-Apps vereinfacht.

Tipp

Der gesamte MSAL.js Code wird auf der Clientseite ausgeführt. Sie können den Node.js- und Express-serverseitigen Code durch andere Lösungen wie .NET Core, Java und Hypertext Preprocessor (PHP)-Skriptsprachen ersetzen.

Voraussetzungen

Informationen zum Überprüfen der Voraussetzungen und Integrationsanweisungen finden Sie unter Konfigurieren der Authentifizierung in einer BEISPIEL-SPA-Anwendung.

Schritt 1: Erstellen eines SPA-App-Projekts

Sie können ein vorhandenes SPA-App-Projekt verwenden oder ein neues Projekt erstellen. Gehen Sie wie folgt vor, um ein neues Projekt zu erstellen:

Öffnen Sie eine Befehlsshell, und erstellen Sie ein neues Verzeichnis (z. B. myApp). Dieses Verzeichnis enthält Ihren App-Code, Ihre Benutzeroberfläche und Konfigurationsdateien.
Geben Sie das von Ihnen erstellte Verzeichnis ein.
Verwenden Sie den npm init Befehl, um eine package.json Datei für Ihre App zu erstellen. Mit diesem Befehl werden Sie aufgefordert, Informationen über Ihre App einzugeben (z. B. den Namen und die Version Ihrer App sowie den Namen des ersten Einstiegspunkts, der index.js Datei). Führen Sie den folgenden Befehl aus, und akzeptieren Sie die Standardwerte:

npm init

Schritt 2: Installieren der Abhängigkeiten

Führen Sie zum Installieren des Express-Pakets in der Befehlsshell den folgenden Befehl aus:

npm install express

Um die statischen Dateien der App zu finden, verwendet der serverseitige Code das Path-Paket .

Führen Sie zum Installieren des Path-Pakets in der Befehlsshell den folgenden Befehl aus:

npm install path

Schritt 3: Konfigurieren des Webservers

Erstellen Sie in Ihrem myApp-Ordner eine Datei mit dem Namen index.js, die den folgenden Code enthält:

// 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}`);
});

Schritt 4: Erstellen der SPA-Benutzeroberfläche

Fügen Sie die SPA-App-Datei index.html hinzu. Diese Datei implementiert eine Benutzeroberfläche, die mit einem Bootstrap-Framework erstellt wurde, und importiert Skriptdateien für Konfigurations-, Authentifizierungs- und Web-API-Aufrufe.

Die Ressourcen, auf die in der index.html-Datei verwiesen wird, sind in der folgenden Tabelle aufgeführt.

Referenz	Definition
MSAL.js-Bibliothek	Authentifizierungs-JavaScript-Bibliothek MSAL.js CDN-Pfad.
Bootstrap Stylesheet	Ein kostenloses Front-End-Framework für schnellere und einfachere Webentwicklung. Das Framework enthält HTML-basierte und CSS-basierte Designvorlagen.

Um die SPA-Indexdatei zu rendern, erstellen Sie im Ordner myApp eine Datei mit dem Namen index.html, die den folgenden HTML-Codeausschnitt enthält:

<!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>

Schritt 5: Konfigurieren der Authentifizierungsbibliothek

Konfigurieren Sie, wie die MSAL.js-Bibliothek in Azure AD B2C integriert wird. Die MSAL.js Bibliothek verwendet ein allgemeines Konfigurationsobjekt, um eine Verbindung mit den Authentifizierungsendpunkten Ihres Azure AD B2C-Mandanten herzustellen.

Gehen Sie wie folgt vor, um die Authentifizierungsbibliothek zu konfigurieren:

Erstellen Sie im Ordner "myApp " einen neuen Ordner namens "App".
Erstellen Sie im Ordner App eine neue Datei mit dem Namen authConfig.js.

Fügen Sie derauthConfig.jsDatei den folgenden JavaScript-Code hinzu:

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
};

Ersetzen Sie <Application-ID> durch die Anwendungs-ID Ihrer App-Registrierung. Weitere Informationen finden Sie unter Konfigurieren der Authentifizierung in einer BEISPIEL-SPA-Anwendung.

Tipp

Weitere MSAL-Objektkonfigurationsoptionen finden Sie im Artikel " Authentifizierungsoptionen" .

Schritt 6: Angeben Ihrer Azure AD B2C-Benutzerflüsse

Erstellen Sie diepolicies.jsDatei, die Informationen zu Ihrer Azure AD B2C-Umgebung enthält. Die MSAL.js Bibliothek verwendet diese Informationen, um Authentifizierungsanforderungen an Azure AD B2C zu erstellen.

Gehen Sie wie folgt vor, um Ihre Azure AD B2C-Benutzerflüsse anzugeben:

Erstellen Sie im Ordner App eine neue Datei mit dem Namen policies.js.

Fügen Sie der policies.js Datei den folgenden Code hinzu:

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"
}

Ersetzen Sie B2C_1_SUSI durch den Namen Ihrer Azure AD B2C-Anmelderichtlinie.
Ersetzen Sie B2C_1_EditProfile durch den Azure AD B2C-Richtliniennamen für die Profilbearbeitung.
Ersetzen Sie alle Vorkommen von contoso durch den Namen Ihres Azure AD B2C-Mandanten.

Implementieren Sie in diesem Schritt die Methoden zum Initialisieren des Anmeldeflusses, des API-Zugriffstokenerwerbs und der Abmeldemethoden.

Weitere Informationen finden Sie im Artikel Verwenden Sie die Microsoft Authentication Library (MSAL), um den Benutzer anzumelden.

Gehen Sie wie folgt vor, um sich beim Benutzer anzumelden:

Erstellen Sie im Ordner App eine neue Datei mit dem Namen authRedirect.js.

Kopieren Sie in Ihrem authRedirect.jsden folgenden Code, und fügen Sie ihn ein:

// 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);
}

Schritt 8: Konfigurieren des Web-API-Speicherorts und -Bereichs

Damit Ihre SPA-App eine Web-API aufrufen kann, geben Sie den Standort des API-Endpunkts und die Bereiche an, die zur Autorisierung des Zugriffs auf die Web-API verwendet werden.

Gehen Sie wie folgt vor, um den Standort und die Reichweite der Web-API zu konfigurieren:

Erstellen Sie im Ordner App eine neue Datei mit dem Namen apiConfig.js.

Kopieren Sie in Ihrem apiConfig.jsden folgenden Code, und fügen Sie ihn ein:

// 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"
};

Ersetzen Sie contoso durch den Namen Ihres Mandanten. Der erforderliche Bereichsname kann wie im Artikel " Bereiche konfigurieren" beschrieben gefunden werden.
Ersetzen Sie den Wert für webApi, mit der URL Ihres Web-API-Endpunkts.

Schritt 9: Aufrufen der Web-API

Definieren Sie die HTTP-Anforderung an Ihren API-Endpunkt. Die HTTP-Anforderung ist so konfiguriert, dass das Zugriffstoken, das mit MSAL.js abgerufen wurde, an den Authorization HTTP-Header in der Anforderung übergeben wird.

Der folgende Code definiert die HTTP-Anforderung GET an den API-Endpunkt und übergibt das Zugriffstoken innerhalb des Authorization HTTP-Headers. Der API-Speicherort wird durch den webApi Schlüssel in apiConfig.jsdefiniert.

Gehen Sie wie folgt vor, um Ihre Web-API mithilfe des von Ihnen erworbenen Tokens aufzurufen:

Erstellen Sie im Ordner App eine neue Datei mit dem Namen api.js.

Fügen Sie der api.js Datei den folgenden Code hinzu:

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);
    });
}

Schritt 10: Hinzufügen der Referenz zu UI-Elementen

Die SPA-App verwendet JavaScript, um die UI-Elemente zu steuern. So werden beispielsweise die Anmelde- und Abmeldeschaltflächen angezeigt und die Benutzer-ID-Tokenansprüche auf dem Bildschirm gerendert.

Gehen Sie wie folgt vor, um den Verweis auf ui-Elemente hinzuzufügen:

Erstellen Sie im Ordner App eine Datei mit dem Namen ui.js.

Fügen Sie der ui.js Datei den folgenden Code hinzu:

// 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'));
}

Schritt 11: Ausführen der SPA-Anwendung

Führen Sie in der Befehlsshell die folgenden Befehle aus:

npm install  
npm ./index.js

Wechseln Sie zu https://localhost:6420.
Wählen Sie Anmeldung aus.
Schließen Sie den Registrierungs- oder Anmeldevorgang ab.

Nachdem Sie sich erfolgreich authentifiziert haben, wird das analysierte ID-Token auf dem Bildschirm angezeigt. Wählen Sie aus Call API , um Ihren API-Endpunkt aufzurufen.

Nächste Schritte

Erfahren Sie mehr über das Codebeispiel.
Konfigurieren Sie Authentifizierungsoptionen in Ihrer eigenen SPA-Anwendung mithilfe von Azure AD B2C.
Aktivieren der Authentifizierung in Ihrer Web-API