Självstudie: Tilldela anpassade roller med en funktion och Microsoft Graph

Artikel
10/18/2023

Den här artikeln visar hur du använder en funktion för att fråga Microsoft Graph och tilldela anpassade roller till en användare baserat på deras Active Directory-gruppmedlemskap.

I den här självstudien får du lära dig att:

Distribuera en statisk webbapp.
Skapa en Microsoft Entra-appregistrering.
Konfigurera anpassad autentisering med Microsoft Entra-ID.
Konfigurera en serverlös funktion som frågar användarens Active Directory-gruppmedlemskap och returnerar en lista med anpassade roller.

Kommentar

Den här självstudien kräver att du använder en funktion för att tilldela roller. Funktionsbaserad rollhantering är för närvarande i förhandsversion. Behörighetsnivån som krävs för att slutföra den här självstudien är "User.Read.All".

Det finns en funktion med namnet GetRoles i appens API. Den här funktionen använder användarens åtkomsttoken för att fråga Active Directory från Microsoft Graph. Om användaren är medlem i några grupper som definierats i appen mappas motsvarande anpassade roller till användaren.

Förutsättningar

Krav	Kommentarer
Aktivt Azure-konto	Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
Microsoft Entra-behörigheter	Du måste ha tillräcklig behörighet för att skapa ett Microsoft Entra-program.

Skapa en GitHub-lagringsplats

Generera en lagringsplats baserat på rollfunktionsmallen. Gå till följande plats för att skapa en ny lagringsplats.

https://github.com/staticwebdev/roles-function/generate
Ge lagringsplatsen namnet my-custom-roles-app.
Välj Create repository from template (Skapa lagringsplats från mall).

Distribuera den statiska webbappen till Azure

Öppna Azure-portalen i ett nytt webbläsarfönster.
I det övre vänstra hörnet väljer du Skapa en resurs.
I sökrutan skriver du statiska webbappar.
Välj Static Web Apps.
Välj Skapa.

Konfigurera din statiska webbapp med följande information:

Inställning	Värde	Kommentar
Prenumeration	Välj din Azure-prenumerationen.
Resursgrupp	Skapa en ny grupp med namnet my-custom-roles-app-group.
Name	my-custom-roles-app
Abonnemangstyp	Standard	För att kunna anpassa autentisering och tilldela roller med hjälp av en funktion krävs standardplanen .
Region för API	Välj den region som är närmast dig.

I avsnittet Distributionsinformation :

Inställning Värde

Source Välj GitHub.

Organisation Välj den organisation där du genererade lagringsplatsen.

Lagringsplats Välj my-custom-roles-app.

Filial Välj huvud.

Inställning	Värde
Source	Välj GitHub.
Organisation	Välj den organisation där du genererade lagringsplatsen.
Lagringsplats	Välj my-custom-roles-app.
Filial	Välj huvud.

I avsnittet Bygginformation lägger du till konfigurationsinformationen för den här appen.

Inställning	Värde	Kommentar
Skapa förinställningar	Välj Kund.
Applats	Ange /frontend.	Den här mappen innehåller klientdelsprogrammet.
API-plats	/Api	Mapp på lagringsplatsen som innehåller API-funktionerna.
Utdataplats	Lämna tomt.	Den här appen har inga build-utdata.

Välj Granska + skapa.
Välj Skapa initiera den första distributionen.
När processen är klar väljer du Gå till resurs för att öppna din nya statiska webbapp.
Leta upp programmets URL i översiktsavsnittet. Kopiera det här värdet till en textredigerare som ska användas i kommande steg för att konfigurera Active Directory-autentisering.

Skapa ett Microsoft Entra-program

I Azure-portalen söker du efter och går till Microsoft Entra-ID.
På menyn Hantera väljer du Appregistreringar.

Välj Ny registrering för att öppna fönstret Registrera ett program . Ange följande värden:

Inställning	Värde	Kommentar
Name	Ange MyStaticWebApp.
Kontotyper som stöds	Välj Endast konton i den här organisationskatalogen.
Omdirigerings-URI	Välj Webb och ange url:en för återanrop till Microsoft Entra-autentisering för din statiska webbapp. Ersätt `<YOUR_SITE_URL>` med `<YOUR_SITE_URL>/.auth/login/aad/callback` URL:en för din statiska webbapp.	Den här URL:en är vad du kopierade till en textredigerare i ett tidigare steg.

Create an app registration

Välj Registrera.
När appregistreringen har skapats kopierar du program-ID :t (klient- och katalog-ID:t ) i avsnittet Essentials till en textredigerare .

Du behöver dessa värden för att konfigurera Active Directory-autentisering i din statiska webbapp.

Aktivera ID-token

Välj Autentisering under Hantera i appregistreringsinställningarna.
I avsnittet Implicit beviljande och hybridflöden väljer du ID-token (används för implicita och hybridflöden).

Static Web Apps-körningen kräver den här konfigurationen för att autentisera dina användare.
Välj Spara.

Skapa en klienthemlighet

I appregistreringsinställningarna väljer du Certifikat och hemligheter under Hantera.
Under avsnittet Klienthemlighet välj Ny klienthemlighet.
I fältet Beskrivning anger du MyStaticWebApp.
För fältet Upphör att gälla lämnar du standardvärdet 6 månader.

Kommentar

Du måste rotera hemligheten före förfallodatumet genom att generera en ny hemlighet och uppdatera appen med dess värde.
Markera Lägga till.
Kopiera värdet för klienthemligheten som du skapade till en textredigerare.

Du behöver det här värdet för att konfigurera Active Directory-autentisering i din statiska webbapp.

Konfigurera Active Directory-autentisering

I en webbläsare öppnar du GitHub-lagringsplatsen som innehåller den statiska webbapp som du distribuerade.

Gå till appens konfigurationsfil på klientdelen/staticwebapp.config.json. Den här filen innehåller följande avsnitt:

"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"
        ]
      }
    }
  }
},

Den här konfigurationen består av följande inställningar:

Egenskaper	beskrivning
`rolesSource`	Url:en där inloggningsprocessen hämtar en lista över tillgängliga roller. För exempelprogrammet är `/api/GetRoles`URL:en .
`userDetailsClaim`	URL:en för schemat som används för att verifiera inloggningsbegäran.
`openIdIssuer`	Microsoft Entra-inloggningsvägen, som läggs till med ditt klientorganisations-ID.
`clientIdSettingName`	Ditt Microsoft Entra-klient-ID.
`clientSecretSettingName`	Ditt Microsoft Entra-klienthemlighetsvärde.
`loginParameters`	Om du vill hämta en åtkomsttoken för Microsoft Graph måste fältet `loginParameters` konfigureras med `resource=https://graph.microsoft.com`.

Välj Redigera för att uppdatera filen.
Uppdatera openIdIssuer-värdethttps://login.microsoftonline.com/<YOUR_AAD_TENANT_ID> för genom att <YOUR_AAD_TENANT_ID> ersätta med katalog-ID:t (klientorganisation) för ditt Microsoft Entra-ID.
Välj Genomför ändringar....
Ange ett incheckningsmeddelande och välj Genomför ändringar.

Om du genomför dessa ändringar initieras en GitHub Actions-körning för att uppdatera den statiska webbappen.
Gå till din statiska webbappresurs i Azure-portalen.
Välj Konfiguration i menyraden.
I avsnittet Programinställningar lägger du till följande inställningar:

Name Värde

AAD_CLIENT_ID Ditt Active Directory-program -ID (klient)-ID.

AAD_CLIENT_SECRET Ditt Active Directory-programklienthemlighetsvärde.
Välj Spara.

