Guida rapida: Modificare il profilo in un'app Web di esempio Node.js

Si applica a: cerchio verde con un segno di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. Tenant esterni (altre informazioni)

In questa guida introduttiva, utilizzerai un'app Web di esempio Node.js per imparare ad aggiungere l'accesso e modificare il profilo in un'app Web. L'app Web di esempio usa Microsoft Authentication Library for Node (MSAL Node) e l'API Microsoft Graph per completare l'operazione di accesso e modifica del profilo. L'operazione di modifica del profilo richiede a un utente di completare un'autenticazione a più fattori (MFA).

Prerequisiti

  • Completare i passaggi e i prerequisiti nell'articolo Avvio rapido: accedere agli utenti in un'app web di esempio. Questa guida introduttiva illustra come consentire l'accesso agli utenti usando un'app Web di esempio, Node.js.
  • Registrare una nuova app per l'API Web nell'interfaccia di amministrazione di Microsoft Entra, con il nome edit-profile-service, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
    • ID applicazione (cliente)
    • ID della directory (cliente)
  • Aggiungi un segreto del client alla registrazione dell'app. Non usare segreti client nelle app di produzione. Usare invece certificati o credenziali federate. Per altre informazioni, vedere Aggiungere credenziali all'applicazione.

Configurare gli ambiti e i ruoli dell'API

Registrando l'API Web, è necessario configurare gli ambiti API per definire le autorizzazioni che un'applicazione client può richiedere per accedere all'API Web. Inoltre, è necessario configurare i ruoli dell'app per specificare i ruoli disponibili per utenti o applicazioni e concedere le autorizzazioni API necessarie all'app Web per abilitarla per chiamare l'API Web.

Configurare gli ambiti dell'API dell'app EditProfileService

L'app EditProfileService deve esporre le autorizzazioni acquisite da un'app client per chiamare l'API Web.

Un'API deve pubblicare almeno un ambito, detto anche autorizzazione delegata, affinché le app client ottengano correttamente un token di accesso per un utente. Per pubblicare un ambito, seguire questa procedura:

  1. Dalla pagina Registrazioni dell'app , selezionare l'applicazione API che hai creato, ad esempio edit-profile-service, per aprire la sua pagina Panoramica .

  2. In Gestisci, selezionare Esponi un'API.

  3. Nella parte superiore della pagina, accanto a URI ID applicazione, selezionare il collegamento Aggiungi per generare un URI univoco per questa app.

  4. Accettare l'URI dell'ID applicazione proposto, ad esempio api://{clientId}e selezionare Salva. Quando l'applicazione Web richiede un token di accesso per l'API Web, aggiunge l'URI come prefisso per ogni ambito definito per l'API.

  5. In Ambiti definiti da questa APIselezionare Aggiungi un ambito.

  6. Immettere i valori seguenti che definiscono un accesso in lettura all'API, quindi selezionare Aggiungi ambito per salvare le modifiche:

    Proprietà Valore
    Nome dell'ambito EditProfileService.ReadWrite
    Chi può fornire il consenso Solo per amministratori
    Nome visualizzato per il consenso dell'amministratore Il cliente modifica il profilo tramite il servizio di modifica del profilo
    Descrizione del consenso dell'amministratore L'obiettivo di consentire all'app Web client di modificare il profilo chiamando il servizio di modifica profilo.
    Stato abilitato

Concedi l'autorizzazione User.ReadWrite all'app EditProfileService

User.ReadWrite è un'autorizzazione api Microsoft Graph che consente a un utente di aggiornare il proprio profilo. Per concedere all'utente l'autorizzazione User.ReadWrite per l'app EditProfileService, segui questi passaggi:

  1. Nella pagina Registrazioni app, selezionare l'applicazione che hai creato (ad esempio edit-profile-service) per aprire la sua pagina Panoramica.

  2. In Gestisciselezionare autorizzazioni API .

  3. Selezionare la scheda API Microsoft, quindi in API Microsoft comunemente usateselezionare Microsoft Graph.

  4. Selezionare Autorizzazioni delegate, quindi cercare e selezionare User.ReadWrite dall'elenco delle autorizzazioni.

  5. Selezionare il pulsante Aggiungi autorizzazioni.

  6. Hai assegnato correttamente le autorizzazioni User.ReadWrite alla tua app EditProfileService. Tuttavia, poiché il tenant è un tenant esterno, gli utenti dei clienti stessi non possono fornire il consenso a queste autorizzazioni. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

    1. Selezionare Concedi il consenso amministrativo per il <nome del tenant>, e quindi selezionare Sì.
    2. Selezionare Aggiorna, quindi verificare che Concesso a <il nome del tenant> appaia in Stato per entrambi gli ambiti.

Concedere autorizzazioni API all'applicazione web client

In questa sezione si concedono le autorizzazioni API all'applicazione web client registrata in precedenza (nella sezione prerequisiti).

