Schnellstart: Anmelden von Benutzern und Abrufen eines Zugriffstokens in einer JavaScript-SPA mithilfe des AutorisierungscodeflowsQuickstart: Sign in users and get an access token in a JavaScript SPA using the auth code flow

In diesem Schnellstart laden Sie ein Codebeispiel herunter und führen es aus, das zeigt, wie eine JavaScript-Single-Page-Webanwendung Benutzer anmelden und Microsoft Graph mithilfe des Autorisierungscodeflow aufrufen kann.In this quickstart, you download and run a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users and call Microsoft Graph using the authorization code flow. Das Codebeispiel veranschaulicht das Abrufen eines Zugriffstokens zum Aufrufen der Microsoft Graph-API oder einer beliebigen Web-API.The code sample demonstrates how to get an access token to call the Microsoft Graph API or any web API.

Eine Abbildung finden Sie unter Funktionsweise des Beispiels.See How the sample works for an illustration.

In dieser Schnellstartanleitung wird MSAL.js 2.0 mit dem Autorisierungscodeflow verwendet.This quickstart uses MSAL.js 2.0 with the authorization code flow. Eine ähnliche Schnellstartanleitung, bei der MSAL.js 1.0 mit dem impliziten Flow verwendet wird, finden Sie unter Schnellstart: Anmelden von Benutzern in JavaScript-Single-Page-Webanwendungen.For a similar quickstart that uses MSAL.js 1.0 with the implicit flow, see Quickstart: Sign in users in JavaScript single-page apps.

VoraussetzungenPrerequisites

Registrieren und Herunterladen Ihrer SchnellstartanwendungRegister and download your quickstart application

Verwenden Sie eine der folgenden Optionen, um die Schnellstartanwendung zu starten.To start your quickstart application, use either of the following options.

Option 1 (Express): Registrieren und automatisches Konfigurieren Ihrer App und anschließendes Herunterladen des CodebeispielsOption 1 (Express): Register and auto configure your app and then download your code sample

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.
  2. Wenn Sie in Ihrem Konto auf mehrere Mandanten zugreifen können, wählen Sie rechts oben das Konto aus, und legen Sie Ihre Portalsitzung auf den gewünschten Azure Active Directory-Mandanten (Azure AD) fest.If your account gives you access to more than one tenant, select the account at the top right, and then set your portal session to the Azure Active Directory (Azure AD) tenant you want to use.
  3. Wählen Sie App-Registrierungen aus.Select App registrations.
  4. Geben Sie einen Namen für Ihre Anwendung ein.Enter a name for your application.
  5. Wählen Sie unter Unterstützte Kontotypen Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten aus.Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  6. Wählen Sie Registrieren.Select Register.
  7. Navigieren Sie zum Schnellstartbereich, und befolgen Sie die Anweisungen, um Ihre neue Anwendung herunterzuladen und automatisch zu konfigurieren.Go to the quickstart pane and follow the instructions to download and automatically configure your new application.

Option 2 (manuell): Registrieren und manuelles Konfigurieren Ihrer Anwendung und des CodebeispielsOption 2 (Manual): Register and manually configure your application and code sample

Schritt 1: Anwendung registrierenStep 1: Register your application

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.
  2. Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie im Menü am oberen Rand den Filter Verzeichnis + Abonnement  , um den Mandanten auszuwählen, für den Sie eine Anwendung registrieren möchten.
  3. Suchen Sie nach Azure Active Directory, und wählen Sie diese Option aus.Search for and select Azure Active Directory.
  4. Wählen Sie unter Verwalten Folgendes aus: App-Registrierungen > Neue Registrierung.Under Manage, select App registrations > New registration.
  5. Geben Sie einen Namen für Ihre Anwendung ein.Enter a Name for your application. Benutzern Ihrer App wird wahrscheinlich dieser Namen angezeigt. Sie können ihn später ändern.Users of your app might see this name, and you can change it later.
  6. Wählen Sie unter Unterstützte Kontotypen Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten aus.Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  7. Wählen Sie Registrieren.Select Register. Notieren Sie sich für die spätere Verwendung auf der Seite Übersicht den Wert von Anwendungs-ID (Client) .On the app Overview page, note the Application (client) ID value for later use.
  8. Wählen Sie im linken Bereich der registrierten Anwendung die Option Authentifizierung aus.In the left pane of the registered application, select Authentication.
  9. Wählen Sie unter Plattformkonfigurationen die Option Plattform hinzufügen aus.Under Platform configurations, select Add a platform. Wählen Sie im Bereich, der geöffnet wird, Single-Page-Webanwendung aus.In the pane that opens select Single-page application.
  10. Legen Sie den Wert für Umleitungs-URI auf http://localhost:3000/ fest.Set the Redirect URI value to http://localhost:3000/.
  11. Wählen Sie Konfigurieren aus.Select Configure.

