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 av den här serien registrerade och konfigurerade du programmet i din Microsoft Entra-ID-klientorganisation.

I den här kursen får du:

  • Skapa ett nytt Python Flask-webbappsprojekt
  • Installera appberoenden
  • 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 skapa ett Python Flask-webbappsprojekt. Om du föredrar att använda ett slutfört kodexempel för inlärning laddar du ned Python Flask-webbappexemplet 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.py och requirements.txt.
  3. Skapa en .env-fil i projektets rotmapp.
  4. Skapa en mapp med namnet mallar i projektrotkatalogen. 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 appberoenden

Programmet 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

Skapa en HTML-fil med namnet login.html i mallmappen och lägg 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.

Indexmall

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 komma upp. 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>

Mall för konfigurationsfel

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.py i 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 .env.sample-filen ersätter du platshållarna för:

    • CLIENT_IDmed program-ID :t (klient) tillgängligt på översiktssidan för appregistrering.
    • CLIENT_SECRET med klienthemligheten som du skapade i certifikaten och hemligheterna
    • AUTHORITY med https://login.microsoftonline.com/<TENANT_GUID>. Katalog-ID :t (klientorganisation) är tillgängligt på översiktssidan för appregistrering.

Gå vidare

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 till en Python Flask-webbapp