Schnellstart: Anmelden von Benutzern in JavaScript-Single-Page-Webanwendungen - Microsoft identity platform

Artikel
04/09/2024

In diesem Schnellstart laden Sie ein Codebeispiel herunter und führen es aus, das zeigt, wie eine JavaScript-Single-Page-Webanwendung (SPA) Benutzer anmelden und Microsoft Graph aufrufen kann. Das Codebeispiel veranschaulicht außerdem das Abrufen eines Zugriffstokens zum Aufrufen der Microsoft Graph-API oder einer beliebigen Web-API.

Eine Abbildung finden Sie unter Funktionsweise des Beispiels.

Voraussetzungen

Tipp

Die Schritte in diesem Artikel können je nach dem Portal, mit dem Sie beginnen, geringfügig variieren.

Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
Node.js
Visual Studio Code (zum Bearbeiten der Projektdateien)

Registrieren und Herunterladen Ihrer Schnellstartanwendung

Verwenden Sie eine der folgenden Optionen, um die Schnellstartanwendung zu starten.

Option 1 (Express): Registrieren und automatisches Konfigurieren Ihrer App und anschließendes Herunterladen des Codebeispiels

Melden Sie sich in der Schnellstartumgebung Azure-Portal – App-Registrierungen an.
Geben Sie einen Namen für Ihre Anwendung ein.
Wählen Sie unter Unterstützte KontotypenKonten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten aus.
Wählen Sie Registrieren.
Befolgen Sie die Anweisungen zum Herunterladen und automatischen Konfigurieren der neuen Anwendung.

Option 2 (manuell): Registrieren und manuelles Konfigurieren Ihrer Anwendung und des Codebeispiels

Schritt 1: Anwendung registrieren

Melden Sie sich beim Azure-Portal an.
Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie im oberen Menü das Symbol für Einstellungen, um den Mandanten auszuwählen, bei dem Sie eine Anwendung registrieren möchten.
Suchen Sie nach Identität, und wählen Sie die Option aus.
Wählen Sie unter Verwalten Folgendes aus: App-Registrierungen>Neue Registrierung.
Geben Sie einen Namen für Ihre Anwendung ein. Benutzern Ihrer App wird wahrscheinlich dieser Namen angezeigt. Sie können ihn später ändern.
Wählen Sie unter Unterstützte KontotypenKonten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten aus.
Wählen Sie Registrieren. Notieren Sie sich für die spätere Verwendung auf der Seite Übersicht den Wert von Anwendungs-ID (Client) .
Für diesen Schnellstart muss der Flow zur impliziten Genehmigung aktiviert werden. Wählen Sie unter Verwalten die Option Authentifizierung aus.
Wählen Sie Plattformkonfigurationen>Plattform hinzufügen aus. Wählen Sie Web aus.
Legen Sie den Wert für Umleitungs-URI auf http://localhost:3000/ fest.
Wählen Sie Zugangs-Token und ID-Token unter den Impliziten Grant- und Hybridflüssen .
Wählen Sie Konfigurierenaus.

Schritt 1: Konfigurieren Ihrer Anwendung im Azure-Portal

Damit das Codebeispiel in dieser Schnellstartanleitung funktioniert, müssen Sie den Umleitungs-URIhttp://localhost:3000/ hinzufügen und die Option Implizite Genehmigung aktivieren.

Make these changes for me (Diese Änderungen für mich vornehmen)

Bereits konfiguriert Ihre Anwendung ist mit diesen Attributen konfiguriert.

Schritt 2: Herunterladen des Projekts

Um das Projekt mit einem Webserver unter Verwendung von Node.js auszuführen, laden Sie die Kernprojektdateien herunter.

Ausführen des Projekts mit einem Webserver unter Verwendung von Node.js

Laden Sie das Codebeispiel herunter.

Schritt 3: Konfigurieren Ihrer JavaScript-App

Bearbeiten Sie authConfig.js im Ordner JavaScriptSPA, und legen Sie unter msalConfig die Werte clientID, authority und redirectUri fest.


 // Config object to be passed to Msal on creation
 const msalConfig = {
   auth: {
     clientId: "Enter_the_Application_Id_Here",
     authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
     redirectUri: "Enter_the_Redirect_Uri_Here",
   },
   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
   }
 };

Hinweis

Enter_the_Supported_Account_Info_Here

Hierbei gilt:

Enter_the_Application_Id_Here ist die Anwendungs-ID (Client) für die von Ihnen registrierte Anwendung.

Den Wert für Anwendungs-ID (Client) finden Sie im Azure-Portal auf der Seite Übersicht der App.
Enter_the_Cloud_Instance_Id_Here ist die Instanz der Azure-Cloud. Geben Sie für die Azure-Hauptcloud oder für die globale Azure-Cloud einfach https://login.microsoftonline.com/ ein. Informationen zu nationalen Clouds (etwa für China) finden Sie unter Nationale Clouds.
Enter_the_Tenant_info_here wird auf eine der folgenden Optionen festgelegt:
- Wenn Ihre Anwendung Nur Konten in diesem Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch die Mandanten-ID oder den Mandantennamen (etwa contoso.microsoft.com).
Den Wert für Verzeichnis-ID (Mandant) finden Sie im Azure-Portal auf der Seite Übersicht der App-Registrierung.
- Falls Ihre Anwendung Konten in einem beliebigen Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch organizations.
- Unterstützt Ihre Anwendung Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten, ersetzen Sie diesen Wert durch common. Wenn Sie die Unterstützung ausschließlich auf persönliche Microsoft-Konten beschränken möchten, ersetzen Sie diesen Wert durch consumers.
Den Wert für Unterstützte Kontotypen finden Sie im Azure-Portal auf der Seite Übersicht der App-Registrierung.
Enter_the_Redirect_Uri_Here ist http://localhost:3000/

Schritt 3: Ihre App ist konfiguriert und betriebsbereit

Wir haben das Projekt mit Werten der Eigenschaften ihrer App konfiguriert.

Bearbeiten Sie dann im selben Ordner die Datei graphConfig.js, um graphMeEndpoint und graphMeEndpoint für das Objekt apiConfig festzulegen.

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Hierbei gilt:

<Der_Graph_Endpunkt_Hier> ist der Endpunkt, an dem die API-Aufrufe erfolgen sollen. Geben Sie für den Microsoft Graph-API-Hauptdienst oder den globalen Microsoft Graph-API-Dienst einfach https://graph.microsoft.com/ ein. Weitere Informationen finden Sie unter Bereitstellungen nationaler Clouds.

Schritt 4: Ausführen des Projekts

Führen Sie das Projekt mit einem Webserver unter Verwendung von Node.js aus:

Führen Sie über das Projektverzeichnis den folgenden Befehl aus, um den Server zu starten:
```
npm install
npm start
```
Öffnen Sie einen Webbrowser, und navigieren Sie zu http://localhost:3000/.
Wählen Sie Anmelden aus, um die Anmeldung zu starten, und rufen Sie anschließend die Microsoft Graph-API auf.

Wählen Sie Anmelden aus, wenn die Anwendung im Browser geladen wurde. Bei der ersten Anmeldung werden Sie aufgefordert, Ihre Zustimmung zu geben, dass die Anwendung auf Ihr Profil zugreifen und Sie anmelden darf. Bei erfolgreicher Anmeldung sollten Ihre Benutzerprofilinformationen auf der Seite angezeigt werden.

Weitere Informationen

Funktionsweise des Beispiels

msal.js

Über die MSAL-Bibliothek werden Benutzer angemeldet und die Token angefordert, die für den Zugriff auf eine durch Microsoft Identity Platform geschützte API verwendet werden. Die Datei index.html des Schnellstarts enthält einen Verweis auf die Bibliothek:

<script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>

Sie können die vorstehende Version durch die letzte veröffentlichte Version unter MSAL.js-Releases ersetzen.

Wenn Sie Node.js installiert haben, können Sie die aktuelle Version auch über Node.js-Paket-Manager (npm) herunterladen:

npm install msal

MSAL-Initialisierung

Im Schnellstartcode wird auch veranschaulicht, wie Sie die MSAL-Bibliothek initialisieren:

  // Config object to be passed to Msal on creation
  const msalConfig = {
    auth: {
      clientId: "00001111-aaaa-2222-bbbb-3333cccc4444", // this is a fake id
      authority: "https://login.microsoftonline.com/common",
      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
    }
  };

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

