Dela via

Förbereda en Python Flask-webbapp för autentisering

  • Artikel

Den här självstudien är del 2 i en serie som visar hur du skapar en Python Flask-webbapp och lägger till inloggningsstöd med hjälp av Microsofts identitetsplattform. I del 1 i den här serienregistrerade och konfigurerade du programmet i din Microsoft Entra ID-klientorganisation.

I den här genomgången kommer du:

  • Skapa ett nytt Python Flask-webbappsprojekt
  • Installera appens beroenden
  • Lägga till programmets gränssnittskomponenter
  • Konfigurera flaskwebbappen så att den använder Microsoft Entra-ID för autentisering

Förutsättningar

Skapa ett nytt Python-webbappsprojekt

För att slutföra resten av självstudien måste du utveckla ett Python Flask-webbapp-projekt. Om du föredrar att använda ett slutfört kodexempel för inlärning laddar du ned Python Flask-webbappexempel från GitHub.

Följ dessa steg för att skapa Python Flask-webbappen från grunden:

  1. Skapa en mapp som värd för ditt program och ge det namnet flask-web-app.
  2. Gå till projektkatalogen och skapa tre filer med namnet app.py, app_config.pyoch requirements.txt.
  3. Skapa en .env-fil i projektets rotmapp.
  4. Skapa en mapp med namnet mallar i projektets rotkatalog. Flask söker efter renderingsmallar i den här underkatalogen.

När du har skapat filerna bör projektets fil och katalog likna följande struktur:

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

Installera app-beroenden

Programmet som du skapar använder identity-paketet, en omslutning runt Microsoft Authentication Library (MSAL) för Python. Du installerar även Flask, Flask Session, begäranden och alla andra beroenden som appen kräver. Uppdatera requirements.txt med dessa beroenden.

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

Lägga till programgränssnittskomponenter

I det här avsnittet skapar du HTML-mallar för var och en av de vägar som du definierar i appen, inklusive inloggning, utloggning, API-anrop och felmallar. Följ dessa steg för att skapa mallar för var och en av dessa sidor:

Inloggningsmallar

I mappen mallar skapar du en HTML-fil med namnet login.html och lägger till följande innehåll:

<!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>

Den här mallen representerar inloggningssidan där användare kan logga in på ditt program.

Indextemplate

I mappen mallar skapar du en HTML-fil med namnet index.html och lägger till följande innehåll:

<!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>

Indexmallen fungerar som en startsida för webbappen som återges när användare besöker appens rot-URL.

Visningssida

Den här mallen används för att visa resultatet av ett underordnat API-anrop. Lägg till följande kodfragment i 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>

Felmallar

autentiseringsfelmall

I mappen mallar skapar du en HTML-fil med namnet auth_error.html som visar eventuella felmeddelanden som kan uppstå. Lägg till följande kod i 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>

konfigurationsfelmall

I mappen mallar skapar du en HTML-fil med namnet config_error.html som visar ett meddelande när en nödvändig konfiguration saknas. Lägg till följande kod i 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>

Skapa konfigurationsfilen

Öppna app_config.pyi kodredigeraren, som innehåller konfigurationsparametrarna, och lägg till följande kod:

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"

Skapa en .env-fil för att lagra konfigurationsinställningar.

I det här exemplet använder du en .env-fil för att lagra och hantera programmets konfigurationsinställningar, miljövariabler och autentiseringsuppgifter som inte ska bäddas in i vår kod. Öppna .env-filen som du skapade i roten i projektkatalogen och lägg till följande värden.

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

I filen .env.sample ersätter du platshållarna för:

    • CLIENT_ID med program-ID (klient) tillgängligt på översiktssidan för appregistrering.
    • CLIENT_SECRET med klienthemligheten som du skapade i Certifikat & Hemligheter
    • AUTHORITY med https://login.microsoftonline.com/<TENANT_GUID>. Directory-ID:t (klientorganisation) finns på översiktssidan för appregistrering.

Nästa steg

Lär dig hur du lägger till inloggningsstöd till en Python Flask-webbapp i nästa del av den här självstudieserien:

Självstudie: Lägga till inloggningsstöd för en Python Flask-webbapp