Share via

Python Flask-webalkalmazás előkészítése hitelesítéshez

  • Cikk

Ez az oktatóanyag egy olyan sorozat 2. része, amely bemutatja a Python Flask-webalkalmazások készítését és a bejelentkezési támogatás hozzáadását a Microsoft Identitásplatform használatával. A sorozat 1. részében regisztrálta és konfigurálta az alkalmazást a Microsoft Entra ID-bérlőben.

Az oktatóanyag során az alábbi lépéseket fogja végrehajtani:

  • Új Python Flask-webalkalmazás-projekt létrehozása
  • Alkalmazásfüggőségek telepítése
  • Az alkalmazás felhasználói felületi összetevőinek hozzáadása
  • A Flask-webalkalmazás konfigurálása a Microsoft Entra-azonosító hitelesítéshez való használatára

Előfeltételek

Új Python-webalkalmazás-projekt létrehozása

Az oktatóanyag többi részének elvégzéséhez létre kell hoznia egy Python Flask-webalkalmazás-projektet. Ha inkább befejezett kódmintát szeretne használni a tanuláshoz, töltse le a Python Flask webalkalmazás-mintát a GitHubról.

A Python Flask-webalkalmazás alapoktól való létrehozásához kövesse az alábbi lépéseket:

  1. Hozzon létre egy mappát az alkalmazás üzemeltetéséhez, és nevezze el flask-web-appnak.
  2. Lépjen a projektkönyvtárba, és hozzon létre három app.py, app.config.py és requirements.txt nevű fájlt.
  3. Hozzon létre egy .env fájlt a projekt gyökérmappájában.
  4. Hozzon létre egy mappa nevű sablont a projekt gyökérkönyvtárában. A Flask renderelési sablonokat keres ebben az alkönyvtárban.

A fájlok létrehozása után a projekt fájljának és könyvtárának az alábbi struktúrához kell hasonlítania:

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

Alkalmazásfüggőségek telepítése

A buildelt alkalmazás a identityPythonHoz készült Microsoft Authentication Library (MSAL) burkolóját használja. Emellett telepíti a Flaskot, a Flask-munkamenetet, a kéréseket és az alkalmazás által igényelt összes egyéb függőséget. Frissítse a requirements.txt ezekkel a függőségekkel.

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

Alkalmazás felhasználói felületének összetevőinek hozzáadása

Ebben a szakaszban HTML-sablonokat hoz létre az alkalmazásban definiált útvonalakhoz, beleértve a bejelentkezést, a kijelentkezéseket, az API-hívásokat és a hibasablonokat. Az alábbi lépéseket követve hozhat létre sablonokat az egyes lapokhoz:

Bejelentkezési sablonok

A sablonok mappájában hozzon létre egy login.html nevű HTML-fájlt, és adja hozzá a következő tartalmat:

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

Ez a sablon azt a bejelentkezési lapot jelöli, ahol a felhasználók bejelentkezhetnek az alkalmazásba.

Indexsablon

A sablonok mappában hozzon létre egy index.html nevű HTML-fájlt, és adja hozzá a következő tartalmat:

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

Az indexsablon a webalkalmazás kezdőlapjaként szolgál, amely akkor jelenik meg, amikor a felhasználók megtekintik az alkalmazás gyökér URL-címét.

Lap megjelenítése

Ez a sablon egy alsóbb rétegbeli API-hívás eredményét jeleníti meg. Adja hozzá a következő kódrészletet 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>

Hibasablonok

Hitelesítési hibasablon

A sablonok mappájában hozzon létre egy auth_error.html nevű HTML-fájlt, amely megjeleníti az esetlegesen megjelenő hibaüzeneteket. Adja hozzá a következő kódot 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>

Konfigurációs hibasablon

A sablonok mappájában hozzon létre egy config_error.html nevű HTML-fájlt, amely üzenetet jelenít meg, ha hiányzik egy szükséges konfiguráció. Adja hozzá a következő kódot a 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>

A konfigurációs fájl létrehozása

A kódszerkesztőben nyissa meg a konfigurációs paramétereket tartalmazó app_config.py, és adja hozzá a következő kódot:

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"

Hozzon létre egy .env fájlt a konfigurációs beállítások tárolásához.

Ebben a példában egy .env fájl használatával tárolja és kezeli az alkalmazás konfigurációs beállításait, környezeti változóit és hitelesítő adatait, amelyeket nem szabad beágyazni a kódba. Nyissa meg a projektkönyvtár gyökerében létrehozott .env fájlt, és adja hozzá a következő értékeket.

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

Az .env.sample fájlban cserélje le a következő helyőrzőket:

    • CLIENT_ID az alkalmazásregisztráció áttekintési oldalán elérhető alkalmazás-(ügyfél-) azonosítóval .
    • CLIENT_SECRET a Tanúsítványok > Titkos kódokban létrehozott ügyféltitkokkal
    • AUTHORITY helyett https://login.microsoftonline.com/<TENANT_GUID>. A címtár (bérlő) azonosítója az alkalmazásregisztráció áttekintési oldalán érhető el.

Következő lépés

Az oktatóanyag-sorozat következő részében megtudhatja, hogyan adhat hozzá bejelentkezési támogatást egy Python Flask-webalkalmazáshoz:

Oktatóanyag: Bejelentkezési támogatás hozzáadása Python Flask-webalkalmazáshoz