Configurare l'autenticazione in un'app Web Python di esempio usando Azure AD B2C

  • Articolo

Questo articolo usa un'applicazione Web Python di esempio per illustrare come aggiungere l'autenticazione di Azure Active Directory B2C (Azure AD B2C) alle applicazioni Web.

Panoramica

OpenID Connessione (OIDC) è un protocollo di autenticazione basato su OAuth 2.0. È possibile usare OIDC per consentire agli utenti di accedere in modo sicuro a un'applicazione. Questo esempio di app Web usa il pacchetto di identità per Python per semplificare l'aggiunta del supporto di autenticazione e autorizzazione alle app Web Python.

Il flusso di accesso prevede i passaggi seguenti:

  1. Gli utenti passano all'app Web e seleziona Accedi.
  2. L'app avvia una richiesta di autenticazione e reindirizza gli utenti ad Azure AD B2C.
  3. Gli utenti si registrano o accedono, reimpostano la password o accedono con un account di social networking.
  4. Dopo l'accesso degli utenti, Azure AD B2C restituisce un token ID all'app.
  5. L'app scambia il codice di autorizzazione con un token ID, convalida il token ID, legge le attestazioni e quindi restituisce una pagina sicura agli utenti.

Prerequisiti

Passaggio 1: Configurare il flusso utente

Quando gli utenti tentano di accedere all'app, l'app avvia una richiesta di autenticazione all'endpoint di autorizzazione tramite un flusso utente. Il flusso utente definisce e controlla l'esperienza utente. Dopo aver completato il flusso utente, Azure AD B2C genera un token e quindi reindirizza gli utenti all'applicazione.

Se non è già stato fatto, creare un flusso utente o un criterio personalizzato. Ripetere i passaggi per creare tre flussi utente separati come indicato di seguito:

  • Flusso utente di accesso e iscrizione combinato, ad esempio susi. Questo flusso utente supporta anche l'esperienza password dimenticata.
  • Flusso utente di modifica del profilo, ad esempio edit_profile.
  • Flusso utente di reimpostazione della password, ad esempio reset_password.

Azure AD B2C antepone B2C_1_ il nome del flusso utente. Ad esempio, susi diventa B2C_1_susi.

Passaggio 2: Registrare un'applicazione Web

Per consentire all'applicazione di accedere con Azure AD B2C, registrare l'app nella directory di Azure AD B2C. La registrazione dell'app stabilisce una relazione di trust tra l'app e Azure AD B2C.

Durante la registrazione dell'app, si specificherà l'URI di reindirizzamento. L'URI di reindirizzamento è l'endpoint a cui gli utenti vengono reindirizzati da Azure AD B2C dopo l'autenticazione con Azure AD B2C. Il processo di registrazione dell'app genera un ID applicazione, noto anche come ID client, che identifica in modo univoco l'app. Dopo la registrazione dell'app, Azure AD B2C usa sia l'ID applicazione che l'URI di reindirizzamento per creare richieste di autenticazione.

Passaggio 2.1: Registrare l'app

Per creare la registrazione dell'app Web, seguire questa procedura:

  1. Accedere al portale di Azure.

  2. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant di Azure AD B2C dal menu Directory e sottoscrizioni.

  3. Nel portale di Azure cercare e selezionare Azure AD B2C.

  4. Selezionare Registrazioni app e quindi Nuova registrazione.

  5. In Nome immettere un nome per l'applicazione, ad esempio webapp1.

  6. Sotto Tipi di account supportati, seleziona Account in qualsiasi provider di identità o directory dell'organizzazione (per autenticare gli utenti con flussi utente).

  7. In URI di reindirizzamento selezionare Web e quindi immettere http://localhost:5000/getAToken nella casella URL.

  8. In Autorizzazioni selezionare la casella di controllo Concedi consenso amministratore a openid e autorizzazioni di accesso offline.

  9. Selezionare Registra.

  10. Selezionare Panoramica.

  11. Registrare l'ID applicazione (client) per usarlo in un secondo momento, quando si configura l'applicazione Web.

    Screenshot of the web app Overview page for recording your web app I D.

Passaggio 2.2: Creare un segreto client dell'app Web

Creare un segreto client per l'applicazione Web registrata. L'applicazione Web usa il segreto client per dimostrare la propria identità al momento della richiesta dei token.

  1. In Gestisci, selezionare Certificati e segreti.
  2. Selezionare Nuovo segreto client.
  3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio clientsecret1.
  4. In Scadenzaselezionare una durata per la quale il segreto è valido, quindi selezionare Aggiungi.
  5. Registrare il Valore del segreto. Questo valore verrà usato per la configurazione in un passaggio successivo.

