Freigeben über

Schnellstart: Anmelden von Benutzern in einer Single-Page-Application (SPA) und Aufrufen der Microsoft Graph-API mithilfe von React

  • Artikel

In diesem Schnellstart wird am Beispiel einer React-Single-Page-Webanwendung (Single-Page App, SPA) gezeigt, wie Sie Benutzer mithilfe des Autorisierungscodeflows mit PKCE (Proof Key for Code Exchange, Prüfschlüssel für Codeaustausch) anmelden. Im Beispiel wird die Microsoft-Authentifizierungsbibliothek für JavaScript verwendet, um die Authentifizierung zu verarbeiten.

Voraussetzungen

Registrierung der Anwendung und Aufzeichnung von Kennungen

Um die Registrierung abzuschließen, geben Sie der Anwendung einen Namen an, geben Sie die unterstützten Kontotypen an, und fügen Sie einen Umleitungs-URI hinzu. Nach der Registrierung werden im Bereich Übersicht der Anwendung die Bezeichner angezeigt, die im Quellcode der Anwendung erforderlich sind.

  1. Melden Sie sich beim Microsoft Entra Admin Center an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie das Symbol Einstellungen im oberen Menü, um über das Menü Verzeichnisse + Abonnements zu dem Mandanten zu wechseln, in dem Sie die Anwendung registrieren möchten.

  3. Navigieren Sie zu Identität>Anwendungen>App-Registrierungen, und wählen Sie Neue Registrierung aus.

  4. Geben Sie einen Namen für die Anwendung ein, z. B. identity-client-web-app.

  5. Wählen Sie für Unterstützte Kontotypen die Option Nur Konten in diesem Organisationsverzeichnis aus. Wenn Sie Informationen zu den verschiedenen Kontotypen benötigen, wählen Sie Auswahlhilfe aus.

  6. Wählen Sie Registrieren aus.

    Screenshot, der zeigt, wie Sie einen Namen eingeben und den Kontotyp im Microsoft Entra Admin Center auswählen.

  7. Der Bereich Übersicht der Anwendung wird angezeigt, wenn die Registrierung abgeschlossen ist. Notieren Sie die Verzeichnis-ID (Mandanten-ID) und die Anwendungs-ID (Client-ID), die in Ihrem Anwendungsquellcode verwendet werden sollen.

    Screenshot: Bezeichnerwerte auf der Seite „Übersicht“ im Microsoft Entra Admin Center

    Anmerkung

    Die unterstützten Kontotypen können wie unter Ändern der von einer Anwendung unterstützten Konten beschrieben geändert werden.

Hinzufügen eines Plattformumleitungs-URI

Führen Sie die folgenden Schritte aus, um ihren App-Typ für ihre App-Registrierung anzugeben:

  1. Wählen Sie unter Verwalten die Option Authentifizierung aus.
  2. Wählen Sie auf der Seite Plattformkonfigurationen die Option Plattform hinzufügen und dann die Option SPA aus.
  3. Geben Sie unter Umleitungs-URIs den URI http://localhost:3000 ein.
  4. Wählen Sie Konfigurieren aus, um Ihre Änderungen zu speichern.

Klonen oder Herunterladen der Beispielanwendung

Um die Beispielanwendung zu erhalten, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen.

  • Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Laden Sie die ZIP-Datei herunter. Extrahieren Sie sie an einen Dateipfad, dessen Name weniger als 260 Zeichen umfasst.

Konfigurieren des Projekts

  1. Öffnen Sie in Ihrer IDE den Projektordner ms-identity-docs-code-javascript/react-spamit dem Beispiel.

  2. Öffnen Sie src/authConfig.js, und aktualisieren Sie die folgenden Werte mit den Informationen, die früher im Admin Center gespeichert wurden.

    /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

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",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};
    • clientId – Der Bezeichner der Anwendung, auch als Client bezeichnet. Ersetzen Sie den Text in Anführungszeichen durch den zuvor notierten Wert für Anwendungs-ID (Client).
    • authority: Die Autorität ist eine URL, die ein Verzeichnis angibt, aus dem die Microsoft-Authentifizierungsbibliothek (MSAL) Token anfordern kann. Ersetzen Sie Enter_the_Tenant_Info_Here durch den zuvor notierten Wert für Verzeichnis-ID (Mandant).
    • redirectUri: Der Umleitungs-URI der Anwendung. Ersetzen Sie den Text in Anführungszeichen ggf. durch den Umleitungs-URI, den Sie zuvor notiert haben.

Führen Sie die Anwendung aus, und melden Sie sich an.

Führen Sie das Projekt mit einem Webserver mithilfe von Node.jsaus:

  1. Führen Sie zum Starten des Servers die folgenden Befehle aus dem Projektverzeichnis aus:

    npm install
npm start

  2. Kopieren Sie die https-URL, die im Terminal angezeigt wird, z. B. https://localhost:3000, und fügen Sie sie in einen Browser ein. Es wird empfohlen, eine private Browsersitzung oder eine Inkognito-Browsersitzung zu verwenden.

  3. Führen Sie die Schritte aus, und geben Sie die erforderlichen Details ein, um sich mit Ihrem Microsoft-Konto anzumelden. Sie werden aufgefordert, eine E-Mail-Adresse anzugeben, damit Ihnen ein Einmalpasscode zugesendet werden kann. Geben Sie den Code ein, wenn Sie dazu aufgefordert werden.

  4. Die Anwendung fordert die Berechtigung an, den Zugriff auf Daten beizubehalten, auf die Sie ihr Zugriff gewährt haben, sowie Sie anzumelden und Ihr Profil zu lesen. Wählen Sie Annehmen aus. Der folgende Screenshot wird angezeigt, der angibt, dass Sie sich bei der Anwendung angemeldet haben und über die Microsoft Graph-API auf Ihre Profildetails zugegriffen haben.

    Screenshot der JavaScript-App, der die Ergebnisse des API-Aufrufs darstellt.

Abmelden von der Anwendung

  1. Wählen Sie die Schaltfläche Abmelden in der oberen rechten Ecke der Seite aus.
  2. Sie werden aufgefordert, ein Konto für die Abmeldung zu wählen. Wählen Sie das Konto aus, das Sie zum Anmelden verwendet haben.

Es wird eine Meldung angezeigt, die angibt, dass Sie sich abgemeldet haben. Sie können nun das Browserfenster schließen.

Verwandte Inhalte