Name	Värde
`AAD_CLIENT_ID`	Ditt Active Directory-program -ID (klient)-ID.
`AAD_CLIENT_SECRET`	Ditt Active Directory-programklienthemlighetsvärde.

Skapa roller

Öppna active directory-appregistreringen i Azure-portalen.
Under Hantera väljer du Approller.
Välj Skapa approll och ange följande värden:

Inställning Värde

Visningsnamn Ange administratör.

Tillåtna medlemstyper Välj Användare/grupper.

Värde Ange administratör.

beskrivning Ange Administratör.
Markera kryssrutan för Vill du aktivera den här approllen?
Välj Använd.
Upprepa nu samma process för en roll med namnet läsare.
Kopiera ID-värdena för varje roll och lägg dem åt sidan i en textredigerare.

Inställning	Värde
Visningsnamn	Ange administratör.
Tillåtna medlemstyper	Välj Användare/grupper.
Värde	Ange administratör.
beskrivning	Ange Administratör.

Verifiera anpassade roller

Exempelprogrammet innehåller en API-funktion (api/GetRoles/index.js) som frågar Microsoft Graph för att avgöra om en användare finns i en fördefinierad grupp.

Baserat på användarens gruppmedlemskap tilldelar funktionen anpassade roller till användaren. Programmet är konfigurerat för att begränsa vissa vägar baserat på dessa anpassade roller.

På din GitHub-lagringsplats går du till funktionen GetRoles som finns på api/GetRoles/index.js.

Längst upp finns ett roleGroupMappings objekt som mappar anpassade användarroller till Microsoft Entra-grupper.
Välj Redigera.
Uppdatera objektet med grupp-ID:t från din Microsoft Entra-klientorganisation.

Om du till exempel har grupper med ID:er 6b0b2fff-53e9-4cff-914f-dd97a13bfbd6 och b6059db5-9cef-4b27-9434-bb793aa31805uppdaterar du objektet till:
```
const roleGroupMappings = {
  'admin': '6b0b2fff-53e9-4cff-914f-dd97a13bfbd6',
  'reader': 'b6059db5-9cef-4b27-9434-bb793aa31805'
};
```
Funktionen GetRoles anropas när en användare har autentiserats med Microsoft Entra-ID. Funktionen använder användarens åtkomsttoken för att köra frågor mot deras Active Directory-gruppmedlemskap från Microsoft Graph. Om användaren är medlem i några grupper som definierats i roleGroupMappings objektet returneras motsvarande anpassade roller.

Om en användare i exemplet ovan är medlem i Active Directory-gruppen med ID b6059db5-9cef-4b27-9434-bb793aa31805beviljas reader de rollen.
Välj Genomför ändringar....
Lägg till ett incheckningsmeddelande och välj Genomför ändringar.

När du gör de här ändringarna initieras en kompilering för att uppdatera den statiska webbappen.
När distributionen är klar kan du verifiera ändringarna genom att gå till appens URL.
Logga in på din statiska webbapp med Microsoft Entra-ID.
När du är inloggad visar exempelappen listan över roller som du har tilldelats baserat på din identitets Active Directory-gruppmedlemskap.

Beroende på dessa roller är du tillåten eller förbjuden att komma åt några av vägarna i appen.

Kommentar

Vissa frågor mot Microsoft Graph returnerar flera sidor med data. När mer än en frågebegäran krävs returnerar Microsoft Graph en @odata.nextLink egenskap i svaret som innehåller en URL till nästa resultatsida. Mer information finns i Växling av Microsoft Graph-data i din app

Rensa resurser

Rensa de resurser som du har distribuerat genom att ta bort resursgruppen.

Från Azure-portalen väljer du Resursgrupp från den vänstra menyn.
Ange resursgruppens namn i fältet Filtrera efter namn.
Välj det resursgruppsnamn som du använde i den här självstudien.
Välj Ta bort resursgrupp från menyn längst upp.

Nästa steg

Autentisering och auktorisering

Dela via