Freigeben über

Anmelden von Benutzern und Bearbeiten von Profilen in einem Node.js-Beispiel-Web-App

  • Artikel

In diesen Anleitungen wird eine Node.js-Beispiel-Web-App verwendet, um zu zeigen, wie Sie einer Web-App eine Anmeldung hinzufügen und ein Profil bearbeiten. 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.

Voraussetzungen

Registrieren und Konfigurieren der EditProfileService-App

In diesem Schritt registrieren Sie die EditProfileService-App (die API-App), die einen Mechanismus zum Schutz des Profilbearbeitungsvorgangs bereitstellt, indem MFA erfordert wird.

Registrieren der EditProfileService-App

  1. Melden Sie sich beim Microsoft Entra Admin Center mindestens mit der Rolle Anwendungsentwickler an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie das Einstellungen-Symbol im oberen Menü, um über das Menü Verzeichnisse + Abonnements zu Ihrem externen Mandanten zu wechseln.

  3. Navigieren Sie zu Identität>Anwendungen>App-Registrierungen.

  4. Wählen Sie + Neue Registrierung aus.

  5. Geben Sie auf der daraufhin angezeigten Seite Anwendung registrieren die Registrierungsinformationen Ihrer Anwendung ein:

    1. Geben Sie im Abschnitt „Name“ einen aussagekräftigen Anwendungsnamen ein, z. B. edit-profile-service.

    2. Wählen Sie unter Unterstützte Kontotypen die Option Nur Konten in diesem Organisationsverzeichnis aus.

  6. Wählen Sie Registrieren aus, um die Anwendung zu erstellen.

  7. Der Bereich Übersicht der Anwendung wird angezeigt, wenn die Registrierung abgeschlossen ist. Notieren Sie die Anwendungs-ID (Client) für die Verwendung in Ihrem Anwendungsquellcode.

Konfigurieren der API-Bereiche der EditProfileService-App

Die EditProfileService-App muss Berechtigungen verfügbar machen, die ein Client für den Aufruf der API anfordern muss:

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 die folgenden 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:

    Eigenschaft Wert
    Bereichsname EditProfileService.ReadWrite
    Zum Einwilligen berechtigte Personen Nur Administratoren
    Anzeigename der Administratoreinwilligung Client bearbeitet das Profil über den Profilbearbeitungsdienst
    Beschreibung der Administratoreinwilligung Der Bereich, der es Client-Web-App ermöglicht, das Profil durch Aufrufen des Profilbearbeitungsdiensts zu bearbeiten.
    State Aktiviert

  7. Wählen Sie unter Verwalten die Option Manifest aus, um den API-Manifest-Editor zu öffnen.

  8. Legen Sie die Eigenschaft accessTokenAcceptedVersion auf 2 fest.

  9. Wählen Sie Speichern.

Hinzufügen eines geheimen Clientschlüssels für die Anwendung

Erstellen Sie einen geheimen Clientschlüssel für die registrierte Anwendung. Die Anwendung verwendet den geheimen Clientschlüssel beim Anfordern von Token als Identitätsnachweis.

  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 Zertifikate und Geheimnisse aus.
  3. Wählen Sie Neuer geheimer Clientschlüssel.
  4. Geben Sie im Feld Beschreibung eine Beschreibung für den geheimen Clientschlüssel ein (z. B. Geheimer Clientschlüssel von edit-profile-service).
  5. Wählen Sie unter Gültig bis einen Gültigkeitszeitraum für den geheimen Schlüssel (gemäß den jeweiligen Sicherheitsregeln Ihrer Organisation) und dann Hinzufügen aus.
  6. Notieren Sie den Wert des Geheimnisses. Dieser Wert wird in einem späteren Schritt für die Konfiguration verwendet. Der Wert des Geheimnisses wird nicht noch mal angezeigt und kann nicht anderweitig abgerufen werden, nachdem Sie die Seite Zertifikate & Geheimnisse verlassen haben. Notieren Sie sich diesen daher unbedingt.

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.

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

  4. Wählen Sie Delegierten Berechtigungen aus, suchen Sie dann nach User.ReadWrite aus der Liste der Berechtigungen, und wählen Sie diese Option aus.

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

Sie haben die Berechtigung 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 Status 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 zuvor registrierte Client-Web-App (aus den 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.

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

Sie haben die Berechtigung EditProfileService.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 Status der Status Erteilt für <Name Ihres Mandanten> angezeigt wird.

Erstellen einer CA-MFA-Richtlinie

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

Führen Sie die Schritte unter Hinzufügen der Multi-Faktor-Authentifizierung zu einer App aus, um eine MFA-Zertifizierungsstellenrichtlinie zu erstellen. 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

Um die Beispiel-App zu erhalten, können Sie sie entweder über 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 Beispiel-Webanwendung

Dieser Beispielcode enthält zwei Apps, die Client-App und die Dienst-/API-App. Sie müssen diese Apps aktualisieren, sodass sie Ihre externe 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:

    • graph_end_point, und ersetzen Sie sie durch den Microsoft Graph-API-Endpunkt, https://graph.microsoft.com/.
    • Add_your_protected_scope_here. Ersetzen Sie ihn durch den Bereich der EditProfileService-App. Der Wert sieht etwa wie folgt aus: api://{clientId}/EditProfileService.ReadWrite. {clientId} ist der Anwendungs-ID-Wert (Client) 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. Ersetzen Sie ihn durch die Unterdomäne des Verzeichnisses (Mandant). Wenn Ihre primäre Mandantendomäne beispielsweise contoso.onmicrosoft.com lautet, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, erfahren Sie hier, wie Sie Ihre Mandantendetails auslesen.
    • Ersetzen Sie Enter_the_Tenant_ID_Here durch die Mandanten-ID. Wenn Sie Ihre Mandanten-ID nicht kennen, erfahren Sie hier, wie Sie die Mandantendetails abrufen.
    • Ersetzen Sie Enter_the_Edit_Profile_Service_Application_Id_Here durch den Anwendungs-ID-Wert (Client) der zuvor registrierten EditProfileService-App.
    • Ersetzen Sie Enter_the_Client_Secret_Here durch den Wert des EditProfileService-App-Geheimnisses, den Sie zuvor kopiert haben.
    • 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 haben, 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.

Zugehöriger Inhalt