Share via

Tutorial: Zuweisen von benutzerdefinierten Rollen mit einer Funktion und Microsoft Graph

  • Artikel

In diesem Artikel wird veranschaulicht, wie Sie mithilfe einer Funktion Microsoft Graph abfragen und einem Benutzer basierend auf seiner Active Directory-Gruppenmitgliedschaft benutzerdefinierte Rollen zuweisen.

In diesem Tutorial lernen Sie Folgendes:

  • Bereitstellen einer statischen Web-App
  • Erstellen einer Microsoft Entra-App-Registrierung.
  • Richten Sie die benutzerdefinierte Authentifizierung mit Microsoft Entra ID ein.
  • Konfigurieren einer serverlosen Funktion, mit der die Active Directory-Mitgliedschaft des Benutzers abgefragt und eine Liste mit benutzerdefinierten Rollen zurückgegeben wird

Hinweis

In diesem Tutorial müssen Sie eine Funktion zum Zuweisen von Rollen verwenden. Die funktionsbasierte Rollenverwaltung befindet sich derzeit in der Vorschauphase. Die erforderliche Berechtigungsstufe für dieses Tutorial ist „User.Read.All“.

Es gibt eine Funktion namens GetRoles in der API der App. Diese Funktion verwendet das Zugriffstoken des Benutzers, um Active Directory von Microsoft Graph abzufragen. Wenn der Benutzer Mitglied einer Gruppe ist, die in der App definiert ist, werden die entsprechenden benutzerdefinierten Rollen dem Benutzer zugeordnet.

Voraussetzungen

Anforderung Kommentare
Aktives Azure-Konto Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
Microsoft Entra-Berechtigungen Sie müssen über ausreichende Berechtigungen für die Erstellung einer Microsoft Entra-Anwendung verfügen.

Erstellen eines GitHub-Repositorys

  1. Generieren Sie ein Repository basierend auf der Rollenfunktionsvorlage. Wechseln Sie zum folgenden Speicherort, um ein neues Repository zu erstellen.

    https://github.com/staticwebdev/roles-function/generate

  2. Geben Sie Ihrem Repository den Namen my-custom-roles-app.

  3. Wählen Sie Create repository from template (Repository aus Vorlage erstellen) aus.

Bereitstellen der statischen Web-App in Azure

  1. Öffnen Sie auf einer neuen Registerkarte des Webbrowsers das Azure-Portal.

  2. Wählen Sie in der linken oberen Ecke Ressource erstellen aus.

  3. Geben Sie im Suchfeld den Suchbegriff statische Web-Apps (static web apps) ein.

  4. Klicken Sie auf statische Web-Apps.

  5. Klicken Sie auf Erstellen.

  6. Konfigurieren Sie Ihre statische Web-App mit den folgenden Informationen:

    Einstellung Wert Notizen
    Subscription Wählen Sie Ihr Azure-Abonnement.
    Resource group Erstellen Sie eine neue Gruppe mit dem Namen my-custom-roles-app-group.
    Name my-custom-roles-app
    Plantyp Standard Zum Anpassen der Authentifizierung und zum Zuweisen von Rollen mithilfe einer Funktion ist der Standard-Plan erforderlich.
    Region für die API Wählen Sie die Ihnen am nächsten gelegene Region aus.

  7. Im Abschnitt Bereitstellungsdetails:

    Einstellung Wert
    `Source` Wählen Sie GitHub aus.
    Organization Wählen Sie die Organisation aus, in der Sie das Repository generiert haben.
    Repository Wählen Sie my-custom-roles-app aus.
    Verzweigung Wählen Sie main aus.

  8. Fügen Sie im Abschnitt Builddetails die Konfigurationsdetails für diese App hinzu.

    Einstellung Wert Hinweise
    Buildvoreinstellungen Wählen Sie Benutzerdefiniert aus.
    App-Speicherort Geben Sie /frontend ein. Dieser Ordner enthält die Front-End-Anwendung.
    API-Speicherort /api Ordner im Repository, der die API-Funktionen enthält.
    Ausgabeverzeichnis Lassen Sie dieses Feld leer. Diese App hat keine Buildausgabe.

  9. Klicken Sie auf Überprüfen + erstellen.

  10. Wählen Sie Erstellen aus, um die erste Bereitstellung zu initiieren.

  11. Sobald der Vorgang abgeschlossen ist, wählen Sie Zu Ressource wechseln aus, um Ihre neue statische Web-App zu öffnen.

  12. Suchen Sie im Abschnitt „Übersicht“ nach der URL Ihrer Anwendung. Kopieren Sie diesen Wert in einen Text-Editor, um ihn in den nächsten Schritten zum Einrichten der Active Directory-Authentifizierung zu verwenden.

