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

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: http://localhost:3000/auth/redirect
  • URL di disconnessione front-channel: https://localhost:5001/signout-callback-oidc
• Node.js

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: https://localhost:5001/signin-oidc
  • URL di disconnessione front-channel: https://localhost:5001/signout-callback-oidc
• Requisito minimo di .NET 8.0 SDK

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: http://localhost:5000/getAToken
• Python 3 +

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.

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.

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.

• 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
  

• 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
  

• 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/

Nella cartella ms-identity-node, aprire il file App/.env, e quindi sostituire i segnaposto seguenti:

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

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",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "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.

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.entra-id 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 sull'ID applicazione (client) per l'applicazione registrata, disponibile nella pagina di riepilogo.
   • 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 riepilogo 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 .gitignore fornito impedisce che il file .env venga registrato.

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.

1. Nella directory del progetto usare il terminale per immettere i comandi seguenti:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   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.

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.

• 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 &.

• 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

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

• Registrare una nuova app nel centro di amministrazione di Microsoft Entra con la seguente configurazione e annotare gli identificatori dalla pagina Panoramica dell'app. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: http://localhost:3000/auth/redirect
• Aggiungere la propria applicazione al flusso utente
• Node.js.

• Registrare una nuova app nel centro di amministrazione di Microsoft Entra con la seguente configurazione e annotare gli identificatori dalla pagina Panoramica dell'app. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: https://localhost:7274/signin-oidc
  • URL di disconnessione front-channel: https://localhost:7274/signout-callback-oidc
• Aggiungere la propria applicazione al flusso utente
• Versione minima di .NET 8.0 SDK.

• Registrare una nuova app nel centro di amministrazione di Microsoft Entra con la seguente configurazione e annotare gli identificatori dalla pagina Panoramica dell'app. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: http://localhost:5000/getAToken
• Aggiungere la propria applicazione al flusso utente
• Python 3+.

• Registrare una nuova app nel centro di amministrazione di Microsoft Entra con la seguente configurazione e annotare gli identificatori dalla pagina Panoramica dell'app. Per delle altre informazioni, vedere la sezione Registrazione di un'applicazione.
  • Nome: identity-client-web-app
  • Tipi di account supportati: Account solo in questa directory organizzativa (tenant singolo)
  • Piattaforma di configurazione: Web
  • URI di reindirizzamento: http://localhost:3000/getAToken
• Aggiungere la propria applicazione al flusso utente
• Python 3+

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
   

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.

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
   

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
   

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.

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 è [email protected], 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.

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.external-id 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.

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.external-id come guida.

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

   • CLIENT_ID che è l'ID applicazione (client) dell'app registrata in precedenza.
   • CLIENT_SECRET che corrisponde al valore segreto dell'app copiato in precedenza.
   • 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. 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.

È 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 vuoi creare un'app simile all'esempio che hai eseguito, completa i passaggi nell'articolo Accedere agli utenti nella propria applicazione web Node.js.

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.

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

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.

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

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

• 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
• Guida rapida: Modifica del profilo in un'app web di esempio Node.js

• 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

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

• Abilitare la reimpostazione della password
• Personalizza il marchio predefinito