Accesso degli utenti in un'applicazione Web Python Flask di esempio
In questo articolo viene esaminata un'app Web Python Flask protetta da Microsoft Entra per ID esterno. Questo esempio illustra l'esperienza di accesso per i clienti che eseguono l'autenticazione in un'app Web Python Flask. L'app Web di esempio usa Microsoft Authentication Library per Python (MSAL Python) per gestire l'autenticazione utente.
Prerequisiti
- 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 per ID esterno per impostare un tenant esterno direttamente in Visual Studio Code.
- Creare un nuovo tenant esterno nell'interfaccia di amministrazione di Microsoft Entra.
Registrare l'app Web
Per consentire all'applicazione di effettuare l'accesso degli utenti con Microsoft Entra, Microsoft Entra per ID esterno deve “supportare” l'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.
La procedura seguente spiega come registrare l'app nell'Interfaccia di amministrazione di Microsoft Entra:
Accedere all’Interfaccia di amministrazione di Microsoft Entra almeno come sviluppatore di applicazioni.
Se si ha accesso a più tenant, usare l'icona Impostazioni
nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.
Passare a Identità>Applicazioni>Registrazioni app.
Seleziona + Nuova registrazione.
Nella pagina Registra un'applicazione che viene visualizzata:
- Immettere un nome significativo per l’applicazione da mostrare agli utenti dell'app, ad esempio ciam-client-app.
- In Tipi di account supportati selezionare Account solo in questa directory organizzativa.
Selezionare Registra.
Al termine della registrazione, viene visualizzato il riquadro Panoramica dell'applicazione. Registrare il valore di ID applicazione (client) che verrà usato nel codice sorgente dell'applicazione.
Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:
- In Gestisci, selezionare Autenticazione
- Nella pagina Configurazioni della piattaforma, selezionare Aggiungere una piattaforma, quindi selezionare l'opzione Web.
- In URI di reindirizzamento immettere
http://localhost:3000/getAToken
. L'URI di reindirizzamento specificato è il percorso in cui il server di autorizzazione invia il token di accesso. È possibile personalizzarlo in base al caso d'uso specifico. - Selezionare Configurare per salvare le modifiche.
Aggiungere un segreto client dell'app
Creare un segreto client per l'applicazione registrata. L'applicazione usa il segreto client per dimostrare la propria identità quando richiede i token.
- Nella pagina Registrazioni app selezionare l'applicazione creata (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.
- In Gestisci, selezionare Certificati e segreti.
- Selezionare Nuovo segreto client.
- Nella casella Descrizione immettere una descrizione per il segreto client, (ad esempio, segreto client dell'app ciam).
- In Scadenzaselezionare la durata della validità del segreto (in base alle regole di sicurezza dell'organizzazione), quindi selezionare Aggiungi.
- Registrare il Valore del segreto. Questo valore verrà usato per la configurazione in un passaggio successivo. Il valore del segreto non verrà visualizzato di nuovo e non sarà recuperabile in alcun modo una volta usciti da Certificati e segreti. Accertarsi di registrarlo.
Concedere il consenso 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 deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:
Nella pagina Registrazioni app selezionare l'applicazione creata (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.
In Gestisci selezionare Autorizzazioni API.
- Selezionare Concedi consenso amministratore per <nome del tenant>, quindi selezionare Sì.
- 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 possa usare per accedere o registrarsi a un'applicazione.
Accedere all'Interfaccia di amministrazione di Microsoft Entra almeno come amministratore del flusso utente con ID esterno.
Se si ha accesso a più tenant, usare l'icona Impostazioni
nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.
Passare a Identità>Identità esterne>Flussi utente.
Selezionare + Nuovo flusso utente.
Nella pagina Crea:
Immettere un nome per il flusso utente, ad esempio SignInSignUpSample.
Nell'elenco Provider di identità selezionare Account di posta elettronica. Questo provider di identità consente agli utenti di accedere o registrarsi usando il proprio indirizzo di posta elettronica.
In Account di posta elettronicaè possibile selezionare una delle due opzioni. Per questa esercitazione selezionare Indirizzo di posta elettronica con password.
- Indirizzo 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 credenziale di primo fattore.
- Passcode monouso tramite posta elettronica: consente ai nuovi utenti di registrarsi e accedere usando un indirizzo di posta elettronica come nome di accesso e un passcode monouso ricevuto tramite messaggio di posta elettronica come credenziale di primo fattore. Il passcode monouso tramite messaggio di posta elettronica deve essere abilitato a livello di tenant (Tutti i provider di identità>Passcode monouso tramite posta elettronica) affinché questa opzione sia disponibile a livello di flusso utente.
In Attributi utentescegliere gli attributi da raccogliere dall'utente al momento della registrazione. Se si seleziona Mostra altro, è possibile scegliere attributi e attestazioni per paese/area geografica, nome visualizzato e codice postale. Seleziona OK. (Agli utenti vengono richiesti gli attributi solo quando si registrano per la prima volta.)
Seleziona Crea. Il nuovo flusso utente viene visualizzato 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. Sebbene sia possibile associare molte applicazioni al flusso utente, è possibile associare un solo flusso utente a una singola applicazione.
Nel menu della barra laterale selezionare Identità.
Selezionare Identità esterne, quindi Flussi utente.
Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.
In Usa selezionare Applicazioni.
Seleziona Aggiungi applicazione.
Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e selezionarla.
Scegliere Seleziona.
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 la procedura descritta in Testare il flusso utente di iscrizione e di accesso.
Clonare o scaricare un'applicazione Web di esempio
Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file ZIP.
Per clonare l'esempio, aprire un prompt dei comandi, 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
Scaricare il file .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.
Installare le dipendenze del progetto
Aprire una finestra della console e passare alla directory che contiene l'app Web Flask di esempio:
cd flask-web-app
Configurare l'ambiente virtuale
py -m venv .venv .venv\scripts\activate
Eseguire i comandi seguenti per installare le dipendenze dell'app:
python3 -m pip install -r requirements.txt
Configurare l'app Web di esempio
Aprire i file di progetto in Visual Studio Code o nell'editor in uso.
Creare un file ENV nella cartella radice del progetto usando il file .env.sample come guida.
Nel file ENV specificare le variabili di ambiente seguenti:
-
CLIENT_ID
, ovvero l'ID applicazione (client) dell'app registrata precedentemente. -
CLIENT_SECRET
, ovvero il valore del segreto dell'app copiato in precedenza. -
AUTHORITY
, ovvero l'URL che identifica un'autorità di token. Deve avere il formato https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Sostituire subdomain con il sottodominio della directory (tenant). Ad esempio, se il dominio primario del tenant ècontoso.onmicrosoft.com
, usarecontoso
. Se il sottodominio del tenant non è disponibile, vedere come leggere i dettagli del tenant.
-
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 opzione viene configurata nel file app_config.py come REDIRECT_PATH.
Eseguire e testare un'app Web di esempio
Eseguire l'app per verificare l'esperienza di accesso.
Nota
Questo esempio usa la libreria di terze parti di identità Python. La libreria non è ufficialmente gestita da Microsoft, ma ne è consigliabile l'uso. Questa libreria semplifica l'aggiunta dell'autenticazione all'app Web perché astrae molti dettagli di MSAL per Python.
Nel terminale eseguire il comando seguente:
python3 -m flask run --debug --host=localhost --port=3000
È possibile usare la porta preferita. Dovrebbe essere simile alla porta dell'URI di reindirizzamento registrato in precedenza.
Aprire il browser, quindi passare a
http://localhost:3000
. Verrà visualizzata una pagina simile a quella raffigurata nello screenshot seguente:Al termine del caricamento della pagina, selezionare il collegamento Accedi. Viene richiesto di accedere.
Nella pagina di accesso, in Indirizzo e-mailimmettere l'indirizzo, selezionare Avanti, immettere la password in Password, quindi selezionare Accedi. Se non si dispone di un account, selezionare il link Nessun account? Creane uno per avviare il flusso di iscrizione.
Se si sceglie l'opzione di iscrizione, si passerà attraverso il flusso di iscrizione. Specificare l'indirizzo e-mail, il passcode monouso, la nuova password e altri dettagli dell'account per completare l'intero flusso di iscrizione.
Dopo l'accesso o la registrazione, si viene reindirizzati all'app Web. Verrà visualizzata una pagina simile allo screenshot seguente:
Selezionare Disconnetti per disconnettere l'utente dall'app Web oppure selezionare Chiama un'API downstream per effettuare una chiamata a un endpoint di Microsoft Graph.
Funzionamento
Quando gli utenti selezionano il link Accedi, l'app avvia una richiesta di autenticazione e reindirizza gli utenti a Microsoft Entra per ID esterno. Un utente accede o esegue quindi la registrazione alla pagina visualizzata. Dopo aver specificato le credenziali necessarie e aver fornito il consenso agli ambiti richiesti, Microsoft Entra per ID esterno 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 per ID esterno.
Quando gli utenti selezionano il link Disconnetti, l'app cancella la sessione, reindirizza l'utente all'endpoint di disconnessione di Microsoft Entra per ID esterno per segnalare che l'utente ha eseguito la disconnessione. L'utente viene quindi reindirizzato all'app Web.