Erstellen einer Microsoft Entra-Anwendung

  1. Suchen Sie im Azure-Portal nach Microsoft Entra ID, und gehen Sie dahin.

  2. Wählen Sie im Menü Verwalten die Option App-Registrierungen aus.

  3. Wählen Sie Neue Registrierung aus, um das Fenster Anwendung registrieren zu öffnen. Geben Sie die folgenden Werte ein:

    Einstellung Wert Notizen
    Name Geben Sie MyStaticWebApp ein.
    Unterstützte Kontotypen Wählen Sie Nur Konten in diesem Organisationsverzeichnis aus.
    Umleitungs-URI Wählen Sie Web aus, und geben Sie den Authentifizierungsrückruf-URL von Microsoft Entra für Ihre statische Web-App ein. Ersetzen Sie <YOUR_SITE_URL> in <YOUR_SITE_URL>/.auth/login/aad/callback durch die URL Ihrer statischen Web-App. Diese URL haben Sie in einem früheren Schritt in einen Text-Editor kopiert.

    Create an app registration

  4. Wählen Sie Registrieren aus.

  5. Nachdem die App-Registrierung erstellt wurde, kopieren Sie im Abschnitt Zusammenfassung die Anwendungs-ID (Client) und die Verzeichnis-ID (Mandant) in einen Text-Editor.

    Sie benötigen diese Werte, um die Active Directory-Authentifizierung in Ihrer statischen Web-App zu konfigurieren.

Aktivieren von ID-Token

  1. Wählen Sie in den App-Registrierungseinstellungen unter Verwalten die Option Authentifizierung aus.

  2. Wählen Sie im Abschnitt Implizite Genehmigung und Hybridflows die Option ID-Token (werden für implizite und Hybridflows verwendet) aus.

    Die Static Web Apps-Runtime erfordert diese Konfiguration, um Ihre Benutzer zu authentifizieren.

  3. Wählen Sie Speichern aus.

Erstellen eines Clientgeheimnisses

  1. Wählen Sie in den App-Registrierungseinstellungen die Option Zertifikate und Geheimnisse unter Verwalten aus.

  2. Wählen Sie im Abschnitt Geheime Clientschlüssel die Option Neuer geheimer Clientschlüssel aus.

  3. Geben Sie im Feld Beschreibung den Namen MyStaticWebApp ein.

  4. Übernehmen Sie im Feld Läuft ab den Standardwert 6 Monate.

    Hinweis

    Sie müssen das Geheimnis vor dem Ablaufdatum rotieren, indem Sie ein neues Geheimnis generieren und Ihre App mit seinem Wert aktualisieren.

  5. Wählen Sie Hinzufügen.

  6. Kopieren Sie den Wert des geheimen Clientschlüssels, den Sie erstellt haben, in einen Text-Editor.

    Sie benötigen diesen Wert, um die Active Directory-Authentifizierung in Ihrer statischen Web-App zu konfigurieren.

    Create a client secret

