Teilen über

Schnellstart : Bearbeiten eines Profils in einem Beispiel Node.js Web-App

Gilt für:Weißer Kreis mit grauem X-Symbol. Mitarbeitermieter Grüner Kreis mit weißem Häkchen-Symbol. Externe Mieter (weitere Informationen)

In dieser Schnellstartanleitung verwenden Sie ein Beispiel Node.js Web-App, um zu erfahren, wie Sie ein Anmelde- und Bearbeitungsprofil in einer Web-App hinzufügen. Die Beispiel-Web-App verwendet die Microsoft-Authentifizierungsbibliothek für Node (MSAL Node) und die Microsoft Graph-API, um die Anmeldung und die Profilbearbeitung abzuschließen. Für den Bearbeitungsprofilvorgang muss ein Benutzer eine mehrstufige Authentifizierung (MFA) abschließen.

Voraussetzungen

  • Führen Sie die Schritte und Voraussetzungen im Artikel Schnellstart: Anmelden von Benutzern in einer Beispiel-Web-App aus. In dieser Schnellstartanleitung erfahren Sie, wie Sie Benutzer mithilfe eines Beispiels Node.js Web-App anmelden.
  • Registrieren Sie eine neue App für Ihre Web-API im Microsoft Entra Admin Center mit dem Namen edit-profile-service, der nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie Ihrer App-Registrierung einen geheimen Clientschlüssel hinzu. Verwenden Sie keine Client-Geheimnisse in Produktionsanwendungen. Verwenden Sie stattdessen Zertifikate oder Verbundanmeldeinformationen. Weitere Informationen finden Sie unter Hinzufügen von Anmeldeinformationen zu Ihrer Anwendung.

Konfigurieren von API-Bereichen und -Rollen

Durch die Registrierung der Web-API müssen Sie API-Bereiche konfigurieren, um die Berechtigungen zu definieren, die eine Clientanwendung für den Zugriff auf die Web-API anfordern kann. Darüber hinaus müssen Sie App-Rollen einrichten, um die für Benutzer oder Anwendungen verfügbaren Rollen anzugeben und der Web-App die erforderlichen API-Berechtigungen zu erteilen, damit sie die Web-API aufrufen kann.

Konfigurieren der API-Bereiche der EditProfileService-App

Die EditProfileService-App muss Berechtigungen verfügbar machen, die eine Client-App abruft, um die Web-API aufzurufen.

Eine API muss mindestens einen Bereich (auch Delegierte Berechtigung genannt) veröffentlichen, damit die Clientanwendungen erfolgreich ein Zugriffstoken für einen Benutzer abrufen können. Führen Sie diese Schritte aus, um einen Bereich zu veröffentlichen:

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

  2. Wählen Sie unter Verwalten die Option Eine API verfügbar machen aus.

  3. Wählen Sie oben auf der Seite neben Anwendungs-ID-URI den Link Hinzufügen aus, um einen für diese Anwendung eindeutigen URI zu generieren.

  4. Akzeptieren Sie den vorgeschlagenen Anwendungs-ID-URI, z. B. api://{clientId}, und wählen Sie Speichern aus. Wenn Ihre Webanwendung ein Zugriffstoken für die Web-API anfordert, fügt sie diesen URI als Präfix für jeden Bereich hinzu, den Sie für die API definieren.

  5. Wählen Sie unter Durch diese API definierte Bereiche die Option Bereich hinzufügen aus.

  6. Geben Sie die folgenden Werte ein, die Lesezugriff auf die API definieren, und wählen Sie dann Bereich hinzufügen aus, um Ihre Änderungen zu speichern:

    Eigentum Wert
    Bereichsname EditProfileService.ReadWrite
    Wer kann zustimmen? Nur Administratoren
    Anzeigename der Administratoreinwilligung Client bearbeitet das Profil über den Profilbearbeitungsdienst
    Beschreibung der Admin-Zustimmung Die Möglichkeit, der Client-Webanwendung das Bearbeiten des Profils durch Aufrufen des Profilbearbeitungsdienstes zu ermöglichen.
    Staat Aktiviert

Erteilen der Berechtigung „User.ReadWrite“ für die EditProfileService-App

