Condividi tramite

Preparare un'app Web Python Flask per l'autenticazione

  • Articolo

Questa esercitazione è la parte 2 di una serie che illustra la creazione di un'app Web Python Flask e l'aggiunta del supporto per l'accesso tramite Microsoft Identity Platform. Nella parte 1 di questa serie è stata registrata e configurata l'applicazione nel tenant microsoft Entra ID.

In questa esercitazione:

  • Creare un nuovo progetto di app Web Python Flask
  • Installare le dipendenze dell'app
  • Aggiungere i componenti dell'interfaccia utente dell'applicazione
  • Configurare l'app Web Flask per l'uso dell'ID Microsoft Entra per l'autenticazione

Prerequisiti

Creare un nuovo progetto di app Web Python

Per completare il resto dell'esercitazione, è necessario creare un progetto di app Web Python Flask. Se si preferisce usare un esempio di codice completato per l'apprendimento, scaricare l'esempio di app Web Python Flask da GitHub.

Per compilare l'app Web Python Flask da zero, seguire questa procedura:

  1. Creare una cartella per ospitare l'applicazione e denominarla flask-web-app.
  2. Passare alla directory del progetto e creare tre file denominati app.py, app.config.py e requirements.txt.
  3. Creare un file con estensione env nella cartella radice del progetto.
  4. Creare una cartella denominata templates nella directory radice del progetto. Flask cerca modelli di rendering in questa sottodirectory.

Dopo aver creato i file, il file e la directory del progetto devono essere simili alla struttura seguente:

python-webapp/
├── templates/
│     ├── display.html
│     ├── index.html
│     ├── login.html
├── .env.sample
├── app.py
├── app.config.py
│── requirements.txt

Installare le dipendenze dell'app

L'applicazione compilata usa il identity pacchetto, un wrapper intorno a Microsoft Authentication Library (MSAL) per Python. È anche possibile installare Flask, Flask Session, richieste e tutte le altre dipendenze richieste dall'app. Aggiornare requirements.txt con queste dipendenze.

Flask>=2.2
Flask-Session>=0.3.2,<0.6
werkzeug>=2
requests>=2,<3
identity>=0.5.1,<0.6
python-dotenv<0.22

Aggiungere i componenti dell'interfaccia utente dell'applicazione

In questa sezione vengono creati modelli HTML per ogni route definita nell'app, tra cui accesso, disconnesso, chiamate API e modelli di errore. Seguire questa procedura per creare modelli per ognuna di queste pagine:

Modelli di accesso

Nella cartella templates creare un file HTML denominato login.html e aggiungere il contenuto seguente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Login</title>
</head>
<body>
    <h1>Microsoft Identity Python Web App</h1>

    {% if user_code %}
    <ol>
      <li>To sign in, type <b>{{ user_code }}</b> into
        <a href='{{ auth_uri }}' target=_blank>{{ auth_uri }}</a>
        to authenticate.
      </li>
      <li>And then <a href="{{ url_for('auth_response') }}">proceed</a>.</li>
    </ol>
    {% else %}
    <ul><li><a href='{{ auth_uri }}'>Sign In</a></li></ul>
    {% endif %}

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

Questo modello rappresenta la pagina di accesso in cui gli utenti possono accedere all'applicazione.

Modello di indice

Nella cartella templates creare un file HTML denominato index.html e aggiungere il contenuto seguente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Index</title>
</head>
<body>
    <h1>Microsoft Identity Python Web App</h1>
    <h2>Welcome {{ user.get("name") }}!</h2>

    <ul>
    {% if config.get("ENDPOINT") %}
      <li><a href='/call_downstream_api'>Call a downstream API</a></li>
    {% endif %}

    <li><a href="/logout">Logout</a></li>
    </ul>

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

Il modello di indice funge da home page per l'app Web, di cui viene eseguito il rendering quando gli utenti visitano l'URL radice dell'app.

Pagina di visualizzazione

Questo modello viene usato per visualizzare il risultato di una chiamata API downstream. Aggiungere il frammento di codice seguente a display.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: API</title>
</head>
<body>
    <a href="javascript:window.history.go(-1)">Back</a> <!-- Displayed on top of a potentially large JSON response, so it will remain visible -->
    <h1>Result of the downstream API Call</h1>
    <pre>{{ result |tojson(indent=4) }}</pre> <!-- Just a generic json viewer -->
</body>
</html>

Modelli di errore

Modello di errore di autenticazione

Nella cartella templates creare un file HTML denominato auth_error.html che visualizza tutti i messaggi di errore che potrebbero venire visualizzati. Aggiungere il codice seguente a auth_error.html.

<!DOCTYPE html>*
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Login Failure</h2>
    <dl>
      {#
        Flask automatically escapes these unsafe input, so we do not have to.
        See also https://flask.palletsprojects.com/en/2.0.x/templating/#jinja-setup
      #}
      <dt>{{ result.get("error") }}</dt>
      <dd>{{ result.get("error_description") }}</dd>
    </dl>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

Modello di errore di configurazione

Nella cartella templates creare un file HTML denominato config_error.html che visualizza un messaggio quando manca una configurazione richiesta. Aggiungere il codice seguente per config_error.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Config Missing</h2>
    <p>
        Almost there. Did you forget to set up
<a target=_blank
href="https://learn.microsoft.com/azure/active-directory/develop/web-app-quickstart?pivots=devlang-python#step-5-configure-the-sample-app">
necessary environment variables</a> for your deployment?
    </p>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

Creazione del file di configurazione di

Nell'editor di codice aprire app_config.py, che contiene i parametri di configurazione e aggiungere il codice seguente:

import os
AUTHORITY= os.getenv("AUTHORITY")

# Application (client) ID of app registration
CLIENT_ID = os.getenv("CLIENT_ID")
# Application's generated client secret: never check this into source control!
CLIENT_SECRET = os.getenv("CLIENT_SECRET")
 
REDIRECT_PATH = "/getAToken"  # Used for forming an absolute URL to your redirect URI.

ENDPOINT = 'https://graph.microsoft.com/v1.0/me'  
SCOPE = ["User.Read"]

# Tells the Flask-session extension to store sessions in the filesystem
SESSION_TYPE = "filesystem"

Creare un file con estensione env per archiviare le impostazioni di configurazione.

In questo esempio si usa un file con estensione env per archiviare e gestire le impostazioni di configurazione, le variabili di ambiente e le credenziali dell'applicazione che non devono essere incorporate nel codice. Aprire il file con estensione env creato nella radice della directory del progetto e aggiungere i valori seguenti.

# The following variables are required for the app to run.
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
AUTHORITY=<Enter_your_authority_url>

Nel file con estensione env.sample sostituire i segnaposto per:

    • CLIENT_IDcon l'ID applicazione (client) disponibile nella pagina di panoramica della registrazione dell'app.
    • CLIENT_SECRET con il segreto client creato in Certificati e segreti
    • AUTHORITY con https://login.microsoftonline.com/<TENANT_GUID>. L'ID directory (tenant) è disponibile nella pagina di panoramica della registrazione dell'app.

Passaggio successivo

Informazioni su come aggiungere il supporto per l'accesso a un'app Web Python Flask nella parte successiva di questa serie di esercitazioni:

Esercitazione: Aggiungere il supporto per l'accesso a un'app Web Python Flask