認証用に Python Flask Web アプリを準備する

[アーティクル]
02/06/2025

このチュートリアルは、Python Flask Web アプリの構築と、Microsoft ID プラットフォームを使用したサインインサポートの追加を示すシリーズのパート 2 です。このシリーズのパート 1 では、Microsoft Entra ID テナントにアプリケーションを登録し、構成しました。

このチュートリアルでは、次の操作を行います。

新しい Python Flask Web アプリプロジェクトを作成する
アプリの依存関係をインストールする
アプリケーションの UI コンポーネントを追加する
認証に Microsoft Entra ID を使用するように Flask Web アプリを構成する

前提条件

「チュートリアル: Python Web アプリを Microsoft ID プラットフォームに登録する」の手順を完了します。
Visual Studio Code または他の任意の IDE。
Python 3.9 以降ローカルにインストールされます。

新しい Python Web アプリプロジェクトを作成する

チュートリアルの残りの部分を完了するには、Python Flask Web アプリプロジェクトを作成する必要があります。学習に完成したコードサンプルを使用する場合は、GitHub から Python Flask Web アプリのサンプルをダウンロードします。

Python Flask Web アプリを最初からビルドするには、次の手順に従います。

アプリケーションをホストするフォルダーを作成し、flask-web-app 名前を付けます。
プロジェクトディレクトリに移動し、app.py、app_config.py、および requirements.txtという名前の 3 つのファイルを作成します。
プロジェクトのルートフォルダーに .env ファイルを作成します。
プロジェクトのルートディレクトリにテンプレートという名前のフォルダーを作成します。 Flask は、このサブディレクトリ内のレンダリングテンプレートを探します。

ファイルを作成した後、プロジェクトのファイルとディレクトリは次の構造のようになります。

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

アプリの依存関係をインストールする

ビルドするアプリケーションでは、identity パッケージ(Python 用 Microsoft Authentication Library (MSAL) のラッパー) が使用されます。また、Flask、Flask セッション、要求、アプリに必要なすべての依存関係もインストールします。これらの依存関係を使用して 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

アプリケーション UI コンポーネントを追加する

このセクションでは、サインイン、サインアウト、API 呼び出し、エラーテンプレートなど、アプリで定義する各ルートに対して HTML テンプレートを作成します。これらの各ページのテンプレートを作成するには、次の手順に従います。

templates フォルダーで、login.html という名前の 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>

このテンプレートは、ユーザーがアプリケーションにサインインできるログインページを表します。

インデックステンプレート

templates フォルダーで、index.html という名前の 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 にアクセスしたときにレンダリングされる Web アプリのホームページとして機能します。

表示ページ

このテンプレートは、ダウンストリーム 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>

エラーテンプレート

認証エラーテンプレート

templates フォルダーに、発生する可能性のあるエラーメッセージを表示する auth_error.html という名前の 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>

構成エラーテンプレート

templates フォルダーに、必要な構成がない場合にメッセージを表示する config_error.html という名前の 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 のプレースホルダーを、アプリ登録概要ページにあるアプリケーション (クライアント) ID に置換します。
- CLIENT_SECRET のプレースホルダーを、[証明書とシークレット] で作成したクライアントシークレットに置換します。
- AUTHORITY と https://login.microsoftonline.com/<TENANT_GUID>。 ディレクトリ (テナント) ID は、アプリ登録の概要ページで確認できます。

次の手順

このチュートリアルシリーズの次のパートで、Python Flask Web アプリにサインインサポートを追加する方法について説明します。

チュートリアル: Python Flask Web アプリにサインインサポートを追加する

次の方法で共有

認証用に Python Flask Web アプリを準備する

前提条件

新しい Python Web アプリプロジェクトを作成する

アプリの依存関係をインストールする

アプリケーション UI コンポーネントを追加する

インデックステンプレート

表示ページ

エラーテンプレート

構成ファイルを作成する

構成設定を格納する .env ファイルを作成します。

次の手順

フィードバック

その他のリソース

次の方法で共有

認証用に Python Flask Web アプリを準備する

前提 条件

新しい Python Web アプリ プロジェクトを作成する

アプリの依存関係をインストールする

アプリケーション UI コンポーネントを追加する

ログイン テンプレート

インデックス テンプレート

表示ページ

エラー テンプレート

構成ファイルを作成する

構成設定を格納する .env ファイルを作成します。

次の手順

フィードバック

その他のリソース

前提条件

新しい Python Web アプリプロジェクトを作成する

ログインテンプレート

インデックステンプレート

エラーテンプレート