Passaggio 3: Ottenere l'esempio di app Web

Scaricare il file ZIP o clonare l'applicazione Web di esempio da GitHub.

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

Estrarre il file di esempio in una cartella in cui la lunghezza totale del percorso è di 260 o meno caratteri.

Passaggio 4: Configurare l'app Web di esempio

Nella directory radice del progetto seguire questa procedura:

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

    FLASK_DEBUG=True
B2C_TENANT_NAME=<tenant name>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
EDITPROFILE_USER_FLOW=B2C_1_profile_editing
RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    Chiave valore
    B2C_TENANT_NAME La prima parte del nome del tenant di Azure AD B2C, ad esempio contoso.
    CLIENT_ID ID applicazione API Web del passaggio 2.1.
    CLIENT_SECRET Valore del segreto client creato nel passaggio 2.2.
    *_USER_FLOW I flussi utente creati nel passaggio 1.

    Le variabili di ambiente a cui si fa riferimento in app_config.py e vengono mantenute in un file con estensione env separato per mantenerle fuori dal controllo del codice sorgente. Il file con estensione gitignore fornito impedisce l'archiviazione del file con estensione env.

Passaggio 5: Eseguire l'app Web di esempio

  1. Nella console o nel terminale passare alla directory che contiene l'esempio. Ad esempio:

    cd ms-identity-python-webapp

  2. Installare i pacchetti necessari da PyPi ed eseguire l'app Web nel computer locale eseguendo i comandi seguenti:

    python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

    La finestra della console visualizza il numero di porta dell'applicazione in esecuzione in locale:

     * Debug mode: on
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Running on `http://localhost:5000/` (Press CTRL+C to quit)

  3. Per visualizzare l'applicazione Web in esecuzione nel computer locale, passare a http://localhost:5000.

  4. Selezionare Accedi.

    Screenshot showing the sign-in flow.

  5. Completare il processo di iscrizione o accesso.

  6. Dopo l'autenticazione, verrà visualizzato il nome visualizzato, come illustrato di seguito:

    Screenshot showing the web app token's display name claim.

Passaggio 6: Chiamare un'API Web

Per consentire all'app di accedere con Azure AD B2C e chiamare un'API Web, è necessario registrare due applicazioni nella directory di Azure AD B2C.

  • Registrazione dell'applicazione Web (Python) già creata nel passaggio 2. Questa registrazione dell'app consente all'app di accedere con Azure AD B2C. Il processo di registrazione dell'app genera un ID applicazione, noto anche come ID client, che identifica in modo univoco l'app. Ad esempio, ID app: 1.

  • La registrazione dell'API Web consente all'app di chiamare un'API Web protetta. La registrazione espone le autorizzazioni dell'API Web (ambiti). Il processo di registrazione dell'app genera un ID applicazione che identifica in modo univoco l'API Web (ad esempio, ID app: 2). Concedere all'app (ID app: 1) le autorizzazioni per gli ambiti dell'API Web (ID app: 2).

Le registrazioni delle app e l'architettura dell'applicazione sono descritte nei diagrammi seguenti:

Diagram describing a web app with web API, registrations, and tokens.

Al termine dell'autenticazione, gli utenti interagiscono con l'app, che richiama un'API Web protetta. L'API Web usa l'autenticazione del token di connessione. Il token di connessione è il token di accesso ottenuto dall'app da Azure AD B2C. L'app passa il token nell'intestazione di autorizzazione della richiesta HTTPS.

Authorization: Bearer <access token>

Se l'ambito del token di accesso non corrisponde agli ambiti dell'API Web, la libreria di autenticazione ottiene un nuovo token di accesso con gli ambiti corretti.

Passaggio 6.1: Registrare l'app per le API Web

Per creare la registrazione dell'app per le API Web (ID app: 2), seguire questa procedura:

  1. Accedere al portale di Azure.

  2. Assicurarsi di usare la directory che contiene il tenant di Azure AD B2C. Selezionare l'icona Directory e sottoscrizioni nella barra degli strumenti del portale.

  3. Nelle impostazioni del portale | Pagina Directory e sottoscrizioni , trovare la directory di Azure AD B2C nell'elenco Nome directory e quindi selezionare Cambia.

  4. Nel portale di Azure cercare e selezionare Azure AD B2C.

  5. Selezionare Registrazioni app e quindi Nuova registrazione.

  6. In Nome immettere un nome per l'applicazione, ad esempio my-api1. Lasciare i valori predefiniti per URI di reindirizzamento e Tipi di account supportati.

  7. Selezionare Registra.

  8. Al termine della registrazione dell'app, selezionare Panoramica.

  9. Registrare il valore ID applicazione (client) per usarlo in un secondo momento quando si configura l'applicazione Web.

    Screenshot that demonstrates how to get a web A P I application I D.