Concedere all'applicazione Web del client l'autorizzazione EditProfileService.ReadWrite. Questa autorizzazione viene esposta dall'app EditProfileService e protegge l'operazione del profilo di aggiornamento con MFA. Per concedere all'EditProfileService.ReadWrite l'autorizzazione per l'app Web client, seguire questa procedura:

  1. Nella pagina registrazioni dell'app selezionare l'applicazione API creata( ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.

  2. In Gestisciselezionare autorizzazioni API .

  3. In Autorizzazioni configurate, selezionare Aggiungi un'autorizzazione.

  4. Seleziona la scheda API utilizzate dalla mia organizzazione.

  5. Nell'elenco delle API selezionare l'API, ad esempio edit-profile-service.

  6. Selezionare l'opzione Autorizzazioni delegate.

  7. Nell'elenco delle autorizzazioni selezionare EditProfileService.ReadWrite.

  8. Selezionare il pulsante Aggiungi autorizzazioni.

  9. Nell'elenco autorizzazioni configurate selezionare l'autorizzazione EditProfileService.ReadWrite, quindi copiare l'URI completo dell'autorizzazione per usarlo in seguito. L'URI completo delle autorizzazioni è simile a api://{clientId}/{EditProfileService.ReadWrite}.

  10. Le autorizzazioni *EditProfileService.ReadWrite sono state assegnate correttamente all'app web client. Tuttavia, poiché il tenant è un tenant esterno, gli utenti dei clienti stessi non possono fornire il consenso a queste autorizzazioni. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

    1. Selezionare Concedi il consenso amministrativo per il <nome del tenant>, e quindi selezionare Sì.
    2. Selezionare Aggiorna, quindi verificare che Concesso a <il nome del tenant> appaia in Stato per entrambi gli ambiti.

Creare una policy di autenticazione a più fattori per l'accesso condizionale

L'app EditProfileService registrata in precedenza è la risorsa da proteggere con MFA.

Per creare un criterio di accesso condizionale (CA) MFA, seguire la procedura descritta in Aggiungere l'autenticazione a più fattori a un'app. Quando si creano i criteri, usare le impostazioni seguenti:

  • Per il Nome, usare criterio MFA.
  • Per Risorse di destinazione selezionare l'app EditProfileService registrata in precedenza, ad esempio edit-profile-service.

Clonare o scaricare un'app Web di esempio

Hai già clonato dal GitHub l'app di esempio dai prerequisiti, ma se non lo hai fatto, puoi clonarla oppure scaricarla come un file .zip.

Scaricare il file .zip o clonare l'app Web di esempio da GitHub eseguendo il comando seguente:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Configurare l'app Web di esempio

Questo esempio di codice contiene due app, l'app Web client e l'app per le API (app EditProfileService). È necessario aggiornare queste app per usare le impostazioni del tenant esterno. A tale scopo, seguire questa procedura:

  1. Nell'editor di codice, apri il file 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js, quindi trova il segnaposto:

    • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app client web registrata in precedenza.
    • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non conosci il nome del tuo cliente, scopri come leggere i dettagli del tuo cliente.
    • Enter_the_Client_Secret_Here e sostituirlo con il valore del segreto dell'applicazione web client copiato in precedenza.
    • graph_end_point e sostituirlo con l'endpoint dell'API Microsoft Graph, https://graph.microsoft.com/.
    • Add_your_protected_scope_here e sostituirlo con l'ambito dell'applicazione API (applicazione EditProfileService). Il valore è simile a api://{clientId}/EditProfileService.ReadWrite. {clientId} è il valore ID applicazione (client) di EditProfileService registrato in precedenza.

  2. Nell'editor di codice, apri il file 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js, quindi trova il segnaposto:

    • Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non conosci il nome del tuo cliente, scopri come leggere i dettagli del tuo cliente.
    • Enter_the_Tenant_ID_Here e sostituirlo con l'ID del tenant. Se non si ha l'ID tenant, scopri come leggere i dettagli del Tenant.
    • Enter_the_Edit_Profile_Service_Application_Id_Here e sostituirlo con è il valore ID applicazione (client) dell'applicazione EditProfileService .
    • Enter_the_Client_Secret_Here e sostituirlo con il valore del segreto client creato come parte dei prerequisiti.
    • graph_end_point e sostituirlo con l'endpoint dell'API Microsoft Graph, https://graph.microsoft.com/.

Installare le dipendenze del progetto ed eseguire l'app

Per testare l'app, installare le dipendenze del progetto sia per l'app client che per l'app del servizio/API, quindi eseguirle.

  1. Per eseguire l'app client, aprire la finestra del terminale e quindi eseguire i comandi seguenti:

    cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start

  2. Per eseguire l'app del servizio/API di edit, cambiare directory nell'app del servizio/API, 1-Authentication\7-edit-profile-with-mfa-express\Api, quindi eseguire i comandi seguenti:

    npm install
npm start

  3. Aprire il browser, quindi passare a http://localhost:3000. Se si verificano errori di certificato SSL, creare un file .env, quindi aggiungere la configurazione seguente:

    # 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. Seleziona il pulsante Accedi, quindi effettua l'accesso.

  5. Nella pagina di accesso digitare l'indirizzo di posta elettronica , selezionare Avanti, digitare Password, quindi selezionare Accedi. Se non si ha un account, selezionare Nessun account? Creare un collegamento, che avvia il flusso di iscrizione.

  6. Per aggiornare il profilo, selezionare il collegamento Modifica profilo. Viene visualizzata una pagina simile alla schermata seguente:

    Screenshot del profilo di aggiornamento utente.

  7. Per modificare il profilo, selezionare il pulsante Modifica profilo. Se non l'hai già fatto, l'app ti invita a completare una sfida di autenticazione a più fattori.

  8. Apportare modifiche ai dettagli del profilo, quindi selezionare il pulsante Salva .

Contenuto correlato

  • Last updated on