Konfigurieren der Active Directory-Authentifizierung

  1. Öffnen Sie in einem Browser das GitHub-Repository, das die von Ihnen bereitgestellte statische Web-App enthält.

    Wechseln Sie zur Konfigurationsdatei der App unter frontend/staticwebapp.config.json. Diese Datei enthält den folgenden Abschnitt:

    "auth": {
  "rolesSource": "/api/GetRoles",
  "identityProviders": {
    "azureActiveDirectory": {
      "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
      "registration": {
        "openIdIssuer": "https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID>",
        "clientIdSettingName": "AAD_CLIENT_ID",
        "clientSecretSettingName": "AAD_CLIENT_SECRET"
      },
      "login": {
        "loginParameters": [
          "resource=https://graph.microsoft.com"
        ]
      }
    }
  }
},

    Diese Konfiguration besteht aus den folgenden Einstellungen:

    Eigenschaften BESCHREIBUNG
    rolesSource Die URL, unter der der Anmeldeprozess eine Liste der verfügbaren Rollen abruft. Für die Beispielanwendung lautet die URL /api/GetRoles.
    userDetailsClaim Die URL des Schemas, das zum Überprüfen der Anmeldeanforderung verwendet wird.
    openIdIssuer Die Microsoft Entra-Anmelderoute, angefügt mit Ihrer Mandanten-ID.
    clientIdSettingName Ihre Microsoft Entra-Client-ID.
    clientSecretSettingName Ihr geheimer Clientschlüssel in Microsoft Entra.
    loginParameters Wenn Sie ein Zugriffstoken für Microsoft Graph abrufen möchten, muss das Feld loginParameters mit resource=https://graph.microsoft.com konfiguriert sein.

  2. Wählen Sie Bearbeiten aus, um die Datei zu aktualisieren.

  3. Aktualisieren Sie den Wert openIdIssuer von https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID>, indem Sie <YOUR_AAD_TENANT_ID> durch die Verzeichnis-ID (Mandant) Ihrer Microsoft Entra ID-Instanz ersetzen.

  4. Wählen Sie Änderungen committen aus.

  5. Geben Sie eine Commitnachricht ein, und wählen Sie Änderungen committen aus.

    Das Committen dieser Änderungen initiiert einen GitHub Actions-Lauf, um die statische Web-App zu aktualisieren.

  6. Wechseln Sie im Azure-Portal zur Ressource Ihrer statischen Web-App.

  7. Wählen Sie auf der Menüleiste die Option Konfiguration aus.

  8. Fügen Sie im Abschnitt Anwendungseinstellungen die folgenden Einstellungen hinzu:

    Name Wert
    AAD_CLIENT_ID Die ID Ihrer Active Directory-Anwendung (Client).
    AAD_CLIENT_SECRET Der Wert des geheimen Clientschlüssels Ihrer Active Directory-Anwendung.

  9. Wählen Sie Speichern aus.

Erstellen von Rollen

  1. Öffnen Sie Ihre Active Directory-App-Registrierung im Azure-Portal.

  2. Wählen Sie unter Verwalten die Option Anwendungsrollen aus.

  3. Wählen Sie App-Rolle erstellen aus, und geben Sie die folgenden Werte ein:

    Einstellung Wert
    `Display name` Geben Sie admin ein.
    Zulässige Mitgliedstypen Wählen Sie Benutzer/Gruppen aus.
    Wert Geben Sie admin ein.
    Beschreibung Geben Sie Administrator ein.

  4. Aktivieren Sie das Kontrollkästchen für Möchten Sie diese App-Rolle aktivieren?.

  5. Wählen Sie Übernehmen.

  6. Wiederholen Sie nun denselben Prozess für eine Rolle namens reader (Leser).

  7. Kopieren Sie die ID-Werte für jede Rolle, und legen Sie sie in einem Text-Editor ab.

Überprüfen benutzerdefinierter Rollen

Die Beispielanwendung enthält eine API-Funktion (api/GetRoles/index.js), die Microsoft Graph abfragt, um zu ermitteln, ob sich ein Benutzer in einer vordefinierten Gruppe befindet.

