Condividi tramite

Esercitazione: Assegnare ruoli personalizzati con una funzione e Microsoft Graph

  • Articolo

Questo articolo illustra come usare una funzione per eseguire query su Microsoft Graph e assegnare ruoli personalizzati a un utente in base all'appartenenza al gruppo di Active Directory.

Questa esercitazione apprendi come:

  • Distribuire un'app Web statica.
  • Creare una registrazione dell'app Microsoft Entra.
  • Configurare l'autenticazione personalizzata con Microsoft Entra ID.
  • Configurare una funzione serverless che esegue una query sull'appartenenza al gruppo di Active Directory dell'utente e restituisce un elenco di ruoli personalizzati.

Nota

Questa esercitazione richiede l'uso di una funzione per assegnare ruoli. La gestione dei ruoli basata su funzioni è attualmente in anteprima. Il livello di autorizzazione necessario per completare questa esercitazione è "User.Read.All".

Esiste una funzione denominata GetRoles nell'API dell'app. Questa funzione usa il token di accesso dell'utente per eseguire query su Active Directory da Microsoft Graph. Se l'utente è membro di qualsiasi gruppo definito nell'app, viene eseguito il mapping dei ruoli personalizzati corrispondenti all'utente.

Prerequisiti

Requisito Commenti
Account Azure attivo Se non si ha un account, è possibile crearne uno gratuito.
Problema relativo alle autorizzazioni di Microsoft Entra È necessario disporre di autorizzazioni sufficienti per creare un'applicazione Microsoft Entra.

Creare un repository GitHub

  1. Generare un repository basato sul modello di funzione ruoli. Passare al percorso seguente per creare un nuovo repository.

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

  2. Assegnare al repository il nome my-custom-roles-app.

  3. Selezionare Create repository from template (Crea repository da modello).

Distribuire l'app Web statica in Azure

  1. In una nuova finestra del browser aprire il portale di Azure.

  2. Nell'angolo superiore sinistro selezionare Crea una risorsa.

  3. Nella casella di ricerca digitare app Web statiche.

  4. Selezionare App Web statiche.

  5. Seleziona Crea.

  6. Configurare l'app Web statica con le informazioni seguenti:

    Impostazione Valore Note
    Abbonamento Seleziona la tua sottoscrizione di Azure.
    Gruppo di risorse Creare un nuovo gruppo denominato my-custom-roles-app-group.
    Nome my-custom-roles-app
    Tipo di piano Standard La personalizzazione dell'autenticazione e l'assegnazione di ruoli tramite una funzione richiedono il piano Standard .
    Area per l'API Selezionare l'area più vicina.

  7. Nella sezione Dettagli distribuzione:

    Impostazione Valore
    Origine Selezionare GitHub.
    Organization Selezionare l'organizzazione in cui è stato generato il repository.
    Repository Selezionare my-custom-roles-app.
    Filiale Selezionare main.

  8. Nella sezione Dettagli compilazione aggiungere i dettagli di configurazione per questa app.

    Impostazione Valore Note
    Set di impostazioni di compilazione Seleziona Personalizza.
    App location (Percorso app) Immettere /frontend. Questa cartella contiene l'applicazione front-end.
    Posizione dell'API /Api Cartella nel repository contenente le funzioni API.
    Percorso di output Lasciare vuoto. Questa app non ha output di compilazione.

  9. Selezionare Rivedi e crea.

  10. Selezionare Crea per avviare la prima distribuzione.

  11. Al termine del processo, selezionare Vai alla risorsa per aprire la nuova app Web statica.

  12. Nella sezione panoramica individuare l'URL dell'applicazione. Copiare questo valore in un editor di testo da usare nei passaggi successivi per configurare l'autenticazione di Active Directory.