Schritt 1: Konfigurieren Ihrer Anwendung im Azure-PortalStep 1: Configure your application in the Azure portal

Damit das Codebeispiel in dieser Schnellstartanleitung funktioniert, muss http://localhost:3000/ als Umleitungs-URI (redirectUri) hinzugefügt werden.To make the code sample in this quickstart work, you need to add a redirectUri as http://localhost:3000/.

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

Bereits konfiguriert: Ihre Anwendung ist mit diesen Attributen konfiguriert.Already configured Your application is configured with these attributes.

Schritt 2: Herunterladen des ProjektsStep 2: Download the project

Um das Projekt mit einem Webserver unter Verwendung von Node.js auszuführen, laden Sie die Kernprojektdateien herunter.To run the project with a web server by using Node.js, download the core project files.

Ausführen des Projekts mit einem Webserver unter Verwendung von Node.jsRun the project with a web server by using Node.js

Schritt 3: Konfigurieren Ihrer JavaScript-AppStep 3: Configure your JavaScript app

Öffnen Sie im Ordner app die Datei authConfig.js, und aktualisieren Sie die Werte clientID, authority und redirectUri im msalConfig-Objekt.In the app folder, open the authConfig.js file and update the clientID, authority, and redirectUri values in the msalConfig object.

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

Ändern Sie die Werte im Abschnitt msalConfig, wie hier beschrieben:Modify the values in the msalConfig section as described here:

  • Enter_the_Application_Id_Here ist die Anwendungs-ID (Client) für die von Ihnen registrierte Anwendung.Enter_the_Application_Id_Here is the Application (client) ID for the application you registered.
  • Enter_the_Cloud_Instance_Id_Here ist die Instanz der Azure-Cloud.Enter_the_Cloud_Instance_Id_Here is the instance of the Azure cloud. Geben Sie für die Azure-Hauptcloud oder für die globale Azure-Cloud https://login.microsoftonline.com/ ein.For the main or global Azure cloud, enter https://login.microsoftonline.com/. Informationen zu nationalen Clouds (etwa für China) finden Sie unter Nationale Clouds.For national clouds (for example, China), see National clouds.
  • Enter_the_Tenant_info_here wird auf eine der folgenden Optionen festgelegt:Enter_the_Tenant_info_here is set to one of the following:
    • Wenn Ihre Anwendung Nur Konten in diesem Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch die Mandanten-ID oder den Mandantennamen.If your application supports accounts in this organizational directory, replace this value with the Tenant ID or Tenant name. Beispiel: contoso.microsoft.com.For example, contoso.microsoft.com.
    • Falls Ihre Anwendung Konten in einem beliebigen Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch organizations.If your application supports accounts in any organizational directory, replace this value with organizations.
    • Unterstützt Ihre Anwendung Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten, ersetzen Sie diesen Wert durch common.If your application supports accounts in any organizational directory and personal Microsoft accounts, replace this value with common. Verwenden Sie für diesen Schnellstart common.For this quickstart, use common.
    • Wenn Sie die Unterstützung ausschließlich auf persönliche Microsoft-Konten beschränken möchten, ersetzen Sie diesen Wert durch consumers.To restrict support to personal Microsoft accounts only, replace this value with consumers.
  • Enter_the_Redirect_Uri_Here ist http://localhost:3000/Enter_the_Redirect_Uri_Here is http://localhost:3000/.

Der authority-Wert in Ihrer authConfig.js sollte ähnlich wie folgt aussehen, wenn Sie die Azure-Hauptcloud (global) verwenden:The authority value in your authConfig.js should be similar to the following if you're using the main (global) Azure cloud:

authority: "https://login.microsoftonline.com/common",

Tipp

Die Werte für Anwendungs-ID (Client) , Verzeichnis-ID (Mandant) und Unterstützte Kontotypen finden Sie im Azure-Portal auf der Seite Übersicht der App-Registrierung.To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app registration's Overview page in the Azure portal.

Schritt 3: Ihre App ist konfiguriert und betriebsbereitStep 3: Your app is configured and ready to run

Wir haben das Projekt mit Werten der Eigenschaften ihrer App konfiguriert.We have configured your project with values of your app's properties.

Bearbeiten Sie dann im selben Ordner die Datei graphConfig.js, und aktualisieren Sie die Werte graphMeEndpoint und graphMailEndpoint im apiConfig-Objekt.Then, still in the same folder, edit the graphConfig.js file and update the graphMeEndpoint and graphMailEndpoint values in the apiConfig object.

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

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

Enter_the_Graph_Endpoint_Here ist der Endpunkt, für den API-Aufrufe ausgeführt werden.Enter_the_Graph_Endpoint_Here is the endpoint that API calls will be made against. Geben Sie für den Microsoft Graph-API-Hauptdienst (global) https://graph.microsoft.com/ (einschließlich des nachstehenden Schrägstrichs) ein.For the main (global) Microsoft Graph API service, enter https://graph.microsoft.com/ (include the trailing forward-slash). Weitere Informationen zu Microsoft Graph in nationalen Clouds finden Sie unter Bereitstellungen nationaler Clouds.For more information about Microsoft Graph on national clouds, see National cloud deployment.

Die Werte graphMeEndpoint und graphMailEndpoint in der Datei authConfig.js sollten ähnlich wie folgt aussehen, wenn Sie den Microsoft Graph-API-Hauptdienst (global) verwenden:The graphMeEndpoint and graphMailEndpoint values in the graphConfig.js file should be similar to the following if you're using the main (global) Microsoft Graph API service:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

Schritt 4: Ausführen des ProjektsStep 4: Run the project

Führen Sie das Projekt mit einem Webserver unter Verwendung von „Node.js“ aus:Run the project with a web server by using Node.js:

  1. Führen Sie im Projektverzeichnis die folgenden Befehle aus, um den Server zu starten:To start the server, run the following commands from within the project directory:

    npm install
    npm start
    
  2. Navigieren Sie zu http://localhost:3000/.Browse to http://localhost:3000/.

  3. Wählen Sie Anmelden aus, um den Anmeldevorgang zu starten, und rufen Sie anschließend die Microsoft Graph-API auf.Select Sign In to start the sign-in process and then call the Microsoft Graph API.

    Bei der ersten Anmeldung werden Sie aufgefordert, einzuwilligen, dass die Anwendung auf Ihr Profil zugreifen und Sie anmelden darf.The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. Bei erfolgreicher Anmeldung sollten Ihre Benutzerprofilinformationen auf der Seite angezeigt werden.After you're signed in successfully, your user profile information should be displayed on the page.

Weitere InformationenMore information

Funktionsweise des BeispielsHow the sample works

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

msal.jsmsal.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.The MSAL.js library signs in users and requests the tokens that are used to access an API that's protected by Microsoft identity platform. Die Datei index.html des Beispiels enthält einen Verweis auf die Bibliothek:The sample's index.html file contains a reference to the library:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Wenn Sie „Node.js“ installiert haben, können Sie die aktuelle Version auch mithilfe von Node.js-Paket-Manager (npm) herunterladen:If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):

npm install @azure/msal-browser

Nächste SchritteNext steps

Eine ausführliche Anleitung zum Erstellen der Anwendung, die in diesem Schnellstart verwendet wird, finden Sie im folgenden Tutorial:For a more detailed step-by-step guide on building the application used in this quickstart, see the following tutorial: