Schnellstart: Anmelden von Benutzern und Abrufen eines Zugriffstokens in einer Angular-Single-Page-WebanwendungQuickstart: Sign in users and get an access token in an Angular single-page application

In diesem Schnellstart laden Sie ein Codebeispiel herunter und führen es aus, das zeigt, wie eine Angular-Single-Page-Webanwendung (SPA) Benutzer anmelden und Microsoft Graph aufrufen kann.In this quickstart, you download and run a code sample that demonstrates how an Angular single-page application (SPA) can sign in users and call Microsoft Graph. 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.

VoraussetzungenPrerequisites

Registrieren und Herunterladen der Schnellstart-AppRegister and download the quickstart app

Verwenden Sie eine der folgenden Optionen, um die Schnellstart-App zu starten:To start the quickstart app, use either of the following options.

Option 1 (Express): Registrieren und automatisches Konfigurieren der App und anschließendes Herunterladen des CodebeispielsOption 1 (express): Register and automatically configure the app, and then download the code sample

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.
  2. Sollte Ihr Konto Zugriff auf mehrere Mandanten haben, wählen Sie rechts oben das entsprechende Konto aus, und legen Sie Ihre Portalsitzung auf den gewünschten Azure AD-Mandanten (Azure Active Directory) fest.If your account has access to more than one tenant, select the account at the upper right, and then set your portal session to the Azure Active Directory (Azure AD) tenant that you want to use.
  3. Öffnen Sie im Azure-Portal den neuen Bereich App-Registrierungen.Open the new App registrations pane in the Azure portal.
  4. Geben Sie einen Namen für Ihre Anwendung ein, und klicken Sie auf Registrieren.Enter a name for your application, and then select Register.
  5. Navigieren Sie zum Schnellstartbereich, und zeigen Sie den Angular-Schnellstart an.Go to the quickstart pane and view the Angular quickstart. Befolgen Sie die Anweisungen zum Herunterladen und automatischen Konfigurieren der neuen Anwendung.Follow the instructions to download and automatically configure your new application.

Option 2 (manuell): Registrieren Sie die Anwendung und das Codebeispiel, und konfigurieren Sie sie manuell.Option 2 (manual): Register and manually configure the application and code sample

Schritt 1: Registrieren der AnwendungStep 1: Register the application

  1. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.
  2. Sollte Ihr Konto Zugriff auf mehrere Mandanten haben, wählen Sie rechts oben Ihr Konto aus, und legen Sie Ihre Portalsitzung auf den gewünschten Azure AD-Mandanten fest.If your account has access to more than one tenant, select your account at the upper right, and set your portal session to the Azure AD tenant that you want to use.
  3. Befolgen Sie die Anleitung zum Registrieren einer Single-Page-Webanwendung im Azure-Portal.Follow the instructions to register a single-page application in the Azure portal.
  4. Fügen Sie im Bereich Authentifizierung Ihrer App-Registrierung eine neue Plattform hinzu, und registrieren Sie den Umleitungs-URI: http://localhost:4200/.Add a new platform on the Authentication pane of your app registration and register the redirect URI: http://localhost:4200/.
  5. In dieser Schnellstartanleitung wird der Flow zur impliziten Genehmigung verwendet.This quickstart uses the implicit grant flow. Wählen Sie die Einstellungen vom Typ Implizite Genehmigung für ID-Token und Zugriffstoken aus.Select the Implicit grant settings for ID tokens and Access tokens. ID- und Zugriffstoken sind erforderlich, da diese App Benutzer anmeldet und eine API aufruft.ID tokens and access tokens are required because this app signs in users and calls an API.

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

Damit das Codebeispiel für diesen Schnellstart funktioniert, müssen Sie den Umleitungs-URI http://localhost:4200/ hinzufügen und Implizite Genehmigung aktivieren.For the code sample for this quickstart to work, you need to add a redirect URI as http://localhost:4200/ and enable Implicit grant.

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 CodebeispielsStep 2: Download the code sample

Wenn Sie das Projekt mit einem Webserver unter Verwendung von Node.js ausführen möchten, klonen Sie das Beispielrepository, oder laden Sie die Kernprojektdateien herunter.To run the project with a web server by using Node.js, clone the sample repository or download the core project files. Öffnen Sie die Dateien mit einem Editor (beispielsweise Visual Studio Code).Open the files by using an editor such as Visual Studio Code.

Schritt 3: Konfigurieren der JavaScript-AppStep 3: Configure the JavaScript app

Bearbeiten Sie im Ordner src/app die Datei app.module.ts, und legen Sie unter MsalModule.forRoot die Werte clientId und authority fest.In the src/app folder, edit app.module.ts and set the clientId and authority values under MsalModule.forRoot.

MsalModule.forRoot({
   auth: {
       clientId: 'Enter_the_Application_Id_here', // This is your client ID
       authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // This is your tenant info
       redirectUri: 'Enter_the_Redirect_Uri_Here' // This is your redirect URI
   },
   cache: {
       cacheLocation: 'localStorage',
       storeAuthStateInCookie: isIE, // set to true for IE 11
   },
},
//... )

Hinweis

Enter_the_Supported_Account_Info_HereEnter_the_Supported_Account_Info_Here

Ersetzen Sie die folgenden Werte:Replace these values:

WertnameValue name BESCHREIBUNGDescription
Enter_the_Application_Id_HereEnter_the_Application_Id_Here Der Wert für Anwendungs-ID (Client) auf der Seite Übersicht Ihrer AnwendungsregistrierungOn the Overview page of your application registration, this is your Application(client) ID value.
Enter_the_Cloud_Instance_Id_HereEnter_the_Cloud_Instance_Id_Here Die Instanz der Azure-Cloud.This 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 (z. B. für China) finden Sie unter Nationale Clouds.For national clouds (for example, China), see National clouds.
Enter_the_Tenant_Info_HereEnter_the_Tenant_Info_Here Legen Sie eine der folgenden Optionen fest: Wenn Ihre Anwendung Konten in diesem Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch die Verzeichnis-ID (Mandant) oder den Mandantennamen (z. B. contoso.microsoft.com).Set to one of the following options: If your application supports accounts in this organizational directory, replace this value with the directory (tenant) ID or tenant name (for example, contoso.microsoft.com). Wenn Ihre Anwendung Konten in einem beliebigen Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch Organisationen.If your application supports accounts in any organizational directory, replace this value with organizations. Wenn Ihre Anwendung Konten in allen Organisationsverzeichnissen und persönliche Microsoft-Konten unterstützt, ersetzen Sie diesen Wert durch common.If your application supports accounts in any organizational directory and personal Microsoft accounts, replace this value with 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_HereEnter_the_Redirect_Uri_Here Ersetzen Sie diesen Wert durch http://localhost:4200 .Replace with http://localhost:4200.
cacheLocationcacheLocation (Optional) Legen Sie den Browserspeicher für den Authentifizierungsstatus fest.(Optional) Set the browser storage for the authentication state. Der Standardwert lautet sessionStorage.The default is sessionStorage.
storeAuthStateInCookiestoreAuthStateInCookie (Optional) Identifizieren Sie die Bibliothek, in der der Authentifizierungsanforderungsstatus gespeichert wird.(Optional) Identify the library that stores the authentication request state. Dieser Status ist für die Überprüfung der Authentifizierungsflows in den Browsercookies erforderlich.This state is required to validate the authentication flows in the browser cookies. Dieses Cookie wird für Internet Explorer und Microsoft Edge festgelegt, um diese beiden Browser zu unterstützen.This cookie is set for Internet Explorer and Edge to accommodate those two browsers. Weitere Informationen finden Sie im Artikel zu bekannten Problemen.For more details, see the known issues.

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.To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app's Overview page in the Azure portal.

Weitere Informationen zu den verfügbaren konfigurierbaren Optionen finden Sie unter Initialisieren von Clientanwendungen.For more information about available configurable options, see Initialize client applications.

Den Quellcode für die MSAL.js-Bibliothek finden Sie auf GitHub im Repository AzureAD/microsoft-authentication-library-for-js.You can find the source code for the MSAL.js library in the AzureAD/microsoft-authentication-library-for-js repository on GitHub.

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

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

Wenn Sie Node.js verwenden, gehen Sie wie folgt vor:If you're using Node.js:

  1. Starten Sie den Server, indem Sie im Projektverzeichnis die folgenden Befehle ausführen:Start the server by running the following commands from the project directory:

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

  3. Wählen Sie Anmelden.Select Login.

  4. Wählen Sie Profil aus, um Microsoft Graph aufzurufen.Select Profile to call Microsoft Graph.

Wählen Sie Anmelden aus, wenn die Anwendung im Browser geladen wurde.After the browser loads the application, select Login. Bei der ersten Anmeldung werden Sie aufgefordert, einzuwilligen, dass die Anwendung auf Ihr Profil zugreifen und Sie anmelden darf.The first time you start to sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. Wählen Sie nach erfolgreicher Anmeldung Profil aus. Daraufhin werden Ihre Benutzerprofilinformationen auf der Seite angezeigt.After you're signed in successfully, select Profile, and your user profile information will be displayed on the page.

Funktionsweise des BeispielsHow the sample works

Diagramm, das die Funktionsweise der Beispiel-App in diesem Schnellstart demonstriert

Nächste SchritteNext steps

Informieren Sie sich als Nächstes im Angular-Tutorial darüber, wie Sie einen Benutzer anmelden und Token abrufen:Next, learn how to sign in a user and acquire tokens in the Angular tutorial: