Бөлісу құралы:


Подготовка веб-приложения Python Flask для проверки подлинности

Это руководство является частью 2 серии, демонстрирующей создание веб-приложения Python Flask и добавление поддержки входа с помощью платформа удостоверений Майкрософт. В части 1 этой серии вы зарегистрировали и настроили приложение в клиенте Идентификатора Microsoft Entra.

Изучив это руководство, вы:

  • Создание проекта веб-приложения Python Flask
  • Установка зависимостей приложения
  • Добавление компонентов пользовательского интерфейса приложения
  • Настройка веб-приложения Flask для использования идентификатора Microsoft Entra для проверки подлинности

Необходимые компоненты

Создание проекта веб-приложения Python

Чтобы завершить работу с этим руководством, необходимо создать проект веб-приложения Python Flask. Если вы предпочитаете использовать полный пример кода для обучения, скачайте пример веб-приложения Python Flask из GitHub.

Чтобы создать веб-приложение Python Flask с нуля, выполните следующие действия.

  1. Создайте папку для размещения приложения и присвойте ему имя flask-web-app.
  2. Перейдите в каталог проекта и создайте три файла с именем app.py, app.config.py и requirements.txt.
  3. Создайте ENV-файл в корневой папке проекта.
  4. Создайте именованные шаблоны папки в корневом каталоге проекта. Flask ищет шаблоны отрисовки в этом подкаталоге.

После создания файлов файл проекта и каталог должны быть похожи на следующую структуру:

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

Установка зависимостей приложения

Приложение, которое вы создаете identity , использует пакет, оболочку вокруг библиотеки проверки подлинности Майкрософт (MSAL) для Python. Вы также устанавливаете Flask, Flask Session, requests и все остальные зависимости, необходимые приложению. Обновите requirements.txt с помощью этих зависимостей.

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 

Добавление компонентов пользовательского интерфейса приложения

В этом разделе вы создадите шаблоны HTML для каждого из маршрутов, определяемых в приложении, включая вход, выход, вызовы API и шаблоны ошибок. Выполните следующие действия, чтобы создать шаблоны для каждой из этих страниц:

Шаблоны входа

В папке шаблонов создайте HTML-файл с именем login.html и добавьте следующее содержимое:

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

Этот шаблон представляет страницу входа, на которой пользователи могут войти в приложение.

Шаблон индекса

В папке шаблонов создайте HTML-файл с именем index.html и добавьте следующее содержимое:

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

Шаблон индекса служит домашней страницей веб-приложения, отображаемой при посещении корневого URL-адреса приложения.

Страница отображения

Этот шаблон используется для отображения результата вызова нижестоящего API. Добавьте следующий фрагмент кода в 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>

Шаблоны ошибок

Шаблон ошибки проверки подлинности

В папке шаблонов создайте HTML-файл с именем auth_error.html , в котором отображаются сообщения об ошибках, которые могут возникнуть. Добавьте следующий код в 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>

Шаблон ошибки конфигурации

В папке шаблонов создайте HTML-файл с именем config_error.html , отображающий сообщение при отсутствии требуемой конфигурации. Добавьте следующий код в 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>

Создание файла конфигурации

В редакторе кода откройте app_config.py, в котором хранятся параметры конфигурации, и добавьте следующий код:

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"

Создайте ENV-файл для хранения параметров конфигурации.

В этом примере вы используете env-файл для хранения параметров конфигурации приложения, переменных среды и учетных данных, которые не должны быть внедрены в наш код. Откройте ENV-файл, созданный в корне каталога проекта, и добавьте следующие значения.

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

В файле .env.sample замените заполнители следующим образом:

    • CLIENT_IDс идентификатором приложения (клиента), доступным на странице обзора регистрации приложения.
    • CLIENT_SECRET с секретом клиента, созданным в сертификатах и секретах
    • AUTHORITY на https://login.microsoftonline.com/<TENANT_GUID>. Идентификатор каталога (клиента) доступен на странице обзора регистрации приложения.

Следующий шаг

Узнайте, как добавить поддержку входа в веб-приложение Python Flask в следующей части этого руководства: