Freigeben über

Schnellstart: Anmelden und Abrufen eines Zugriffstokens in einer React-SPA mithilfe des Autorisierungscodeflows

  • Artikel

Willkommen! Dies ist wahrscheinlich nicht die Seite, die Sie erwartet haben. Während wir an einer Korrektur arbeiten, sollten Sie über diesen Link zum richtigen Artikel gelangen:

Schnellstart: Anmelden von Benutzer*innen in Single-Page-Webanwendungen (SPA) über den Autorisierungscodeflow mit Proof Key for Code Exchange (PKCE) und React

Wir entschuldigen uns für die Unannehmlichkeiten und bitten Sie um Geduld, während wir an einer Lösung arbeiten.

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

Eine Abbildung finden Sie unter Funktionsweise des Beispiels.

Voraussetzungen

Schritt 1: Konfigurieren Ihrer Anwendung im Azure-Portal

Für die Codebeispiele ist der Umleitungs-URIhttp://localhost:3000/ erforderlich.

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

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

Laden Sie das Codebeispiel herunter.

Hinweis

Enter_the_Supported_Account_Info_Here

Schritt 3: Ihre App ist konfiguriert und betriebsbereit

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

Schritt 4: Ausführen des Projekts

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

  1. Führen Sie im Projektverzeichnis die folgenden Befehle aus, um den Server zu starten:

    npm install
npm start

  2. Navigieren Sie zu http://localhost:3000/.

  3. Wählen Sie Anmelden aus, um den Anmeldevorgang zu starten, und rufen Sie anschließend die Microsoft Graph-API auf.

    Bei der ersten Anmeldung werden Sie aufgefordert, einzuwilligen, dass die Anwendung auf Ihr Profil zugreifen und Sie anmelden darf. Klicken Sie nach erfolgreicher Anmeldung auf Request Profile Information (Profilinformationen anfordern), um Ihre Benutzerprofilinformationen auf der Seite anzuzeigen.

Weitere Informationen

Funktionsweise des Beispiels

Diagramm, in dem der Autorisierungscodeflow für eine Single-Page-Webanwendung dargestellt ist.

msal.js

Über die MSAL.js-Bibliothek werden Benutzer angemeldet und die Token angefordert, die für den Zugriff auf eine durch Microsoft Identity Platform geschützte API verwendet werden.

Wenn Sie „Node.js“ installiert haben, können Sie die aktuelle Version auch mithilfe von Node.js-Paket-Manager (npm) herunterladen:

npm install @azure/msal-browser @azure/msal-react

Nächste Schritte

Eine ausführliche Schritt-für-Schritt-Anleitung zum Erstellen der Autorisierungscodeflow-Anwendung mithilfe von React finden Sie im folgenden Tutorial:

Tutorial: Anmelden von Benutzenden mit einer React-SPA (Single-Page-Webanwendung)