Guida introduttiva: Effettuare l'accesso degli utenti in un'app web di esempio

In questa guida introduttiva, si utilizza un'app web di esempio per illustrare come far accedere gli utenti e chiamare l'API Microsoft Graph nel tenant del tuo ambiente lavorativo. L'app di esempio usa Microsoft Authentication Library per gestire l'autenticazione.

Prima di iniziare, usa il selettore Scegliere un tipo di tenant nella parte superiore di questa pagina per selezionare il tipo di tenant. Microsoft Entra ID offre due configurazioni di tenant, forza lavoro e esterna. Una configurazione del tenant di forza lavoro è destinata ai dipendenti, alle app interne e ad altre risorse organizzative. Un tenant esterno è destinato alle app rivolte ai clienti.

Prerequisiti

Nodo

• Una sottoscrizione di Azure. Creare una sottoscrizione di Azure gratuitamente.
• Node.js
• Visual Studio Code o un altro editor di codice.
• Tenant di Microsoft Entra workforce. Per altre informazioni, vedere come ottenere un tenant di Microsoft Entra.

ASP.NET Core

• Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
• Requisito minimo di .NET 6.0 SDK
• Visual Studio 2022 o Visual Studio Code

python Flask

• Un account Azure con una sottoscrizione attiva. Crea un account gratuitamente.
• Tenant di Microsoft Entra workforce. Per altre informazioni, vedere come ottenere un tenant di Microsoft Entra.
• Python 3 +

Registrare l'app Web

Per consentire all'applicazione di accedere agli utenti, è necessario che Microsoft Entra ID sia a conoscenza dell'applicazione creata. La registrazione dell'app stabilisce una relazione di trust tra l'app e Microsoft Entra. Quando si registra un'applicazione, l'ID esterno genera un identificatore univoco noto come ID applicazione (client) , un valore usato per identificare l'app durante la creazione di richieste di autenticazione.

Per completare la registrazione, specificare un nome dell'applicazione e specificare i tipi di account supportati. Dopo la registrazione, l'applicazione panoramica riquadro visualizza gli identificatori necessari nel codice sorgente dell'applicazione.

1. Accedere all'interfaccia di amministrazione di Microsoft Entra.

2. Se si ha accesso a più tenant, utilizzare l'icona impostazioni nel menu in alto per passare al tenant in cui si desidera registrare l'applicazione, a partire dal menu Directory + sottoscrizioni.

3. Passare a Identity>Applications>App registrations, selezionare Nuova registrazione.

4. Immettere un Nome per l'applicazione, ad esempio identity-client-web-app.

5. Per Tipi di account supportati, selezionare Account in questa directory organizzativa solo. Per informazioni sui diversi tipi di account, selezionare l'opzione Aiutami a scegliere.

6. Selezionare Registra.

   

7. Al termine della registrazione, viene visualizzato il riquadro Panoramica dell'applicazione. Registrare l'ID Directory (tenant) e l'ID Applicazione (cliente) da usare nel codice sorgente dell'applicazione.

   

   Nota

   I tipi di account supportati possono essere modificati facendo riferimento a Modificare gli account supportati da un'applicazione.

Aggiungere URL e piattaforma

Una piattaforma specifica il tipo di applicazione che si vuole integrare. Un URI di reindirizzamento è il percorso in cui il server di autenticazione di Identity Platform invia l'utente dopo aver autorizzato e concesso i token di sicurezza.

Per accedere a un utente, l'applicazione deve inviare una richiesta di accesso con un URI di reindirizzamento specificato come parametro e deve corrispondere a uno degli URI di reindirizzamento aggiunti nella registrazione dell'app.

Node

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. Nella sezione Gestisci, seleziona Autenticazione.
2. Nella pagina configurazioni della piattaforma selezionare Aggiungi una piattaformae quindi selezionare 'opzione Web.
3. Per gli URI di reindirizzamento , immetterehttp://localhost:3000/auth/redirect.
4. In URL di disconnessione del canale frontaleimmettere https://localhost:5001/signout-callback-oidc per effettuare la disconnessione.
5. Selezionare Configura per salvare le modifiche.

ASP.NET Core

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, selezionare Autenticazione.
2. Nella pagina configurazioni della piattaforma , selezionare Aggiungi una piattaformae quindi selezionare l'opzione Web.
3. Per gli URI di reindirizzamento , immettere https://localhost:5001/signin-oidc.
4. In URL di logout del canale frontale, immettere https://localhost:5001/signout-callback-oidc per uscire.
5. Selezionare Configura per salvare le modifiche.

python Flask

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, selezionare su Autenticazione.
2. Nella pagina configurazioni della piattaforma selezionare Aggiungi una piattaformae quindi selezionare l'opzione Web.
3. Per gli URI di reindirizzamento , immetterehttp://localhost:5000/getAToken.
4. Selezionare Configura per salvare le modifiche.