User.ReadWrite ist eine Microsoft Graph-API-Berechtigung, mit der ein Benutzer sein Profil aktualisieren kann. Führen Sie die folgenden Schritte aus, um der EditProfileService-App die Berechtigung User.ReadWrite zu erteilen:

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

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

  3. Wählen Sie die Registerkarte Microsoft-APIs aus, und wählen Sie dann unter Häufig verwendeten Microsoft-APIsMicrosoft Graph aus.

  4. Wählen Sie Delegierte Berechtigungen aus, suchen Sie dann in der Liste der Berechtigungen nach User.ReadWrite und wählen Sie es aus.

  5. Wählen Sie die Schaltfläche Berechtigungen hinzufügen aus.

  6. Sie haben der EditProfileService-App die Berechtigungen "User.ReadWrite " ordnungsgemäß zugewiesen. Da der Mandant jedoch ein externer Mandant ist, können die Kundenbenutzer selbst dieser Berechtigungen nicht zustimmen. Als Administrator des Mandanten müssen Sie im Namen aller Benutzer im Mandanten dieser Berechtigung zustimmen:

    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 beide Bereiche unter < der Status Erteilt für >Name Ihres Mandanten angezeigt wird.

Erteilen von API-Berechtigungen für die Client-Web-App

In diesem Abschnitt erteilen Sie API-Berechtigungen für die Clientweb-App, die Sie zuvor registriert haben (in Voraussetzungen).

Erteilen Sie Ihrer Client-Web-App die Berechtigung EditProfileService.ReadWrite. Diese Berechtigung wird von der EditProfileService-App verfügbar gemacht und schützt den Profilaktualisierungsvorgang mit MFA. Führen Sie die folgenden Schritte aus, um der Client-Web-App die Berechtigung EditProfileService.ReadWrite zu erteilen:

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

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

  3. Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.

  4. Wählen Sie die Registerkarte Von meiner Organisation verwendete APIs aus.

  5. Wählen Sie in der Liste der APIs die API aus, z. B. edit-profile-service.

  6. Wählen Sie Delegierte Berechtigungen aus.

  7. Wählen Sie in der Liste der Berechtigungen EditProfileService.ReadWrite aus.

  8. Wählen Sie die Schaltfläche Berechtigungen hinzufügen aus.

  9. Wählen Sie in der Liste Konfigurierte Berechtigungen die Berechtigung EditProfileService.ReadWrite aus, und kopieren Sie dann den vollständigen URI der Berechtigung für die spätere Verwendung. Der vollständige Berechtigungs-URI ähnelt api://{clientId}/{EditProfileService.ReadWrite}.

  10. Sie haben der Client-Webanwendung ordnungsgemäß die Berechtigungen *EditProfileService.ReadWrite zugewiesen. Da der Mandant jedoch ein externer Mandant ist, können die Kundenbenutzer selbst dieser Berechtigungen nicht zustimmen. Als Administrator des Mandanten müssen Sie im Namen aller Benutzer im Mandanten dieser Berechtigung zustimmen:

    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 beide Bereiche unter < der Status Erteilt für >Name Ihres Mandanten angezeigt wird.

Erstellen einer MFA-Richtlinie für bedingten Zugriff

Ihre EditProfileService-App, die Sie zuvor registriert haben, ist die Ressource, die Sie mit MFA schützen.

Verwenden Sie zum Erstellen einer MFA-Richtlinie für bedingten Zugriff (Ca) die Schritte unter Hinzufügen der mehrstufigen Authentifizierung zu einer App. Verwenden Sie beim Erstellen Ihrer Richtlinie die folgenden Einstellungen:

  • Verwenden Sie für Name die MFA-Richtlinie.
  • Wählen Sie für die Zielressourcen die zuvor registrierte EditProfileService-App aus, z. B. edit-profile-service.

Klonen oder Herunterladen der Beispiel-Web-App

Sie haben die Beispiel-App bereits aus den Voraussetzungen geklont, aber wenn Sie dies noch nicht getan haben, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen.

Laden Sie die ZIP-Datei herunter, oder klonen Sie die Beispiel-Web-App über GitHub, indem Sie den folgenden Befehl ausführen:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Konfigurieren der Beispielwebanwendung