Creare un'applicazione Microsoft Entra

  1. Nella portale di Azure cercare e passare a Microsoft Entra ID.

  2. Scegliere Registrazioni app dal menu Gestisci.

  3. Selezionare Nuova registrazione per aprire la finestra Registra un'applicazione . Immettere i valori seguenti:

    Impostazione Valore Note
    Nome Immettere MyStaticWebApp.
    Tipi di account supportati Selezionare Account solo in questa directory dell'organizzazione.
    URI di reindirizzamento Selezionare Web e immettere l'URL di callback di autenticazione Di Microsoft Entra dell'app Web statica. Sostituire <YOUR_SITE_URL> in <YOUR_SITE_URL>/.auth/login/aad/callback con l'URL dell'app Web statica. Questo URL è quello copiato in un editor di testo in un passaggio precedente.

    Create an app registration

  4. Selezionare Registra.

  5. Dopo aver creato la registrazione dell'app, copiare l'ID applicazione (client) e l'ID directory (tenant) nella sezione Informazioni di base in un editor di testo.

    Questi valori sono necessari per configurare l'autenticazione di Active Directory nell'app Web statica.

Abilitare i token ID

  1. Nelle impostazioni di registrazione dell'app selezionare Autenticazione in Gestisci.

  2. Nella sezione Implicit grant and hybrid flows (Concessione implicita e flussi ibridi) selezionare ID tokens (used for implicit and hybrid flows) (ID token - Usati per flussi impliciti e ibridi).

    Il runtime App Web statiche richiede questa configurazione per autenticare gli utenti.

  3. Seleziona Salva.

Creare un segreto client

  1. Nelle impostazioni di registrazione dell'app selezionare Certificati e segreti in Gestisci.

  2. Nella sezione Segreti client seleziona Nuovo segreto client.

  3. Per il campo Descrizione immettere MyStaticWebApp.

  4. Per il campo Scadenza lasciare il valore predefinito di 6 mesi.

    Nota

    Devi ruotare il segreto prima della data di scadenza generando un nuovo segreto e aggiornando l'app con il relativo valore.

  5. Selezionare Aggiungi.

  6. Copiare il valore del segreto client creato in un editor di testo.

    Questo valore è necessario per configurare l'autenticazione di Active Directory nell'app Web statica.

    Create a client secret

Configurare l'autenticazione di Active Directory

  1. In un browser aprire il repository GitHub contenente l'app Web statica distribuita.

    Passare al file di configurazione dell'app in front-end/staticwebapp.config.json. Questo file contiene la sezione seguente:

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

    Questa configurazione è costituita dalle impostazioni seguenti:

    Proprietà Descrizione
    rolesSource URL in cui il processo di accesso ottiene un elenco di ruoli disponibili. Per l'applicazione di esempio, l'URL è /api/GetRoles.
    userDetailsClaim URL dello schema usato per convalidare la richiesta di accesso.
    openIdIssuer La route di accesso di Microsoft Entra, aggiunta con l'ID tenant.
    clientIdSettingName ID client Microsoft Entra.
    clientSecretSettingName Valore del segreto client Microsoft Entra.
    loginParameters Per ottenere un token di accesso per Microsoft Graph, il loginParameters campo deve essere configurato con resource=https://graph.microsoft.com.

  2. Selezionare Modifica per aggiornare il file.

  3. Aggiornare il valore openIdIssuer di https://login.microsoftonline.com/<YOUR_AAD_TENANT_ID> sostituendo <YOUR_AAD_TENANT_ID> con l'ID directory (tenant) dell'ID Microsoft Entra.

  4. Selezionare Commit changes (Esegui commit modifiche).

  5. Immettere un messaggio di commit e selezionare Commit changes (Esegui commit modifiche).

    Il commit di queste modifiche avvia un'esecuzione di GitHub Actions per aggiornare l'app Web statica.

  6. Passare alla risorsa app Web statica nella portale di Azure.

  7. Selezionare Configurazione nella barra dei menu.

  8. Nella sezione Impostazioni applicazione aggiungere le impostazioni seguenti:

    Nome valore
    AAD_CLIENT_ID ID applicazione (client) di Active Directory.
    AAD_CLIENT_SECRET Valore del segreto client dell'applicazione Active Directory.

  9. Seleziona Salva.

Creazione di ruoli

  1. Aprire la registrazione dell'app Active Directory nel portale di Azure.

  2. In Gestisci selezionare Ruoli app.

  3. Selezionare Crea ruolo app e immettere i valori seguenti:

    Impostazione Valore
    Nome visualizzato Immettere admin.
    Tipi di membro consentiti Selezionare Utenti/Gruppi.
    Valore Immettere admin.
    Descrizione Immettere Amministrazione istrator.

  4. Selezionare la casella Vuoi abilitare questo ruolo dell'app?

  5. Selezionare Applica.

  6. Ripetere ora lo stesso processo per un ruolo denominato reader.

  7. Copiare i valori ID per ogni ruolo e metterli da parte in un editor di testo.

Verificare i ruoli personalizzati

L'applicazione di esempio contiene una funzione API (api/GetRoles/index.js) che esegue una query su Microsoft Graph per determinare se un utente si trova in un gruppo predefinito.

In base alle appartenenze ai gruppi dell'utente, la funzione assegna ruoli personalizzati all'utente. L'applicazione è configurata per limitare determinate route in base a questi ruoli personalizzati.

  1. Nel repository GitHub passare alla funzione GetRoles disponibile in api/GetRoles/index.js.

    Nella parte superiore è presente un roleGroupMappings oggetto che esegue il mapping dei ruoli utente personalizzati ai gruppi di Microsoft Entra.

  2. Seleziona Modifica.

  3. Aggiornare l'oggetto con ID gruppo dal tenant di Microsoft Entra.

    Ad esempio, se sono presenti gruppi con ID 6b0b2fff-53e9-4cff-914f-dd97a13bfbd6 e b6059db5-9cef-4b27-9434-bb793aa31805, aggiornare l'oggetto in:

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

    La funzione GetRoles viene chiamata ogni volta che un utente viene autenticato correttamente con Microsoft Entra ID. La funzione usa il token di accesso dell'utente per eseguire una query sull'appartenenza al gruppo di Active Directory da Microsoft Graph. Se l'utente è membro di qualsiasi gruppo definito nell'oggetto roleGroupMappings , vengono restituiti i ruoli personalizzati corrispondenti.

    Nell'esempio precedente, se un utente è membro del gruppo di Active Directory con ID b6059db5-9cef-4b27-9434-bb793aa31805, viene concesso il reader ruolo .

  4. Selezionare Commit changes (Esegui commit modifiche).

  5. Aggiungere un messaggio di commit e selezionare Commit changes (Esegui commit modifiche).

    L'esecuzione di queste modifiche avvia una compilazione in per aggiornare l'app Web statica.

  6. Al termine della distribuzione, è possibile verificare le modifiche passando all'URL dell'app.

  7. Accedere all'app Web statica usando Microsoft Entra ID.

  8. Dopo aver eseguito l'accesso, l'app di esempio visualizza l'elenco dei ruoli assegnati in base all'appartenenza al gruppo di Active Directory dell'identità.

    A seconda di questi ruoli, è consentito o vietato accedere ad alcune delle route nell'app.

Nota

Alcune query su Microsoft Graph restituiscono più pagine di dati. Quando sono necessarie più richieste di query, Microsoft Graph restituisce una @odata.nextLink proprietà nella risposta che contiene un URL alla pagina successiva dei risultati. Per altre informazioni, vedere Paging dei dati di Microsoft Graph nell'app

Pulire le risorse

Eliminare le risorse distribuite eliminando il gruppo di risorse.

  1. Nel portale di Azure selezionare Gruppo di risorse nel menu a sinistra.

  2. Immettere il nome del gruppo di risorse nel campo Filtra per nome.

  3. Selezionare il nome del gruppo di risorse usato in questa esercitazione.

  4. Selezionare Elimina gruppo di risorse nel menu in alto.

Passaggi successivi

Autenticazione e autorizzazione