Aggiungere un segreto client o un certificato dell'app

Nodo

Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede token:

1. Nella pagina registrazioni dell'app selezionare l'applicazione creata ( ad esempio segreto client dell'app Web) per aprire la relativa pagina Panoramica.
2. In Gestisci, selezionare Certificati & Segreti>Segreti del client>Nuovo segreto client.
3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio segreto client dell'app Web).
4. In Scade, selezionare la durata per cui il segreto rimane valido, in base alle regole di sicurezza dell'organizzazione, e quindi selezionare Aggiungi.
5. Registra il valore del segreto. Questo valore viene usato per la configurazione in un passaggio successivo. Il valore del segreto non sarà mai più visualizzabile né recuperabile in alcun modo possibile, dopo che si esce da Certificati e segreti. Assicurarsi di registrarlo.

ASP.NET Core

Per usare le credenziali dei certificati per l'app Web, è necessario creare e quindi caricare il certificato. A scopo di test, è possibile usare un certificato autofirmato. Usare la procedura seguente per creare e caricare un certificato autofirmato:

1. Usando il terminale passare a una directory di propria scelta, quindi creare il certificato autofirmato usando il comando seguente.

   dotnet dev-certs https -ep ./certificate.crt --trust
   

2. Tornare all'interfaccia di amministrazione di Microsoft Entra e in Gestisciselezionare Certificati & segreti>Carica certificato.

3. Selezionare la scheda Certificati (0) e quindi selezionare Carica certificato.

4. Viene visualizzato un riquadro Carica certificato. Usare l'icona per passare al file di certificato creato nel passaggio precedente e selezionare Apri.

5. Immettere una descrizione per il certificato, ad esempio Certificato per aspnet-web-appe selezionare Aggiungi.

6. Registrare il valore dell'impronta digitale da usare nel passaggio successivo.

python Flask

Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede token:

1. Nella pagina registrazioni dell'app selezionare l'applicazione creata ( ad esempio segreto client dell'app Web) per aprire la relativa pagina Panoramica.
2. In Gestisci, selezionare Certificati & segreti>Segreti client>Nuovo segreto client.
3. Nella casella Descrizione, immettere la descrizione per il segreto del client, ad esempio segreto del client dell'app Web.
4. In Scadeselezionare una durata per cui il segreto è valido (in base alle regole di sicurezza dell'organizzazione) e quindi selezionare Aggiungi.
5. Registrare il valore del segreto. Questo valore viene usato per la configurazione in un passaggio successivo. Il valore del segreto non verrà visualizzato di nuovo e non sarà recuperabile in alcun modo, dopo aver navigato via dalla Certificati e segreti. Assicurarsi di registrarlo.

Quando si creano le credenziali per un'applicazione client riservata:

• Microsoft consiglia di usare un certificato anziché un segreto client prima di spostare l'applicazione in un ambiente di produzione. Per altre informazioni su come usare un certificato, vedere le istruzioni in credenziali del certificato di autenticazione delle applicazioni di Microsoft Identity Platform.

• A scopo di test, è possibile creare un certificato autofirmato e configurare le app per l'autenticazione. Tuttavia, nell'ambiente di produzione, è consigliabile acquistare un certificato firmato da un'autorità di certificazione nota, quindi usare Azure Key Vault per gestire l'accesso e la durata dei certificati.

Clonare o scaricare un'applicazione Web di esempio

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

Nodo

• Scaricare il file .zip, quindi estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri o clonare il repository:

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

ASP.NET Core

• Scaricare il file .zip, quindi estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri o clonare il repository:

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

python Flask

• Scaricare l'esempio di codice Python quindi estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri o clonare il repository:

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

Configurare l'app Web di esempio

Per consentire l'accesso degli utenti con l'app di esempio, è necessario aggiornare l'app con i dettagli della tua app e del tenant:

Node

Nella cartella ms-identity-node-main, aprire il file .env nella cartella App. Sostituire i segnaposto seguenti:

Variabile	Descrizione	Esempi
Enter_the_Cloud_Instance_Id_Here	Istanza cloud di Azure in cui è registrata l'applicazione	https://login.microsoftonline.com/ (includere la barra obliqua finale)
Enter_the_Tenant_Info_here	ID tenant o dominio primario	contoso.microsoft.com o aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	ID client dell'applicazione registrata	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Segreto client dell'applicazione registrata	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Istanza cloud dell'API Microsoft Graph chiamata dall'app	https://graph.microsoft.com/ (includere la barra finale)
Enter_the_Express_Session_Secret_Here	Stringa casuale di caratteri usata per firmare il cookie di sessione Express	A1b-C2d_E3f.H4...

Dopo aver apportato modifiche, il file dovrebbe essere simile al frammento di codice seguente:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. Nell'IDE aprire la cartella del progetto ms-identity-docs-code-dotnet\web-app-aspnet, contenente l'esempio.

2. Aprire appsettings.json e sostituire il contenuto del file con il frammento di codice seguente;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCertificates": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApi": {
       "BaseUrl": "https://graph.microsoft.com/v1.0/",
       "RelativePath": "me",
       "Scopes": [ 
         "user.read" 
       ]
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId: identificatore del tenant in cui è registrata l'applicazione. Sostituire il testo tra virgolette con il Directory (tenant) ID registrato in precedenza dalla pagina di panoramica dell'applicazione registrata.
   • ClientId: identificatore dell'applicazione, detto anche client. Sostituire il testo tra virgolette con il valore Application (client) ID registrato in precedenza dalla pagina di panoramica dell'applicazione registrata.
   • ClientCertificates: viene usato un certificato autofirmato per l'autenticazione nell'applicazione. Sostituire il testo del CertificateThumbprint con l'impronta digitale del certificato registrato in precedenza.

python Flask

1. Aprire l'applicazione scaricata in un IDE e passare alla cartella radice dell'app di esempio.

   cd flask-web-app
   

2. Creare un file .env nella cartella radice del progetto usando .env.sample come guida.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Impostare il valore di CLIENT_ID sull'ID applicazione (client) per l'applicazione registrata, disponibile nella pagina di panoramica.
   • Imposta il valore di CLIENT_SECRET sul segreto client che hai creato nella sezione Certificati e & Segreti per l'applicazione registrata.
   • Imposta il valore di AUTHORITY su un https://login.microsoftonline.com/<TENANT_GUID>. L'ID directory (tenant) è disponibile nella pagina di panoramica della registrazione dell'app.

   Le variabili di ambiente a cui si fa riferimento in app_config.pysono conservate in un file separato .env per tenerle fuori dal controllo del codice sorgente. Il file fornito .gitignore impedisce l'archiviazione del file .env.

Eseguire e testare un'app Web di esempio

Hai configurato la tua app di esempio. Puoi avviarlo e testarlo.

Node

1. Per avviare il server, eseguire i comandi seguenti dall'interno della directory del progetto:

   cd App
   npm install
   npm start
   

2. Passare a http://localhost:3000/.

3. Selezionare Accedi per avviare il processo di accesso.

La prima volta che si accede, viene richiesto di fornire il consenso per consentire all'applicazione di accedere e accedere al profilo. Dopo aver eseguito l'accesso, si verrà reindirizzati alla home page dell'applicazione.

Funzionamento dell'app

L'esempio ospita un server Web in localhost, porta 3000. Quando un Web browser accede a questo indirizzo, l'app esegue il rendering della home page. Quando l'utente seleziona Accedi, l'app reindirizza il browser alla schermata di accesso di Microsoft Entra, tramite l'URL generato dalla libreria di nodi MSAL. Dopo il consenso dell'utente, il browser reindirizza l'utente alla home page dell'applicazione, insieme a un ID e un token di accesso.

ASP.NET Core

1. Nella directory del progetto usare il terminale per immettere il comando seguente;

   dotnet run
   

2. Copiare l'URL https visualizzato nel terminale, ad esempio https://localhost:5001e incollarlo in un browser. È consigliabile usare una sessione privata o in incognito del browser.

3. Seguire i passaggi e immettere i dettagli necessari per accedere con l'account Microsoft. Viene richiesto di fornire un indirizzo di posta elettronica in modo che sia possibile inviare un passcode una volta all'utente. Immettere il codice quando richiesto.

4. L'applicazione richiede l'autorizzazione per mantenere l'accesso ai dati a cui è stato concesso l'accesso e per accedere e leggere il profilo. Selezionare Accetta. Viene visualizzata la schermata seguente. Indica che è stato eseguito l'accesso all'applicazione e che i dettagli del profilo vengono visualizzati dall'API Microsoft Graph.

   

Disconnettersi dall'applicazione

1. Trova il collegamento Disconnetti in alto a destra della pagina e selezionalo.
2. Viene richiesto di selezionare un account da cui disconnettersi. Selezionare l'account usato per accedere.
3. Viene visualizzato un messaggio che indica che si è disconnesso. È ora possibile chiudere la finestra del browser.

python Flask

1. Creare un ambiente virtuale per l'app:

   • Per Windows, eseguire i comandi seguenti:

   py -m venv .venv
   .venv\scripts\activate
   

   • Per macOS/Linux, eseguire i comandi seguenti:

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Installare i requisiti usando pip:

   pip install -r requirements.txt
   

3. Eseguire l'app dalla riga di comando. Verificare che l'app sia in esecuzione sulla stessa porta dell'URI di reindirizzamento configurato in precedenza.

   flask run --debug --host=localhost --port=5000
   

4. Copiare l'URL https visualizzato nel terminale, ad esempio https://localhost:5000e incollarlo in un browser. È consigliabile usare una sessione privata o in incognito del browser.

5. Seguire i passaggi e immettere i dettagli necessari per accedere con l'account Microsoft. È necessario specificare un indirizzo di posta elettronica e una password per l'accesso.

6. L'applicazione richiede l'autorizzazione per mantenere l'accesso ai dati consentiti e per accedere e leggere il tuo profilo, come mostrato nello screenshot. Selezionare Accetta.

   

7. Viene visualizzata la schermata seguente, che indica che è stato eseguito l'accesso all'applicazione.

Funzionamento dell'app

Il diagramma seguente illustra il funzionamento dell'app di esempio:

1. L'applicazione usa il pacchetto identity per ottenere un token di accesso da Microsoft Identity Platform. Questo pacchetto è basato su Microsoft Authentication Library (MSAL) per Python per semplificare l'autenticazione e l'autorizzazione nelle app Web.

2. Il token di accesso ottenuto nel passaggio precedente viene usato come token di connessione per autenticare l'utente quando si chiama l'API Microsoft Graph.

Contenuto correlato

Node

• Informazioni su come creare un'app Web Node.js che gestisce l'accesso degli utenti e chiama l'API Microsoft Graph in Esercitazione: Gestire l'accesso degli utenti e acquisire un token per Microsoft Graph in una web app Express Node.js &.

ASP.NET Core

• Impara costruendo questa app Web ASP.NET nella serie di esercitazioni : Registrare un'applicazione con la piattaforma di identità Microsoft.
• Guida introduttiva: Proteggere un'API Web ASP.NET Core con la piattaforma di identità Microsoft.
• Avvio rapido di : distribuire un'app Web ASP.NET nel Servizio app di Azure

python Flask

• Scopri come creare un'app Web Python che autentica gli utenti e chiama un'API Web protetta nel tutorial : App Web per l'autenticazione degli utenti.

In questa guida introduttiva si usa un'app Web di esempio per illustrare come accedere agli utenti nel tenant esterno. L'app di esempio usa Microsoft Authentication Library per gestire l'autenticazione.

Per iniziare, usare il selettore Scegliere un tipo di cliente nella parte superiore di questa pagina per selezionare il tipo di cliente. Microsoft Entra ID offre due configurazioni tenant, forza lavoro e esterna. Una configurazione del tenant della forza lavoro è destinata ai vostri dipendenti, alle applicazioni interne e ad altre risorse dell'organizzazione. Un tenant esterno è destinato alle app rivolte ai clienti.

Prerequisiti

Node

• Visual Studio Code o un altro editor di codice.
• Node.js.
• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • (Scelta consigliata) Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code.
  • Creare un nuovo tenant esterno nel centro di amministrazione di Microsoft Entra.

ASP.NET Core

• Visual Studio Code o un altro editor di codice.
• .NET 7.0 SDK.
• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • (Scelta consigliata) Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code.
  • Creare un nuovo tenant esterno nell'interfaccia di amministrazione di Microsoft Entra.

Python Django

• Visual Studio Code o un altro editor di codice.
• Python 3+.
• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • (Scelta consigliata) Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code.
  • Crea un nuovo tenant esterno nel centro di amministrazione di Microsoft Entra.

python Flask

• Visual Studio Code o un altro editor di codice.
• Python 3+.
• Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
  • (Scelta consigliata) Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code.
  • Creare un nuovo tenant esterno nel centro amministrativo di Microsoft Entra.

Registrare l'app Web

Per consentire alla tua applicazione di effettuare l'accesso agli utenti con Microsoft Entra, Microsoft Entra External ID deve essere consapevole dell'applicazione che crei. La registrazione dell'app stabilisce una relazione di trust tra l'app e Microsoft Entra. Quando si registra un'applicazione, l'ID esterno genera un identificatore univoco noto come ID applicazione (client) , un valore usato per identificare l'app durante la creazione di richieste di autenticazione.

I passaggi seguenti illustrano come registrare l'app nell'interfaccia di amministrazione di Microsoft Entra:

1. Accedere all'interfaccia di amministrazione di Microsoft Entra almeno un Application Developer.

2. Se hai accesso a più tenant, usa l'icona Impostazioni nel menu in alto per passare al tuo tenant esterno dal menu Directory + sottoscrizioni.

3. Passare a Identity>Applications>Registrazioni delle app.

4. Selezionare + Nuova registrazione.

5. Nella pagina Registrare un'applicazione visualizzata;

   1. Immettere un nome applicativo significativo Nome visualizzato agli utenti dell'app, ad esempio ciam-client-app.
   2. In Tipi di account supportatiselezionare account in questa directory organizzativa solo.

6. Seleziona Registra.

7. Il riquadro Panoramica dell'applicazione viene visualizzato al termine della registrazione. Registrare l'ID applicazione (client) da usare nel codice sorgente dell'applicazione.

Aggiungere URL e piattaforma

Una piattaforma specifica il tipo di applicazione che si vuole integrare. Un URI di reindirizzamento è il percorso in cui il server di autenticazione di Identity Platform invia l'utente dopo aver autorizzato e concesso i token di sicurezza.

Per accedere a un utente, l'applicazione deve inviare una richiesta di accesso con un URI di reindirizzamento specificato come parametro e deve corrispondere a uno degli URI di reindirizzamento aggiunti nella registrazione dell'app.

Node

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, selezionare Autenticazione.
2. Nella pagina configurazioni della piattaforma selezionare Aggiungi una piattaformae quindi selezionare 'opzione Web.
3. Per gli URI di reindirizzamento , immettere http://localhost:3000/auth/redirect.
4. Selezionare Configura per salvare le modifiche.

ASP.NET Core

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, seleziona Autenticazione.
2. Nella pagina configurazioni della piattaforma selezionare Aggiungi una piattaformae quindi selezionare 'opzione Web.
3. Per gli URI di reindirizzamento immettere https://localhost:7274/signin-oidc.
4. In URL di disconnessione del canale frontale, immettere https://localhost:7274/signout-callback-oidc per disconnettersi.
5. Selezionare Configura per salvare le modifiche.

Python Django

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, selezionare Autenticazione
2. Nella pagina configurazioni della piattaforma , selezionare Aggiungi una piattaformae quindi selezionare l'opzione Web.
3. Per gli URI di reindirizzamento immettere http://localhost:5000/redirect. Questo URI di reindirizzamento è il percorso in cui il server di autorizzazione invia il token di accesso. È possibile personalizzarlo in base al caso d'uso.
4. Selezionare Configura per salvare le modifiche.

python Flask

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci, selezionare Autenticazione
2. Nella pagina configurazioni della piattaforma , selezionare Aggiungi una piattaformae poi selezionare l'opzione Web.
3. Per gli URI di reindirizzamento immettere http://localhost:3000/getAToken. Questo URI di reindirizzamento è il percorso in cui il server di autorizzazione invia il token di accesso. È possibile personalizzarlo in base al caso d'uso.
4. Selezionare Configura per salvare le modifiche.

Aggiungere un segreto del client dell'app

Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede token:

1. Nella pagina registrazioni dell'app selezionare l'applicazione creata ( ad esempio segreto client dell'app Web) per aprire la relativa pagina Panoramica.
2. In Gestisci, selezionare Certificati e segreti &>Segreti client>Nuovo segreto client.
3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio segreto client dell'app Web).
4. In Scade, seleziona una durata per la quale il segreto è valido (in base alle regole di sicurezza dell'organizzazione) e quindi seleziona Aggiungi.
5. Registra il valore del segreto. Questo valore viene usato per la configurazione in un passaggio successivo. Il valore del segreto non verrà visualizzato di nuovo e non sarà recuperabile in alcun modo, dopo aver lasciato la sezione Certificati e segreti. Assicurarsi di registrarlo.

Quando si creano le credenziali per un'applicazione client riservata:

• Microsoft consiglia di usare un certificato anziché un segreto client prima di spostare l'applicazione in un ambiente di produzione. Per altre informazioni su come usare un certificato, vedere le istruzioni in credenziali del certificato di autenticazione delle applicazioni di Microsoft Identity Platform.

• A scopo di test, è possibile creare un certificato autofirmato e configurare le app per l'autenticazione. Tuttavia, nell'ambiente di produzione, è consigliabile acquistare un certificato firmato da un'autorità di certificazione nota, quindi utilizzare Azure Key Vault per gestire l'accesso e la durata dei certificati.

Concedere il consenso dell'amministratore

Dopo aver registrato l'applicazione, viene assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è un tenant esterno, gli utenti del cliente stessi non possono fornire il consenso a questa autorizzazione. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

1. Nella pagina registrazioni app, selezionare l'app che hai creato (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.

2. In Gestisciselezionare autorizzazioni API .

   1. Selezionare Concedi consenso amministratore per <nome del tenant>e quindi selezionare Sì.
   2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome del tenant> venga visualizzato in Stato per l'autorizzazione.

Creare un flusso utente

Seguire questa procedura per creare un flusso utente che un cliente può usare per accedere o iscriversi a un'applicazione.

1. Accedi al centro di amministrazione di Microsoft Entra come amministratore del flusso utente con ID esterno , oppure con un ruolo superiore.

2. Se si ha accesso a più tenant, usare l'icona Impostazioni nel menu in alto per passare al tenant esterno dal menu Directory + sottoscrizioni.

3. Sfoglia fino a Identità>Identità esterne>Flussi utente.

4. Seleziona + Nuovo flusso utente.

5. Nella pagina Crea :

   1. Inserire un Nome per il flusso utente, come ad esempio SignInSignUpSample.

   2. Nell'elenco provider di identità selezionare Account di posta elettronica. Questo provider di identità consente agli utenti di accedere o iscriversi usando il proprio indirizzo di posta elettronica.

      Nota

      I provider di identità aggiuntivi verranno elencati qui solo dopo aver configurato la federazione con essi. Ad esempio, se si configura la federazione con Google, Facebook, Apple o un provider di identità OIDC , sarà possibile selezionare tali provider di identità aggiuntivi qui.

   3. In account di posta elettronicaè possibile selezionare una delle due opzioni. Per questa esercitazione, seleziona Email con la password.

      • Messaggio di posta elettronica con password: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo di posta elettronica come nome di accesso e una password come primo fattore di autenticazione.
      • Codice di accesso unico via email: Consente ai nuovi utenti di registrarsi e accedere utilizzando un indirizzo email come nome di accesso e un codice di accesso unico via email come prima credenziale del fattore. Il passcode monouso della posta elettronica deve essere abilitato a livello di tenant (tutti i provider di identità>passcode monouso di posta elettronica) per rendere disponibile questa opzione a livello di flusso utente.

   4. In Attributi utentescegliere gli attributi da raccogliere dall'utente al momento dell'iscrizione. Selezionando Mostra altri, è possibile scegliere attributi e attestazioni per paese/area geografica, nome visualizzatoe codice postale. Selezionare OK. Gli utenti vengono richiesti solo gli attributi quando si registrano per la prima volta.

6. Selezionare Crea. Il nuovo flusso utente appare nell'elenco Flussi utente. Se necessario, aggiornare la pagina.

Per abilitare la reimpostazione della password self-service, seguire la procedura descritta nell'articolo Abilitare la reimpostazione della password self-service.

Associare l'applicazione Web al flusso utente

Per consentire agli utenti del cliente di visualizzare l'esperienza di iscrizione o di accesso quando usano l'app, è necessario associare l'app a un flusso utente. Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente.

1. Nel menu della barra laterale selezionare Identity.

2. Selezionare Identità Esterne, quindi Flussi Utente.

3. Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.

4. In Utilizza, selezionare Applicazioni.

5. Selezionare Aggiungi applicazione.

6. Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.

7. Scegliere Selezionare.

Dopo aver associato l'app a un flusso utente, è possibile testare il flusso utente simulando l'esperienza di iscrizione o di accesso di un utente con l'applicazione dall'interfaccia di amministrazione di Microsoft Entra. A tale scopo, usare i passaggi descritti in Testare il flusso utente di iscrizione e accesso.

Clonare o scaricare un'applicazione Web di esempio

Node

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip:

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

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

• In alternativa, scaricare il file di esempio .zip, quindi estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Installare le dipendenze del progetto

1. Aprire una finestra della console e passare alla directory che contiene l'app di esempio Node.js:

   cd 1-Authentication\5-sign-in-express\App
   

2. Eseguire i comandi seguenti per installare le dipendenze dell'app:

   npm install
   

ASP.NET Core

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

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

• Scarica il file .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Python Django

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Scarica il file .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Installare le dipendenze del progetto

1. Aprire una finestra della console e passare alla directory che contiene l'app Web di esempio Flask:

   cd django-web-app
   

2. Configurare l'ambiente virtuale:

   • Per Windows, eseguire i comandi seguenti:

   py -m venv .venv
   .venv\scripts\activate
   

   • Per macOS/Linux, eseguire i comandi seguenti:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Per installare le dipendenze dell'app, eseguire i comandi seguenti:

   python3 -m pip install -r requirements.txt
   

python Flask

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

• Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Scarica il file .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Installare le dipendenze del progetto

1. Aprire una finestra della console e passare alla directory che contiene l'app Web di esempio Flask:

   cd flask-web-app
   

2. Configurare l'ambiente virtuale:

   • Per Windows, eseguire i comandi seguenti:

   py -m venv .venv
   .venv\scripts\activate
   

   • Per macOS/Linux, eseguire i comandi seguenti:

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Per installare le dipendenze dell'app, eseguire i comandi seguenti:

   python3 -m pip install -r requirements.txt
   

Configurare l'app Web di esempio

Per permettere agli utenti di accedere utilizzando l'app di esempio, è necessario aggiornarla con i dettagli della tua app e del tenant:

Nodo

1. Nell'editor di codice, apri il file di\authConfig.js app.

2. Trova il segnaposto:

   • Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app 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 hai il nome del "tenant", scopri come leggere i dettagli del "tenant".
   • Enter_the_Client_Secret_Here e sostituirlo con il codice segreto dell'app che hai copiato in precedenza.

ASP.NET Core

1. Passare alla directory principale che contiene l'app di esempio ASP.NET Core.

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Aprire il file appsettings.json.

3. In Autorità, trovare il Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio del tuo locatario. Ad esempio, se il dominio primario del tenant è caseyjensen@onmicrosoft.com, il valore da immettere è casyjensen.

4. Trovare il valore Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (clientId) dell'app registrata nell'interfaccia di amministrazione di Microsoft Entra.

5. Sostituire Enter_the_Client_Secret_Here con il valore del segreto client configurato in Aggiungere il segreto client dell'app.

Python Django

1. Aprire i file di progetto in Visual Studio Code o nell'editor in uso.

2. Creare un file .env nella cartella radice del progetto usando il file .env.sample come guida.

3. Nel file .env di , specifica i seguenti valori delle variabili di ambiente:

   1. CLIENT_ID che è l'ID applicazione (client) dell'app registrata in precedenza.
   2. CLIENT_SECRET che corrisponde al valore segreto dell'app copiato in precedenza.
   3. AUTHORITY che è l'URL che identifica un'autorità del token. Deve essere del formato https://{sottodominio}.ciamlogin.com/{sottodominio}.onmicrosoft.com. Sostituire il sottodominio con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il tuo sottodominio del tenant, impara a leggere i dettagli del tenant.
   4. REDIRECT_URI, che dovrebbe essere simile all'URI di reindirizzamento registrato in precedenza, deve corrispondere alla configurazione.

python Flask

1. Aprire i file di progetto in Visual Studio Code o nell'editor in uso.

2. Creare un file di con estensione env nella cartella radice del progetto usando file .env.sample come guida.

3. Nel file .env , specificare le seguenti variabili di ambiente:

   • CLIENT_ID che è l'ID applicazione (client) dell'app registrata in precedenza.
   • CLIENT_SECRET che è il valore segreto dell'app che hai copiato in precedenza.
   • AUTHORITY che è l'URL che identifica un'autorità dei token. Deve essere del formato https://{sottodominio}.ciamlogin.com/{sottodominio}.onmicrosoft.com. Sostituire il sottodominio con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il sottodominio del tuo tenant, scopri come leggere i dettagli del tuo tenant.

4. Verificare che l'URI di reindirizzamento sia configurato correttamente. L'URI di reindirizzamento registrato in precedenza deve corrispondere alla configurazione. Questo esempio imposta per impostazione predefinita il percorso dell'URI di reindirizzamento su /getAToken. Questa configurazione si trova nel file app_config.py come REDIRECT_PATH.

Eseguire e testare un'app Web di esempio

Node

È ora possibile testare l'app Web di esempio Node.js. È necessario avviare il server Node.js e accedervi tramite il browser in http://localhost:3000.

1. Nel terminale eseguire il comando seguente:

   npm start 
   

2. Aprire il browser, quindi passare a http://localhost:3000. La pagina dovrebbe essere simile alla schermata seguente:

   

3. Al termine del caricamento della pagina, selezionare Accedi quando richiesto.

4. 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.

5. Se si sceglie l'opzione di iscrizione, dopo aver compilato il messaggio di posta elettronica, il passcode monouso, la nuova password e altri dettagli dell'account, si completa l'intero flusso di iscrizione. Viene visualizzata una pagina simile allo screenshot seguente. Se si sceglie l'opzione di accesso, viene visualizzata una pagina simile.

   

6. Selezionare Disconnettersi per disconnettere l'utente dall'app Web oppure selezionare Visualizzare le attestazioni del token ID per visualizzare le attestazioni del token ID restituite da Microsoft Entra.

Come funziona

Quando gli utenti selezionano il collegamento Accedi, l'app avvia una richiesta di autenticazione e reindirizza gli utenti all'ID esterno di Microsoft Entra. Nella pagina di accesso o iscrizione visualizzata, dopo che un utente ha eseguito l'accesso o creato un account, Microsoft Entra External ID restituisce un token ID all'app. L'app convalida il token ID, legge le attestazioni e restituisce una pagina sicura agli utenti.

Quando gli utenti selezionano il collegamento Disconnetti, l'app cancella la sessione, quindi reindirizza l'utente all'endpoint di disconnessione dell'ID esterno di Microsoft Entra per notificare che l'utente si è disconnesso.

Se si vuole creare un'app simile all'esempio eseguito, completare i passaggi descritti in Accedere agli utenti nel proprio articolo Node.js'applicazione Web.

ASP.NET Core

1. Dalla shell o dalla riga di comando eseguire i comandi seguenti:

   dotnet run
   

2. Aprire il Web browser e passare a https://localhost:7274.

3. Accedere con un account registrato per il tenant esterno.

4. Dopo aver eseguito l'accesso, il nome visualizzato viene mostrato accanto al pulsante Disconnetti, come illustrato nello screenshot seguente.

   

5. Per disconnettersi dall'applicazione, selezionare il pulsante Disconnetti.

Python Django

Eseguire l'app per visualizzare l'esperienza di accesso in corso.

Nota

Questo esempio usa la libreria di terze parti di identità Python . La libreria non è ufficialmente gestita da Microsoft, ma è consigliata per l'uso. Questa libreria semplifica l'aggiunta dell'autenticazione all'app Web perché astrae molti dettagli di PYTHON MSAL.

1. Nel terminale eseguire il comando seguente:

   python manage.py runserver localhost:5000                                             
   

   È possibile usare un numero di porta preferito.

2. Aprire il browser, quindi passare a http://localhost:5000. Verrà visualizzata una pagina simile allo screenshot seguente:

   

3. Al termine del caricamento della pagina, selezionare Accedi. Ti viene richiesto di accedere.

4. 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.

5. Se si sceglie l'opzione di iscrizione, si passa attraverso il flusso di iscrizione. Compilare la posta elettronica, il passcode monouso, la nuova password e altri dettagli dell'account per completare l'intero flusso di iscrizione.

6. Dopo l'accesso o l'iscrizione, si viene reindirizzati all'app Web. Viene visualizzata una pagina simile alla schermata seguente:

   

7. Selezionare Logout per disconnettere l'utente dall'app Web oppure selezionare Chiamare un'API downstream per chiamare un endpoint di Microsoft Graph.

Come funziona

Quando gli utenti selezionano il collegamento Accedi, l'app avvia una richiesta di autenticazione e reindirizza gli utenti all'ID esterno di Microsoft Entra. Un utente accede o effettua l'iscrizione sulla pagina visualizzata. Dopo aver specificato le credenziali necessarie e aver fornito il consenso agli ambiti necessari, Microsoft Entra External ID reindirizza l'utente all'app Web con un codice di autorizzazione. L'app Web usa quindi questo codice di autorizzazione per acquisire un token da Microsoft Entra External ID.

Quando gli utenti selezionano il collegamento Logout, l'app cancella la sua sessione e reindirizza l'utente all'endpoint di disconnessione di Microsoft Entra External ID per notificare che l'utente si è disconnesso. L'utente viene quindi reindirizzato all'app Web.

python Flask

Eseguire l'app per visualizzare l'esperienza di accesso in corso.

Nota

Questo esempio utilizza la libreria di identità di terze parti Python . La libreria non è ufficialmente gestita da Microsoft, ma è consigliata per l'uso. Questa libreria semplifica l'aggiunta dell'autenticazione all'app Web perché astrae molti dettagli di PYTHON MSAL.

1. Nel terminale eseguire il comando seguente:

   python3 -m flask run --debug --host=localhost --port=3000
   

   È possibile usare la porta preferita. Questa dovrebbe essere simile alla porta dell'URI di reindirizzamento che hai registrato in precedenza.

2. Aprire il browser, quindi passare a http://localhost:3000. La pagina dovrebbe essere simile alla schermata seguente:

   

3. Al termine del caricamento della pagina, selezionare il link Accedi. Viene richiesto di eseguire l'accesso.

4. 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.

5. Se si sceglie l'opzione di iscrizione, si passerà attraverso la procedura di iscrizione. Compilare il messaggio di posta elettronica, il passcode monouso, la nuova password e altri dettagli dell'account per completare l'intero flusso di iscrizione.

6. Dopo l'accesso o l'iscrizione, si viene reindirizzati all'app Web. Verrà visualizzata una pagina simile alla schermata seguente:

   

7. Selezionare Logout per disconnettere l'utente dall'applicazione web oppure selezionare Chiamare un'API a valle per effettuare una chiamata a un endpoint di Microsoft Graph.

Come funziona

Quando gli utenti selezionano il collegamento Accedi, l'app avvia una richiesta di autenticazione e reindirizza gli utenti all'ID esterno di Microsoft Entra. L'utente effettua l'accesso o si registra sulla pagina visualizzata. Dopo aver specificato le credenziali necessarie e aver fornito il consenso agli ambiti necessari, Microsoft Entra External ID reindirizza l'utente all'app Web con un codice di autorizzazione. L'app Web usa quindi questo codice di autorizzazione per acquisire un token da Microsoft Entra External ID.

Quando gli utenti selezionano il collegamento Logout, l'app cancella la sessione e reindirizza l'utente all'endpoint di disconnessione dell'ID esterno di Microsoft Entra per notificare che l'utente si è disconnesso. Viene quindi riportato all'app web.

Contenuto correlato

Node

• Autenticare gli utenti nella tua applicazione web Node.js
• Avvio rapido - Effettuare l'accesso degli utenti e chiamare un'API web nell'esempio di app web Node.js
• Avvio rapido di : Modificare il profilo in un'app Web di esempio Node.js

ASP.NET Core

• Utilizza la nostra serie di tutorial suddivisi in più parti per creare questa applicazione Web ASP.NET da zero
• Abilitare la reimpostazione della password
• Personalizza il marchio predefinito

Python Django

• Effettuare l'accesso per gli utenti con un'applicazione Web Flask di esempio
• Abilitare la reimpostazione della password
• Personalizzare il branding predefinito

python Flask

• Abilitare la reimpostazione della password
• Personalizzare il branding predefinito