Dieses Codebeispiel enthält zwei Apps, die Clientweb-App und die API-App (EditProfileService-App). Sie müssen diese Apps aktualisieren, damit sie Ihre externen Mandanteneinstellungen verwenden. Führen Sie dazu die folgenden Schritte aus:

  1. Öffnen Sie in Ihrem Code-Editor die Datei 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js, und suchen Sie dann den folgenden Platzhalter:

    • Enter_the_Application_Id_Here und ersetzen Sie sie durch die Anwendungs-ID (Client) der Zuvor registrierten Client-Web-App.
    • Enter_the_Tenant_Subdomain_Here und ersetzen Sie es durch die Verzeichnis-(Mandanten-)Unterdomäne. 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 Abrufen der Details des Mandanten.
    • Enter_the_Client_Secret_Here, und ersetzen Sie dies durch den zuvor kopierten App-Geheimniswert der Clientweb-App.
    • graph_end_point, und ersetzen Sie sie durch den Microsoft Graph-API-Endpunkt, https://graph.microsoft.com/.
    • Add_your_protected_scope_here, und ersetzen Sie dies durch den Bereich der API-Apps (EditProfileService-App). Der Wert sieht etwa wie folgt aus: api://{clientId}/EditProfileService.ReadWrite. {clientId} ist der Anwendungs-ID-Wert (Client-ID) der zuvor registrierten EditProfileService-App.

  2. Öffnen Sie in Ihrem Code-Editor die Datei 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js, und suchen Sie dann den folgenden Platzhalter:

    • 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 Abrufen der Details des Mandanten.
    • Enter_the_Tenant_ID_Here, und ersetzen Sie dies durch die Mandanten-ID. Wenn Sie Ihre Mandanten-ID nicht kennen, erfahren Sie hier, wie Sie die Mandantendetails abrufen.
    • Enter_the_Edit_Profile_Service_Application_Id_Here, und ersetzen Sie dies durch den Anwendungs-ID-Wert (Client-ID) der EditProfileService-Anwendung.
    • Enter_the_Client_Secret_Here, und ersetzen Sie dies durch den Wert des geheimen Clientschlüssels, der im Rahmen der Voraussetzungen erstellt wurde.
    • graph_end_point, und ersetzen Sie sie durch den Microsoft Graph-API-Endpunkt, https://graph.microsoft.com/.

Installieren von Projektabhängigkeiten und Ausführen der App

Um Ihre App zu testen, installieren Sie Projektabhängigkeiten sowohl für die Client-App als auch für die Dienst-/API-App, und führen Sie sie aus.

  1. Um die Client-App auszuführen, öffnen Sie Ihr Terminalfenster, und führen Sie dann die folgenden Befehle aus:

    cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start

  2. Um die Bearbeitungsdienst-/API-App auszuführen, wechseln Sie zum Verzeichnis der Bearbeitungsdienst-/API-App, 1-Authentication\7-edit-profile-with-mfa-express\Api, und führen Sie dann die folgenden Befehle aus:

    npm install
npm start

  3. Öffnen Sie Ihren Browser, und navigieren Sie zu http://localhost:3000.. Wenn SSL-Zertifikatfehler auftreten, erstellen Sie eine .env-Datei, und fügen Sie die folgende Konfiguration hinzu:

    # Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'

  4. Wählen Sie die Schaltfläche Anmelden aus, und melden Sie sich an.

  5. Geben Sie auf der Anmeldeseite Ihre E-Mail-Adresse ein, wählen Sie Weiter aus, geben Sie Ihr Kennwort ein und wählen Sie dann Anmelden aus. Wenn Sie kein Konto besitzen, wählen Sie den Link Kein Konto? Erstellen Sie eins aus, um den Registrierungsflow zu starten.

  6. Um das Profil zu aktualisieren, wählen Sie den Link Profilbearbeitung aus. Die daraufhin angezeigte Seite sieht in etwa wie im folgenden Screenshot aus:

    Screenshot des Updates für das Benutzerprofil.

  7. Um das Profil zu bearbeiten, wählen Sie die Schaltfläche Profil bearbeiten aus. Wenn Sie dies noch nicht getan haben, werden Sie von der App aufgefordert, eine MFA-Überprüfung durchzuführen.

  8. Nehmen Sie Änderungen an den Profildetails vor, und wählen Sie dann die Schaltfläche Speichern aus.

Verwandte Inhalte

  • Last updated on