Hierbei gilt:	BESCHREIBUNG
`clientId`	Die Anwendungs-ID der im Azure-Portal registrierten Anwendung.
`authority`	(Optional:) Die Autoritäts-URL zur Unterstützung von Kontotypen, wie im Konfigurationsabschnitt oben beschrieben. Die Standardautorität lautet `https://login.microsoftonline.com/common`.
`redirectUri`	Der konfigurierte Antwort-/Umleitungs-URI der Anwendungsregistrierung. In diesem Fall `http://localhost:3000/`.
`cacheLocation`	(Optional:) Hiermit wird der Browserspeicher für den Authentifizierungsstatus festgelegt. Der Standardwert lautet „sessionStorage“.
`storeAuthStateInCookie`	(Optional:) Die Bibliothek, in der der für die Überprüfung der Authentifizierungsflows in den Browsercookies erforderliche Authentifizierungsanforderungsstatus gespeichert wird. Dieses Cookie wird für die Browser IE und Edge festgelegt, um die Auswirkungen bestimmter bekannter Probleme zu minimieren.

Weitere Informationen zu den verfügbaren konfigurierbaren Optionen finden Sie unter Initialisieren von Clientanwendungen.

Der folgende Codeausschnitt veranschaulicht, wie Sie Benutzer anmelden:

// Add scopes for the id token to be used at Microsoft identity platform endpoints.
const loginRequest = {
    scopes: ["openid", "profile", "User.Read"],
};

myMSALObj.loginPopup(loginRequest)
    .then((loginResponse) => {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});

Hierbei gilt:	BESCHREIBUNG
`scopes`	(Optional:) Enthält Bereiche, die bei der Anmeldung für die Benutzereinwilligung angefordert werden. Beispiel: `[ "user.read" ]` für Microsoft Graph oder `[ "<Application ID URL>/scope" ]` für benutzerdefinierte Web-APIs (`api://<Application ID>/access_as_user`).

Alternativ hierzu können Sie auch die loginRedirect-Methode verwenden, um die aktuelle Seite auf die Anmeldeseite umzuleiten, anstatt an das Popupfenster.

Anfordern von Token

MSAL verwendet drei Methoden zum Abrufen von Token: acquireTokenRedirect, acquireTokenPopup und acquireTokenSilent

Automatisches Abrufen eines Benutzertokens

Die Methode acquireTokenSilent verwaltet das Abrufen und Erneuern von Token ohne Eingreifen des Benutzers. Nachdem die Methode loginRedirect oder loginPopup zum ersten Mal ausgeführt wurde, wird normalerweise die acquireTokenSilent-Methode zum Abrufen der Token genutzt, die für den Zugriff auf geschützte Ressourcen für nachfolgende Aufrufe verwendet werden. Aufrufe zum Anfordern oder Verlängern von Token werden im Hintergrund ausgeführt.


const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenSilent(tokenRequest)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

Hierbei gilt:	BESCHREIBUNG
`scopes`	Enthält Bereiche, die für die Rückgabe im Zugriffstoken für die API angefordert werden. Beispiel: `[ "mail.read" ]` für Microsoft Graph oder `[ "<Application ID URL>/scope" ]` für benutzerdefinierte Web-APIs (`api://<Application ID>/access_as_user`).

Interaktives Abrufen eines Benutzertokens

Es gibt jedoch Situationen, in denen Sie die Interaktion der Benutzer mit Microsoft Identity Platform erzwingen. Beispiel:

Benutzer müssen ihre Anmeldeinformationen gegebenenfalls erneut eingeben, weil ihr Kennwort abgelaufen ist.
Ihre Anwendung fordert Zugriff auf zusätzliche Ressourcenbereiche an, für die der Benutzer seine Zustimmung erteilen muss.
Die zweistufige Authentifizierung ist erforderlich.

Das übliche empfohlene Muster für die meisten Anwendungen ist zuerst das Aufrufen von acquireTokenSilent, das anschließende Abfangen der Ausnahme und dann das Aufrufen von acquireTokenPopup (oder acquireTokenRedirect), um eine interaktive Anforderung zu starten.

Durch Aufrufen von acquireTokenPopup wird ein Popupfenster für die Anmeldung angezeigt. (Über acquireTokenRedirect werden Benutzer an Microsoft Identity Platform umgeleitet.) In diesem Fenster müssen Benutzer interagieren, indem sie ihre Anmeldeinformationen bestätigen, ihre Zustimmung zur erforderlichen Ressource erteilen oder die zweistufige Authentifizierung durchführen.

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenPopup(requestObj)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });