Schnellstart: Anmelden von Benutzern in einer Einzelseiten-App (SPA) und Aufrufen der Microsoft Graph-API

In dieser Schnellstartanleitung verwenden Sie eine Beispiel-Single-Page-App (SPA), um Ihnen zu zeigen, wie Sie Benutzer mithilfe des Autorisierungscodeflusses mit dem Proof Key for Code Exchange (PKCE) anmelden und die Microsoft Graph-API aufrufen. Im Beispiel wird die Microsoft-Authentifizierungsbibliothek verwendet, um die Authentifizierung zu verarbeiten.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Konto haben, Ein Konto kostenlos erstellen.
• Dieses Azure-Konto muss über die Berechtigung zum Verwalten von Anwendungen verfügen. Alle folgenden Microsoft Entra-Rollen enthalten die erforderlichen Berechtigungen:
  • Anwendungsadministrator
  • Anwendungsentwickler
  • Cloudanwendungsadministrator
• Ein Mandant für Mitarbeitende. Sie können Ihr Standardverzeichnis verwenden oder einen neuen Mandanten einrichten.
• Visual Studio Code oder ein anderer Code-Editor.

JavaScript

• Registrieren Sie eine neue App im Microsoft Entra Admin Center mit der folgenden Konfiguration und merken Sie sich ihre IDs auf der App-Übersicht-Seite. Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:3000/
• Node.js

React

• Registrieren Sie eine neue App im Microsoft Entra Admin Center mit der folgenden Konfiguration, und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ", und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ". Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:3000/
• Node.js

Angular

• Registrieren Sie eine neue App im Microsoft Entra Admin Center mit der folgenden Konfiguration, und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ", und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ". Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:4200/
• Node.js

Blazor

• Registrieren Sie eine neue App im Microsoft Entra Admin Center mit der folgenden Konfiguration, und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ", und notieren Sie ihre Bezeichner auf der Seite " App-Übersicht ". Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:5000/authentication/login-callback.
• .NET SDK

Klonen oder Herunterladen der Beispielanwendung

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

JavaScript

• 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 Dateiherunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

React

• 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 Dateiherunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Angular

• 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 Dateiherunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Blazor

• 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-dotnet.git
  

• Laden Sie die .zip Dateiherunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Konfigurieren des Projekts

JavaScript

1. Öffnen Sie in Ihrer IDE den Projektordner ms-identity-docs-code-javascript, der das Beispiel enthält.

2. Öffnen Sie vanillajs-spa/App/public/authConfig.js und aktualisieren Sie die folgenden Werte mit den im Admin Center aufgezeichneten Informationen.

   /**
    * 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 
    */
   const msalConfig = {
       auth: {
   
            // WORKFORCE TENANT
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
            // EXTERNAL TENANT
            // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
           redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
           navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
       },
       cache: {
           cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
           storeAuthStateInCookie: false, // set this to true if you have to support IE
       },
       system: {
           loggerOptions: {
               loggerCallback: (level, message, containsPii) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case msal.LogLevel.Error:
                           console.error(message);
                           return;
                       case msal.LogLevel.Info:
                           console.info(message);
                           return;
                       case msal.LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case msal.LogLevel.Warning:
                           console.warn(message);
                           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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   const loginRequest = {
       scopes: ["User.Read"],
   };
   
   /**
    * An optional silentRequest object can be used to achieve silent SSO
    * between applications by providing a "login_hint" property.
    */
   
   // const silentRequest = {
   //   scopes: ["openid", "profile"],
   //   loginHint: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • 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-ID).
   • 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 (Mandanten-ID).
   • redirectUri: Der Umleitungs-URI der Anwendung. Ersetzen Sie den Text in Anführungszeichen ggf. durch den Umleitungs-URI, den Sie zuvor notiert haben.

React

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

2. Öffnen Sie react-spa/src/authConfig.js und aktualisieren Sie die folgenden Werte mit den im Admin Center aufgezeichneten Informationen.

   /*
    * 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-ID).
   • 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 (Mandanten-ID).
   • redirectUri: Der Umleitungs-URI der Anwendung. Ersetzen Sie den Text in Anführungszeichen ggf. durch den Umleitungs-URI, den Sie zuvor notiert haben.

Angular

1. Öffnen Sie in Ihrer IDE den Projektordner "ms-identity-docs-code-javascript/angular-spa", der das Beispiel enthält.

2. Öffnen Sie angular-spa/src/app/app.module.ts und aktualisieren Sie die folgenden Werte mit den im Admin Center aufgezeichneten Informationen.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • 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-ID).
   • 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 (Mandanten-ID).
   • redirectUri: Der Umleitungs-URI der Anwendung. Ersetzen Sie den Text in Anführungszeichen ggf. durch den Umleitungs-URI, den Sie zuvor notiert haben.

Blazor

1. Öffnen Sie in Ihrer IDE den Projektordner "ms-identity-docs-code-dotnet/spa-blazor-wasm", der das Beispiel enthält.

2. Open spa-blazor-wasm/wwwroot/appsettings.json und aktualisieren Sie die folgenden Werte mit den Informationen, die weiter oben im Admin Center aufgezeichnet wurden.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • 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 (Mandanten-ID).
   • 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-ID).

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

JavaScript

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:

   cd vanillajs-spa/App
   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. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Führen Sie die Schritte aus, und geben Sie die erforderlichen Details ein, um sich mit Ihrem Microsoft-Konto anzumelden. Sie werden zur Eingabe einer E-Mail-Adresse aufgefordert, damit eine Einmalkennung an Sie gesendet werden kann. Geben Sie den Code ein, wenn Sie dazu aufgefordert werden.

4. Die Anwendung fordert die Berechtigung an, den Zugriff auf Daten beizubehalten, die Sie der Anwendung gewährt haben, sich anzumelden und Ihr Profil zu lesen. Wählen Sie Akzeptieren 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.

   

React

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:

   cd react-spa/App
   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. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

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 bittet um Erlaubnis, den Zugriff auf die Daten aufrechtzuerhalten, auf die Sie ihr bereits Zugriff gewährt haben, um Sie anzumelden und Ihr Profil zu lesen. Wählen Sie Akzeptieren 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.

   

Angular

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:

   cd angular-spa/App
   npm install
   npm start
   

2. Kopieren Sie die https URL, die im Terminal angezeigt wird, https://localhost:4200z. B. , und fügen Sie sie in eine Browseradressleiste ein. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Führen Sie die Schritte aus, und geben Sie die erforderlichen Details ein, um sich mit Ihrem Microsoft-Konto anzumelden. Sie werden zur Eingabe einer E-Mail-Adresse aufgefordert, damit eine Einmalkennung an Sie gesendet werden kann. Geben Sie den Code ein, wenn Sie dazu aufgefordert werden.

4. Die Anwendung fordert die Berechtigung an, den Zugriff auf die Daten aufrechtzuerhalten, auf die Sie ihr Zugriff gewährt haben, sowie Sie anzumelden und Ihr Profil zu lesen. Wählen Sie Akzeptieren 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.

   

Blazor

Führen Sie das Projekt mit einem Webserver mithilfe von dotnet aus:

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Kopieren Sie die http-URL, die im Terminal angezeigt wird, z. B. http://localhost:5000, und fügen Sie sie in einen Browser ein. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Führen Sie die Schritte aus, und geben Sie die erforderlichen Details ein, um sich mit Ihrem Microsoft-Konto anzumelden. Sie werden zur Eingabe einer E-Mail-Adresse aufgefordert, damit eine Einmalkennung an Sie gesendet werden kann. Geben Sie den Code ein, wenn Sie dazu aufgefordert werden.

4. Die Anwendung wird die Berechtigung anfordern, um den Zugriff auf Daten beizubehalten, auf die Sie ihr Zugriff gewährt haben, und um Sie anzumelden und Ihr Profil zu lesen. Wählen Sie Akzeptieren 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.

   

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Konto haben, Ein Konto kostenlos erstellen.
• Dieses Azure-Konto muss über die Berechtigung zum Verwalten von Anwendungen verfügen. Alle folgenden Microsoft Entra-Rollen enthalten die erforderlichen Berechtigungen:
  • Anwendungsadministrator
  • Anwendungsentwickler
  • Cloudanwendungsadministrator
• Ein externer Mieter. Um eine zu erstellen, wählen Sie aus den folgenden Methoden aus:
  • Verwenden Sie die Microsoft Entra External ID-Erweiterung, um einen externen Mandanten direkt in Visual Studio Code einzurichten. (Empfohlen)
  • Erstellen Sie einen neuen externen Mandanten im Microsoft Entra Admin Center.
• Ein Benutzerablauf. Weitere Informationen finden Sie unter Benutzerabläufe zur Selbstregistrierung für Apps in externen Mandanten erstellen. Dieser Benutzerfluss kann für mehrere Anwendungen verwendet werden.
• Visual Studio Code oder ein anderer Code-Editor.

JavaScript

• Registrieren Sie eine neue App im Microsoft Entra Admin-Center mit der folgenden Konfiguration, und notieren Sie seine IDs auf der App-Übersichtsseite. Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:3000/
• Hinzufügen Ihrer Anwendung zum Benutzerflow
• Node.js

React

• Registrieren Sie eine neue App im Microsoft Entra-Verwaltungszentrum mit der folgenden Konfiguration, und notieren Sie ihre Kennungen auf der Übersichtsseite der App. Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Nur Konten in diesem Organisationsverzeichnis (einzelner Mandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:3000/
• Hinzufügen Ihrer Anwendung zum Benutzerflow
• Node.js

Angular

• Registrieren Sie eine neue App im Microsoft Entra Verwaltungszentrum mit der folgenden Konfiguration, und notieren Sie deren Bezeichner auf der App-Übersichtsseite. Weitere Informationen finden Sie unter Registrieren einer Client-App.
  • Name: identity-client-spa
  • Unterstützte Kontotypen: Konten nur in diesem Organisationsverzeichnis (Einzelmandant)
  • Plattformkonfiguration: Einzelseitenanwendung (SPA)
  • Umleitungs-URI: http://localhost:4200/
• Hinzufügen Ihrer Anwendung zum Benutzerflow
• Node.js

Administratorzustimmung erteilen

Nachdem Sie Ihre Anwendung registriert haben, wird sie der Berechtigung User.Read zugewiesen. Da der Mandant jedoch ein externer Mandant ist, können die Kundenbenutzer selbst dieser Berechtigung nicht zustimmen. Sie als Mandantenadministrator müssen dieser Berechtigung im Namen aller Benutzer im Mandanten zustimmen:

1. Wählen Sie auf der Seite App-Registrierungen die von Ihnen erstellte Anwendung (z. B. ciam-client-app) aus, um ihre Seite Übersicht zu öffnen.

2. Wählen Sie unter Verwalten die Option API-Berechtigungen.

   1. Wählen Sie Administratorzustimmung für <Name Ihres Mandanten> erteilen und dann Ja aus.
   2. Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für die Berechtigung unter Status der Wert Erteilt für <Name Ihres Mandanten> angezeigt wird.

Klonen oder Herunterladen von Beispiel-SPA

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

JavaScript

• 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-ciam-javascript-tutorial.git
  

• Laden Sie das Beispiel herunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

React

• 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-ciam-javascript-tutorial.git
  

• Laden Sie das Beispiel herunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Angular

• 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-ciam-javascript-tutorial.git
  

• Laden Sie das Beispiel herunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Konfigurieren der Beispiel-Single-Page-Webanwendung

JavaScript

1. Öffnen Sie App/public/authConfig.js, und ersetzen Sie die folgenden Platzhalter durch die Werte aus dem Microsoft Entra Admin Center:

   • Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.
   • Enter_the_Tenant_Subdomain_Here, und ersetzen Sie sie durch die Unterdomäne des Verzeichnisses (Mandant). Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.

2. Speichern Sie die Datei.

React

1. Öffnen Sie SPA\src\authConfig.js und ersetzen Sie Folgendes durch die Werte, die Sie aus dem Microsoft Entra Administrationszentrum erhalten haben.

   • Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.
   • Enter_the_Tenant_Subdomain_Here, und ersetzen Sie dies durch die Unterdomäne des Verzeichnisses (Mandant). Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.

2. Speichern Sie die Datei.

Angular

1. Öffnen Sie SPA/src/app/auth-config.ts und ersetzen Sie Folgendes durch die Werte, die Sie aus dem Microsoft Entra Admin Center erhalten haben:

   • Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.
   • Enter_the_Tenant_Subdomain_Here, und ersetzen Sie dies durch die Unterdomäne des Verzeichnisses (Mandant). Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, lesen Sie die Informationen unter Lesen der Details Ihres Mandanten.

2. Speichern Sie die Datei.

Ausführen Ihres Projekts und Anmelden

JavaScript

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   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. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Melden Sie sich mit einem Konto an, das für den Mandanten registriert ist.

4. 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.

   

React

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

   cd 1-Authentication\1-sign-in-react\SPA
   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. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Melden Sie sich mit einem Konto an, das für den externen Mandanten registriert ist.

4. 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.

Angular

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

2. Kopieren Sie die https-URL, die im Terminal angezeigt wird, z. B. https://localhost:4200, und fügen Sie sie in einen Browser ein. Wir empfehlen die Verwendung einer privaten oder inkognito-Browsersitzung.

3. Melden Sie sich mit einem Konto an, das für den externen Mandanten registriert ist.

4. 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.

   

Abmelden von der Anwendung

1. Suchen Sie die Abmelden-Schaltfläche auf der Seite und wählen Sie sie aus.
2. Sie werden aufgefordert, ein Konto zum Abmelden auswä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

• Schnellstart: Schützen einer ASP.NET Core-Web-API mit der Microsoft Identity Platform.
• Erfahren Sie mehr, indem Sie eine React SPA erstellen, die Benutzer in der folgenden mehrteiligen Tutorial-Reihe anmeldet.
• Aktivieren der Kennwortzurücksetzung.
• Anpassen des Standardbrandings
• Konfigurieren der Anmeldung mit Google