Flask アプリケーションにログイン機能を追加

前提条件: 開始する前に、次のものがインストールされていることを確認してください。

Python 3.9 以降
pip 20.0 以降
jq - Auth0 CLI のセットアップに必要です

Flask のバージョン互換性: このクイックスタートでは、非同期サポートのために [async] extra を含む Flask 2.0+ を使用します。

はじめに

このクイックスタートでは、Flask アプリケーションに Auth0 認証を追加する方法を説明します。Auth0 WebApp Python SDK を使用して、ログイン機能、保護されたルート、ユーザープロフィールへのアクセスを備えたセキュアな Web アプリケーションを構築します。

環境をセットアップする

Flask プロジェクト用に新しいディレクトリを作成します。

mkdir auth0-flask-app && cd auth0-flask-app

仮想環境を作成します:

python -m venv venv
source venv/bin/activate  # Windowsの場合: venv\Scripts\activate

依存関係をインストール

依存関係を管理するための requirements.txt を作成します：

requirements.txt

auth0-server-python>=1.0.0b7
flask[async]>=2.0.0
python-dotenv>=1.0.0

requirements.txt ファイルには、プロジェクトのすべての依存関係が記載されています。これらをインストールするには、次を実行します:

pip install -r requirements.txt

Auth0 アプリを設定する

次に、Auth0テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。CLIコマンドを実行して自動的に行う方法と、Dashboardから手動で行う方法のいずれかを選択できます。

CLI
Dashboard

プロジェクトのルートディレクトリで次のシェルコマンドを実行し、Auth0 アプリケーションを作成して .env ファイルを生成します。

AUTH0_APP_NAME="My Flask App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json > app-details.json && CLIENT_ID=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_id'])") && CLIENT_SECRET=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_secret'])") && DOMAIN=$(auth0 tenants list --json | python3 -c "import sys, json; print([t['name'] for t in json.load(sys.stdin) if t.get('active')][0])") && SECRET=$(openssl rand -hex 64) && echo "AUTH0_DOMAIN=${DOMAIN}" > .env && echo "AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "AUTH0_SECRET=${SECRET}" >> .env && echo "AUTH0_REDIRECT_URI=http://localhost:5000/callback" >> .env && rm app-details.json && echo ".env file created with your Auth0 details:" && cat .env

始める前に、プロジェクトのルートに .env ファイルを作成します。

.env

# Auth0 設定
AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
AUTH0_CLIENT_ID=YOUR_CLIENT_ID
AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET
AUTH0_SECRET=YOUR_GENERATED_SECRET
AUTH0_REDIRECT_URI=http://localhost:5000/callback

Auth0 Dashboard → Applications → Applications に移動します
Create Application をクリックします
アプリケーションに名前を付け (例: “My Flask App”) 、Regular Web Application を選択します
Create をクリックします
Settings タブで次の項目を設定します。
- Allowed Callback URLs: http://localhost:5000/callback
- Allowed Logout URLs: http://localhost:5000
- Allowed Web Origins: http://localhost:5000
Save Changes をクリックします
.env の YOUR_AUTH0_DOMAIN を、Settings タブにある ドメイン (例: your-tenant.auth0.com) に置き換えます
.env の YOUR_CLIENT_ID を クライアントID に置き換えます
.env の YOUR_CLIENT_SECRET を クライアントシークレット に置き換えます

AUTH0_SECRET 用の安全なシークレットを生成します。

openssl rand -hex 64

重要: .env ファイルは絶対にバージョン管理にコミットしないでください。.gitignore に追加してください。

認証設定、ルート、テンプレートを作成する

ファイルを作成する

mkdir templates static && touch app.py auth.py templates/index.html templates/profile.html static/style.css

次のコードスニペットを追加します。

開発時のみ: この例では、説明のためにシンプルなインメモリストレージクラス (MemoryStateStore と MemoryTransactionStore) を使用しています。これらのストアは、アプリケーションを再起動するとすべてのセッションデータが失われ、マルチインスタンス構成のデプロイでは動作しません。本番環境のアプリケーションでは、永続ストレージを実装する必要があります。この SDK はフレームワークに依存しないため、独自の StateStore と TransactionStore の実装を提供する必要があります。Redis、PostgreSQL、その他の永続ストレージバックエンドの実装方法について詳しくは、公式 SDK のストレージ実装例を参照してください。

アプリを実行する

Flask の開発サーバーを起動します。

python app.py

アプリは http://localhost:5000 で利用できるようになります。Auth0 SDK は認証用のルートを自動的に処理します。

チェックポイントこれで、localhost で動作する Auth0 のログインページが完成しているはずです

高度な使用方法

APIトークンの取得

保護された API を呼び出す必要がある場合は、アクセストークンを取得します。

@app.route('/api-call')
@require_auth
async def api_call():
    try:
        # API 用のアクセストークンを取得
        access_token = await auth0.get_access_token(
            audience='https://your-api.example.com',
            store_options=g.store_options
        )
        
        # トークンを使用して API を呼び出す
        # headers = {'Authorization': f'Bearer {access_token}'}
        # response = requests.get('https://your-api.example.com/data', headers=headers)
        
        return f"Access token retrieved: {access_token[:20]}..."
    except Exception as e:
        return f"Error getting access token: {str(e)}", 500

この機能を使用するには、次の設定が必要です。

.env ファイルで AUTH0_AUDIENCE を設定する
スコープに offline_access を含める (リフレッシュトークン用)

auth.py の authorization_params を更新する:

authorization_params={
    'scope': 'openid profile email offline_access',
    'audience': os.getenv('AUTH0_AUDIENCE')
}

カスタムストレージの設定

デフォルトでは、SDK は cookie ベースのストレージを使用します。特定の要件がある本番環境 (水平スケーリング、サービス間でのセッション共有など) では、Redis や PostgreSQL などのカスタムストレージバックエンドを設定できます。カスタムストレージを使用するタイミング:

複数のサーバー間でセッションを共有する必要がある
cookie のサイズ制限を超える大きなセッションデータがある
バックチャネルログアウト向けに一元的なセッション管理が必要である

Redis の例:

auth.py

from auth0_server_python.stores.redis_state_store import RedisStateStore
import redis.asyncio as redis

# カスタム状態ストアを初期化
redis_client = redis.from_url(os.getenv('REDIS_URL', 'redis://localhost:6379'))
state_store = RedisStateStore(
    secret=os.getenv('AUTH0_SECRET'),
    redis_client=redis_client
)

# ServerClient に渡す
auth0 = ServerClient(
    domain=os.getenv('AUTH0_DOMAIN'),
    client_id=os.getenv('AUTH0_CLIENT_ID'),
    client_secret=os.getenv('AUTH0_CLIENT_SECRET'),
    secret=os.getenv('AUTH0_SECRET'),
    redirect_uri=os.getenv('AUTH0_REDIRECT_URI'),
    state_store=state_store,  # カスタムストレージ
    authorization_params={'scope': 'openid profile email'}
)

ほとんどのアプリケーションでは、デフォルトの cookie ベースのストレージで十分です。カスタムストレージを使用するには、StateStore インターフェイスを実装する必要があります。実装の詳細については、SDK の例を参照してください。

よくある問題

MissingRequiredArgumentError

問題: アプリの起動時に “MissingRequiredArgumentError: secret” が表示される原因: AUTH0_SECRET 環境変数が存在しないか、正しく読み込まれていません。解決方法:

.env ファイルがプロジェクトのルートにあることを確認します
python-dotenv がインストールされていることを確認します: pip install python-dotenv
必要に応じて新しいシークレットを生成します: openssl rand -hex 64
生成した値を .env に追加します: AUTH0_SECRET=your_generated_secret
Flask アプリケーションを再起動します

無効なコールバックURLエラー

問題: ログイン時に “Callback URL mismatch” または “invalid_request” エラーが表示される原因: コード内のリダイレクト URI が、Auth0 Dashboard に登録されているものと一致していません。解決方法:

.env ファイルを確認します: AUTH0_REDIRECT_URI=http://localhost:5000/callback
Auth0 Dashboard → Applications → Your App → Settings に移動します
http://localhost:5000/callback を Allowed Callback URLs に追加します
Save Changes をクリックします
Flask アプリケーションを再起動します

AsyncIO イベントループのエラー

問題: “RuntimeError: This event loop is already running” または同様の非同期関連のエラーが表示される原因: Flask 2.0 以降の非同期サポートでは、特定の構成で問題が発生することがあります。解決策:非同期サポートを有効にして Flask をインストールします。

pip install "flask[async]"

次に、Flask アプリケーションを再起動します。

モジュールが見つからないエラー

問題: “ModuleNotFoundError: No module named ‘auth0_server_python’” または同様のエラーが表示される原因: SDK がインストールされていないか、仮想環境が有効になっていません。解決策:

仮想環境が有効になっていることを確認します。

source venv/bin/activate  # macOS/Linux
# または
venv\Scripts\activate  # Windows

SDK をインストールします。

pip install auth0-server-python "flask[async]" python-dotenv

インストールを確認します。

pip list | grep auth0

ClaimDecodingFailed エラー

問題: 認証中に “ClaimDecodingFailed” または “Failed to decode claims” エラーが表示される原因: Auth0 から受け取った IDトークンまたはアクセストークンを正しくデコードできませんでした。多くの場合、原因は次のとおりです。

無効な JWT 形式
破損したセッションデータ
署名アルゴリズムの不一致
サーバーと Auth0 間のクロックスキュー

解決策:

.env ファイル内の AUTH0_CLIENT_SECRET が正しいことを確認します

システム時刻が同期されていることを確認します (NTP):

# macOS
sudo sntp -sS time.apple.com

# Linux
sudo ntpdate -s time.nist.gov

ブラウザーのクッキーを削除し、認証をやり直します
AUTH0_DOMAIN に https:// プレフィックスが含まれていないことを確認します
Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth → JsonWebToken Signature Algorithm が SDK の設定と一致していることを確認します

トークンの期限切れまたは無効

問題: “Token has expired” または “invalid_token” エラーが表示される原因: アクセストークンまたはIDトークンの有効期間を超過しているか、セッションの有効期限が切れています。解決策:

offline_access スコープを含めると、SDK が自動的にトークンの更新を処理します。
```
authorization_params={
    'scope': 'openid profile email offline_access',
}
```

API の場合は、新しいトークンをリクエストするようにしてください。

access_token = await auth0.get_access_token(
    audience='https://your-api.example.com',
    force_refresh=True  # 必要に応じて強制的に更新
)

Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth で、トークンの有効期間を調整します
トークンの有効期限が切れた場合にユーザーをログイン画面へリダイレクトできるよう、適切なエラー処理を実装します

CORS とクロスオリジンエラー

問題: ブラウザのコンソールに CORS エラーまたは “Blocked by CORS policy” が表示される原因: アプリケーションのオリジンが Auth0 側で適切に設定されていません。解決策:

Auth0 Dashboard → Applications → Your App → Settings で、オリジンを追加します。
- Allowed Web Origins: http://localhost:5000
- Allowed Callback URLs: http://localhost:5000/callback
- Allowed Logout URLs: http://localhost:5000
本番環境では、本番用の URL も追加します。
```
https://yourdomain.com
https://yourdomain.com/callback
```
フロントエンドの JavaScript から Auth0 API を呼び出す場合は、Flask アプリで CORS が適切に設定されていることを確認します。
```
from flask_cors import CORS
CORS(app, origins=['http://localhost:5000'])
```

レート制限の超過

問題: “Too many requests” または “Rate limit exceeded” エラーが表示される原因: アプリケーションが認証リクエストに対する Auth0 の rate limits を超過しています。解決策:

Auth0 Dashboard → Monitoring → Logs で rate limit の詳細を確認します

リトライに指数バックオフを実装します。

import time
from auth0_server_python.error import ApiError

async def login_with_retry():
    max_retries = 3
    for attempt in range(max_retries):
        try:
            return await auth0.start_interactive_login({}, g.store_options)
        except ApiError as e:
            if e.status_code == 429 and attempt < max_retries - 1:
                wait_time = 2 ** attempt
                time.sleep(wait_time)
            else:
                raise

Auth0 のサブスクリプションプランの制限を確認します
不要なトークンリクエストを減らせるよう、authentication flow を最適化します
新しいトークンを頻繁にリクエストするのではなく、適切にキャッシュします

​はじめに

​高度な使用方法

​よくある問題

はじめに

高度な使用方法

よくある問題