Delen via

Zelfstudie: Aangepaste rollen toewijzen met een functie en Microsoft Graph

  • Artikel

In dit artikel wordt gedemonstreert hoe u een functie gebruikt om een query uit te voeren op Microsoft Graph en aangepaste rollen toe te wijzen aan een gebruiker op basis van hun Active Directory-groepslidmaatschap.

In deze zelfstudie leert u het volgende:

  • Een statische web-app implementeren.
  • Maak een Microsoft Entra-app-registratie.
  • Aangepaste verificatie instellen met Microsoft Entra-id.
  • Configureer een serverloze functie die een query uitvoert op het Active Directory-groepslidmaatschap van de gebruiker en een lijst met aangepaste rollen retourneert.

Notitie

Voor deze zelfstudie moet u een functie gebruiken om rollen toe te wijzen. Functiebeheer op basis van functies is momenteel beschikbaar als preview-versie. Het machtigingsniveau dat is vereist om deze zelfstudie te voltooien, is User.Read.All.

Er is een functie met de naam GetRoles in de API van de app. Deze functie maakt gebruik van het toegangstoken van de gebruiker om een query uit te voeren op Active Directory vanuit Microsoft Graph. Als de gebruiker lid is van groepen die in de app zijn gedefinieerd, worden de bijbehorende aangepaste rollen toegewezen aan de gebruiker.

Vereisten

Vereiste Opmerkingen
Actief Azure-account Als u nog geen account hebt, kunt u gratis een account maken.
Microsoft Entra-machtigingen U moet over voldoende machtigingen beschikken om een Microsoft Entra-toepassing te maken.

Een GitHub-opslagplaats maken

  1. Genereer een opslagplaats op basis van de functiesjabloon rollen. Ga naar de volgende locatie om een nieuwe opslagplaats te maken.

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

  2. Geef uw opslagplaats de naam my-custom-roles-app.

  3. Selecteer Opslagplaats maken van sjabloon.

De statische web-app implementeren in Azure

  1. Open Azure Portal in een nieuw browservenster.

  2. Selecteer een resource maken in de linkerbovenhoek.

  3. Typ statische web-apps in het zoekvak.

  4. Selecteer Statische web-apps.

  5. Selecteer Maken.

  6. Configureer uw statische web-app met de volgende informatie:

    Instelling Weergegeven als Opmerkingen
    Abonnement Selecteer uw Azure-abonnement.
    Resourcegroep Maak een nieuwe groep met de naam my-custom-roles-app-group.
    Naam my-custom-roles-app
    Abonnementtype Standaard Voor het aanpassen van verificatie en het toewijzen van rollen met behulp van een functie is het Standard-plan vereist.
    Regio voor API Selecteer de regio het dichtst bij u in de buurt.

  7. In de sectie Implementatiedetails :

    Instelling Weergegeven als
    Source Selecteer GitHub.
    Organisatie Selecteer de organisatie waarin u de opslagplaats hebt gegenereerd.
    Opslagplaats Selecteer mijn aangepaste rollen-app.
    Vertakking Selecteer de hoofdmap.

  8. Voeg in de sectie Builddetails de configuratiedetails voor deze app toe.

    Instelling Weergegeven als Opmerkingen
    Vooraf ingestelde instellingen bouwen Selecteer Aangepast.
    App-locatie Voer /front-end in. Deze map bevat de front-endtoepassing.
    API-locatie /Api Map in de opslagplaats met de API-functies.
    Uitvoerlocatie Leeg laten. Deze app heeft geen build-uitvoer.

  9. Selecteer Controleren + maken.

  10. Selecteer Maken initieer de eerste implementatie.

  11. Zodra het proces is voltooid, selecteert u Ga naar de resource om uw nieuwe statische web-app te openen.

  12. Zoek in de overzichtssectie de URL van uw toepassing. Kopieer deze waarde naar een teksteditor om in de komende stappen Active Directory-verificatie in te stellen.

