Udostępnij za pośrednictwem

Przygotowywanie aplikacji internetowej platformy Python Flask do uwierzytelniania

  • Artykuł

Ten samouczek jest częścią 2 serii, która demonstruje tworzenie aplikacji internetowej platformy Python Flask i dodawanie obsługi logowania przy użyciu Platforma tożsamości Microsoft. W części 1 tej serii zarejestrowano i skonfigurowano aplikację w dzierżawie microsoft Entra ID.

W tym samouczku zostały wykonane następujące czynności:

  • Tworzenie nowego projektu aplikacji internetowej platformy Python Flask
  • Instalowanie zależności aplikacji
  • Dodawanie składników interfejsu użytkownika aplikacji
  • Konfigurowanie aplikacji internetowej platformy Flask do używania identyfikatora Entra firmy Microsoft do uwierzytelniania

Wymagania wstępne

Tworzenie nowego projektu aplikacji internetowej w języku Python

Aby ukończyć resztę samouczka, musisz utworzyć projekt aplikacji internetowej platformy Python Flask. Jeśli wolisz używać ukończonego przykładu kodu do nauki, pobierz przykładową aplikację internetową platformy Python Flask z usługi GitHub.

Aby utworzyć aplikację internetową platformy Python Flask od podstaw, wykonaj następujące kroki:

  1. Utwórz folder do hostowania aplikacji i nadaj jej nazwę flask-web-app.
  2. Przejdź do katalogu projektu i utwórz trzy pliki o nazwie app.py, app.config.py i requirements.txt.
  3. Utwórz plik env w folderze głównym projektu.
  4. Utwórz folder o nazwie templates w katalogu głównym projektu. Platforma Flask szuka szablonów renderowania w tym podkatalogu.

Po utworzeniu plików plik i katalog projektu powinny być podobne do następującej struktury:

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

Instalowanie zależności aplikacji

Utworzona aplikacja używa identity pakietu — otoki biblioteki Microsoft Authentication Library (MSAL) dla języka Python. Instalujesz również platformę Flask, sesję platformy Flask, żądania i wszystkie inne zależności wymagane przez aplikację. Zaktualizuj requirements.txt za pomocą tych zależności.

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

Dodawanie składników interfejsu użytkownika aplikacji

W tej sekcji utworzysz szablony HTML dla każdej trasy zdefiniowanej w aplikacji, w tym logowania, wylogowania, wywołań interfejsu API i szablonów błędów. Wykonaj następujące kroki, aby utworzyć szablony dla każdej z tych stron:

Szablony logowania

W folderze templates utwórz plik HTML o nazwie login.html i dodaj następującą zawartość:

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

Ten szablon reprezentuje stronę logowania, na której użytkownicy mogą logować się do aplikacji.

Szablon indeksu

W folderze templates utwórz plik HTML o nazwie index.html i dodaj następującą zawartość:

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

Szablon indeksu służy jako strona główna aplikacji internetowej renderowana, gdy użytkownicy odwiedzają główny adres URL aplikacji.

Wyświetl stronę

Ten szablon służy do wyświetlania wyniku wywołania podrzędnego interfejsu API. Dodaj następujący fragment kodu, aby 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>

Szablony błędów

Szablon błędu uwierzytelniania

W folderze templates utwórz plik HTML o nazwie auth_error.html , który wyświetla wszelkie komunikaty o błędach, które mogą pojawić się. Dodaj następujący kod, aby 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>

Szablon błędu konfiguracji

W folderze templates utwórz plik HTML o nazwie config_error.html , który wyświetla komunikat, gdy brakuje wymaganej konfiguracji. Dodaj następujący kod, aby 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>

Tworzenie pliku konfiguracji

W edytorze kodu otwórz app_config.py, która przechowuje parametry konfiguracji, i dodaj następujący 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"

Utwórz plik env do przechowywania ustawień konfiguracji.

W tym przykładzie używasz pliku env do przechowywania ustawień konfiguracji aplikacji, zmiennych środowiskowych i poświadczeń, które nie powinny być osadzone w naszym kodzie i zarządzać nimi. Otwórz plik env utworzony w katalogu głównym katalogu projektu i dodaj następujące wartości.

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

W pliku .env.sample zastąp symbole zastępcze dla:

    • CLIENT_IDz identyfikatorem aplikacji (klienta) dostępnym na stronie przeglądu rejestracji aplikacji.
    • CLIENT_SECRET z wpisem tajnym klienta utworzonym w certyfikatach i wpisach tajnych
    • AUTHORITY z https://login.microsoftonline.com/<TENANT_GUID>. Identyfikator katalogu (dzierżawy) jest dostępny na stronie przeglądu rejestracji aplikacji.

Następny krok

Dowiedz się, jak dodać obsługę logowania do aplikacji internetowej platformy Python Flask w następnej części tej serii samouczków:

Samouczek: dodawanie obsługi logowania do aplikacji internetowej platformy Python Flask