Basierend auf den Gruppenmitgliedschaften des Benutzers weist die Funktion dem Benutzer benutzerdefinierte Rollen zu. Die Anwendung ist so konfiguriert, dass bestimmte Routen basierend auf diesen benutzerdefinierten Rollen eingeschränkt werden.

  1. Wechseln Sie in Ihrem GitHub-Repository unter api/GetRoles/index.js zur Funktion GetRoles.

    Am oberen Rand befindet sich ein roleGroupMappings-Objekt, das Microsoft Entra-Gruppen benutzerdefinierte Benutzerrollen zuordnet.

  2. Wählen Sie Bearbeiten.

  3. Aktualisieren Sie das Objekt mit Gruppen-IDs aus Ihrem Microsoft Entra-Mandanten.

    Wenn Sie beispielsweise Gruppen mit den IDs 6b0b2fff-53e9-4cff-914f-dd97a13bfbd6 und b6059db5-9cef-4b27-9434-bb793aa31805 besitzen, würden Sie das Objekt wie folgt aktualisieren:

    const roleGroupMappings = {
  'admin': '6b0b2fff-53e9-4cff-914f-dd97a13bfbd6',
  'reader': 'b6059db5-9cef-4b27-9434-bb793aa31805'
};

    Die Funktion GetRoles wird immer dann aufgerufen, wenn ein Benutzer erfolgreich mit Microsoft Entra ID authentifiziert wurde. Die Funktion verwendet das Zugriffstoken des Benutzers, um die Active Directory-Gruppenmitgliedschaft von Microsoft Graph abzufragen. Wenn der Benutzer Mitglied einer Gruppe ist, die im roleGroupMappings-Objekt definiert ist, werden die entsprechenden benutzerdefinierten Rollen zurückgegeben.

    Wenn ein Benutzer Mitglied der Active Directory-Gruppe mit der ID b6059db5-9cef-4b27-9434-bb793aa31805 ist, wird ihm im obigen Beispiel die Rolle reader gewährt.

  4. Wählen Sie Änderungen committen aus.

  5. Fügen Sie eine Commitnachricht hinzu, und wählen Sie Änderungen committen aus.

    Wenn Sie diese Änderungen vornehmen, wird ein Build initiiert, um die statische Web-App zu aktualisieren.

  6. Wenn die Bereitstellung abgeschlossen ist, können Sie Ihre Änderungen überprüfen, indem Sie zur URL der App navigieren.

  7. Melden Sie sich mithilfe von Microsoft Entra ID bei Ihrer statischen Web-App an.

  8. Wenn Sie angemeldet sind, zeigt die Beispiel-App eine Liste der Rollen an, die Ihnen basierend auf der Active Directory-Gruppenmitgliedschaft Ihrer Identität zugewiesen sind.

    Abhängig von diesen Rollen ist der Zugriff auf einige Routen in der App zulässig oder unzulässig.

Hinweis

Einige Abfragen für Microsoft Graph geben mehrere Seiten von Daten zurück. Wenn mehr als eine Abfrageanforderung erforderlich ist, gibt Microsoft Graph eine @odata.nextLink-Eigenschaft in der Antwort zurück, die eine URL zur nächsten Seite der Ergebnisse enthält. Weitere Informationen finden Sie unter Paging von Microsoft Graph-Daten in Ihrer App.

Bereinigen von Ressourcen

Löschen Sie die Ressourcengruppe, um die bereitgestellten Ressourcen zu bereinigen.

  1. Wählen Sie im Azure-Portal im linken Menü die Option Ressourcengruppe aus.

  2. Geben Sie den Namen der Ressourcengruppe in das Feld Nach Name filtern ein.

  3. Wählen Sie den Namen der Ressourcengruppe aus, die Sie in diesem Tutorial verwendet haben.

  4. Wählen Sie Ressourcengruppe löschen aus dem Menü ganz oben aus.

Nächste Schritte

Authentifizierung und Autorisierung