Passaggio 6.2: Configurare gli ambiti

  1. Selezionare l'applicazione my-api1 creata (ID app: 2) per aprire la relativa pagina Panoramica.

  2. In Gestisci selezionare Esponi un'API.

  3. Accanto a URI ID applicazione selezionare il collegamento Imposta. Sostituire il valore predefinito (GUID) con un nome univoco (ad esempio, tasks-api) e quindi selezionare Salva.

    Quando l'applicazione Web richiede un token di accesso per l'API Web, deve aggiungere questo URI come prefisso per ogni ambito definito per l'API.

  4. In Ambiti definiti da questa API selezionare Aggiungi un ambito.

  5. Per creare un ambito che definisce l'accesso in lettura all'API:

    1. In Nome ambito immettere tasks.read.
    2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in lettura all'API attività.
    3. Per Amministrazione descrizione del consenso, immettere Consente l'accesso in lettura all'API delle attività.

  6. Seleziona Aggiungi ambito.

  7. Selezionare Aggiungi un ambito e quindi aggiungere un ambito che definisce l'accesso in scrittura all'API:

    1. In Nome ambito immettere tasks.write.
    2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in scrittura all'API attività.
    3. Per Amministrazione descrizione del consenso, immettere Consenti l'accesso in scrittura all'API delle attività.

  8. Seleziona Aggiungi ambito.

Passaggio 6.3: Concedere le autorizzazioni dell'app Web

Per concedere all'app (ID app: 1) le autorizzazioni, seguire questa procedura:

  1. Selezionare Registrazioni app e quindi selezionare l'app creata (ID app: 1).

  2. In Gestisci selezionare Autorizzazioni API.

  3. In Autorizzazioni configurate selezionare Aggiungi un'autorizzazione.

  4. Selezionare la scheda Le mie API.

  5. Selezionare l'API (ID app: 2) a cui concedere l'accesso all'applicazione Web. Ad esempio, immettere my-api1.

  6. In Autorizzazione espandere le attività e quindi selezionare gli ambiti definiti in precedenza, ad esempio tasks.read e tasks.write.

  7. Selezionare Aggiungi autorizzazioni.

  8. Selezionare Concedi consenso amministratore per <il nome> del tenant.

  9. Selezionare Sì.

  10. Selezionare Aggiorna e quindi verificare che Concesso per ... sia visualizzato in Stato per entrambi gli ambiti.

  11. Nell'elenco Autorizzazioni configurate selezionare l'ambito e quindi copiare il nome completo dell'ambito.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Passaggio 6.4: Configurare l'API Web

Questo esempio acquisisce un token di accesso con gli ambiti pertinenti, che l'app Web può usare per un'API Web. Questo esempio stesso non funge da API Web. È invece necessario usare un'API Web esistente o crearne una nuova. Per un'esercitazione sulla creazione di un'API Web nel tenant B2C, vedere Abilitare l'autenticazione nell'API Web usando Azure AD B2C.

Passaggio 6.5: Configurare l'app di esempio con l'API Web

Aprire il file app_config.py . Questo file contiene informazioni sul provider di identità di Azure AD B2C. Aggiornare le proprietà seguenti delle impostazioni dell'app:

Chiave valore
ENDPOINT URI dell'API Web, ad esempio https://localhost:6000/hello.
SCOPE Ambiti dell'API Web creati, ad esempio ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"].

Passaggio 6.6: Eseguire l'app di esempio

  1. Nella console o nel terminale passare alla directory che contiene l'esempio.

  2. Se l'app non è ancora in esecuzione, riavviarla usando il comando del passaggio 5.

  3. Selezionare Chiama un'API downstream.

    Screenshot showing how to call a web API.

Passaggio 7: Distribuire l'applicazione

In un'applicazione di produzione, l'URI di reindirizzamento della registrazione dell'app è in genere un endpoint accessibile pubblicamente in cui l'app è in esecuzione, ad esempio https://contoso.com/getAToken.

È possibile aggiungere e modificare gli URI di reindirizzamento nelle applicazioni registrate in qualsiasi momento. Agli URL di reindirizzamento si applicano le restrizioni seguenti:

  • L'URL di reindirizzamento deve iniziare con lo schema https.
  • L'URL di reindirizzamento fa distinzione tra maiuscole e minuscole. Le maiuscole e le minuscole devono corrispondere a quelle nel percorso URL dell'applicazione in esecuzione.

Passaggi successivi