Een Microsoft Entra-toepassing maken

  1. Zoek en ga in Azure Portal naar Microsoft Entra-id.

  2. Selecteer App-registraties in het menu Beheren.

  3. Selecteer Nieuwe registratie om het venster Een toepassing registreren te openen. Voer de volgende waarden in:

    Instelling Weergegeven als Opmerkingen
    Naam Voer MyStaticWebApp in.
    Ondersteunde rekeningtypen Selecteer Alleen accounts in deze organisatiemap.
    Omleidings-URI Selecteer Web en voer de callback-URL voor Microsoft Entra-verificatie van uw statische web-app in. Vervang <YOUR_SITE_URL> deze <YOUR_SITE_URL>/.auth/login/aad/callback door de URL van uw statische web-app. Deze URL is wat u in een eerdere stap naar een teksteditor hebt gekopieerd.

    Create an app registration

  4. Selecteer Registreren.

  5. Nadat de app-registratie is gemaakt, kopieert u de toepassings-id (client- en tenant-id ) in de sectie Essentials naar een teksteditor.

    U hebt deze waarden nodig om Active Directory-verificatie in uw statische web-app te configureren.

Id-tokens inschakelen

  1. Selecteer verificatie onder Beheren in de app-registratie-instellingen.

  2. Selecteer in de sectie Impliciete toekenning en hybride stromen id-tokens (gebruikt voor impliciete en hybride stromen).

    Voor de Static Web Apps-runtime is deze configuratie vereist om uw gebruikers te verifiëren.

  3. Selecteer Opslaan.

Een clientgeheim maken

  1. Selecteer certificaten en geheimen onder Beheren in de app-registratie-instellingen.

  2. Selecteer in de sectie Clientgeheimen de optie Nieuw clientgeheim.

  3. Voer Voor het veld Beschrijving MyStaticWebApp in.

  4. Laat voor het veld Verlopen de standaardwaarde van 6 maanden staan.

    Notitie

    U moet het geheim vóór de vervaldatum draaien door een nieuw geheim te genereren en uw app bij te werken met de bijbehorende waarde.

  5. Selecteer Toevoegen.

  6. Kopieer de waarde van het clientgeheim dat u hebt gemaakt naar een teksteditor.

    U hebt deze waarde nodig om Active Directory-verificatie in uw statische web-app te configureren.

    Create a client secret

Active Directory-verificatie configureren

  1. Open in een browser de GitHub-opslagplaats met de statische web-app die u hebt geïmplementeerd.

    Ga naar het configuratiebestand van de app op front-end/staticwebapp.config.json. Dit bestand bevat de volgende sectie:

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

    Deze configuratie bestaat uit de volgende instellingen:

    Eigenschappen Beschrijving
    rolesSource De URL waar het aanmeldingsproces een lijst met beschikbare rollen ophaalt. Voor de voorbeeldtoepassing is /api/GetRolesde URL.
    userDetailsClaim De URL van het schema dat wordt gebruikt om de aanmeldingsaanvraag te valideren.
    openIdIssuer De aanmeldingsroute van Microsoft Entra, toegevoegd aan uw tenant-id.
    clientIdSettingName Uw Microsoft Entra-client-id.
    clientSecretSettingName De waarde van uw Microsoft Entra-clientgeheim.
    loginParameters Als u een toegangstoken voor Microsoft Graph wilt verkrijgen, moet het loginParameters veld worden geconfigureerd met resource=https://graph.microsoft.com.

  2. Selecteer Bewerken om het bestand bij te werken.

  3. Werk de openIdIssuer-waarde https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID> bij door de map-id (tenant) van uw Microsoft Entra-id te vervangen<YOUR_AAD_TENANT_ID>.

  4. Selecteer Wijzigingen doorvoeren....

  5. Voer een doorvoerbericht in en selecteer Wijzigingen doorvoeren.

    Als u deze wijzigingen doorvoert, wordt een GitHub Actions-uitvoering gestart om de statische web-app bij te werken.

  6. Ga naar de resource van uw statische web-app in Azure Portal.

  7. Selecteer Configuratie in de menubalk.

  8. Voeg in de sectie Toepassingsinstellingen de volgende instellingen toe:

    Naam Weergegeven als
    AAD_CLIENT_ID De id van uw Active Directory-toepassing (client).
    AAD_CLIENT_SECRET De waarde van het clientgeheim van uw Active Directory-toepassing.

  9. Selecteer Opslaan.

Rollen maken

  1. Open uw Active Directory-app-registratie in Azure Portal.

  2. Selecteer onder Beheren app-rollen.

  3. Selecteer App-rol maken en voer de volgende waarden in:

    Instelling Weergegeven als
    Display name Voer de beheerder in.
    De toegestane ledentypen Selecteer Gebruikers/groepen.
    Weergegeven als Voer de beheerder in.
    Beschrijving Voer Beheer istrator in.

  4. Schakel het selectievakje in voor Wilt u deze app-rol inschakelen?

  5. Selecteer Toepassen.

  6. Herhaal nu hetzelfde proces voor een rol met de naam lezer.

  7. Kopieer de id-waarden voor elke rol en zet deze apart in een teksteditor.

Aangepaste rollen verifiëren

De voorbeeldtoepassing bevat een API-functie (api/GetRoles/index.js) waarmee Microsoft Graph wordt opgevraagd of een gebruiker zich in een vooraf gedefinieerde groep bevindt.

Op basis van de groepslidmaatschappen van de gebruiker wijst de functie aangepaste rollen toe aan de gebruiker. De toepassing is geconfigureerd om bepaalde routes te beperken op basis van deze aangepaste rollen.

  1. Ga in uw GitHub-opslagplaats naar de functie GetRoles in api/GetRoles/index.js.

    Bovenaan bevindt zich een roleGroupMappings object dat aangepaste gebruikersrollen toe wijst aan Microsoft Entra-groepen.

  2. Selecteer Bewerken.

  3. Werk het object bij met groeps-id's van uw Microsoft Entra-tenant.

    Als u bijvoorbeeld groepen met id's 6b0b2fff-53e9-4cff-914f-dd97a13bfbd6 hebt en b6059db5-9cef-4b27-9434-bb793aa31805u het object bijwerkt naar:

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

    De functie GetRoles wordt aangeroepen wanneer een gebruiker is geverifieerd met Microsoft Entra-id. De functie gebruikt het toegangstoken van de gebruiker om een query uit te voeren op het Active Directory-groepslidmaatschap van Microsoft Graph. Als de gebruiker lid is van groepen die in het roleGroupMappings object zijn gedefinieerd, worden de bijbehorende aangepaste rollen geretourneerd.

    Als een gebruiker in het bovenstaande voorbeeld lid is van de Active Directory-groep met id b6059db5-9cef-4b27-9434-bb793aa31805, krijgt deze de reader rol.

  4. Selecteer Wijzigingen doorvoeren....

  5. Voeg een doorvoerbericht toe en selecteer Wijzigingen doorvoeren.

    Als u deze wijzigingen aanbrengt, wordt een build gestart om de statische web-app bij te werken.

  6. Wanneer de implementatie is voltooid, kunt u uw wijzigingen controleren door naar de URL van de app te navigeren.

  7. Meld u aan bij uw statische web-app met behulp van Microsoft Entra ID.

  8. Wanneer u bent aangemeld, wordt in de voorbeeld-app de lijst met rollen weergegeven die u hebt toegewezen op basis van het Active Directory-groepslidmaatschap van uw identiteit.

    Afhankelijk van deze rollen hebt u toegang tot bepaalde routes in de app toegestaan of verboden.

Notitie

Sommige query's voor Microsoft Graph retourneren meerdere pagina's met gegevens. Wanneer er meer dan één queryaanvraag is vereist, retourneert Microsoft Graph een @odata.nextLink eigenschap in het antwoord dat een URL bevat naar de volgende pagina met resultaten. Zie Microsoft Graph-gegevens paging in uw app voor meer informatie

Resources opschonen

Schoon de geïmplementeerd resources op door de resourcegroep te verwijderen.

  1. Selecteer Resourcegroep in het linkermenu van Azure Portal.

  2. Voer de naam van de resourcegroep in het veld Filter by name in.

  3. Selecteer de naam van de resourcegroep die u in deze zelfstudie hebt gebruikt.

  4. Selecteer Resourcegroep verwijderen in het bovenste menu.

Volgende stappen

Verificatie en autorisatie