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

ログイン、保護されたルート、ユーザープロフィールを備えた Flask Web アプリケーションに Auth0 認証を追加

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

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

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

​

はじめに

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

1. 環境をセットアップする

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

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

   仮想環境を作成します:

   python -m venv venv
   source venv/bin/activate  # Windowsの場合: venv\Scripts\activate
   
2. 依存関係をインストール

   依存関係を管理するための 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
   
3. Auth0 アプリを設定する

   次に、Auth0テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。

   CLIコマンドを実行して自動的に行う方法と、Dashboardから手動で行う方法のいずれかを選択できます。

   CLI

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

   Mac

   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
   

   $AppName = "My Flask App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json | Set-Content -Path app-details.json; $ClientId = (Get-Content -Raw app-details.json | ConvertFrom-Json).client_id; $ClientSecret = (Get-Content -Raw app-details.json | ConvertFrom-Json).client_secret; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; $Secret = [System.Convert]::ToHexString([System.Security.Cryptography.RandomNumberGenerator]::GetBytes(64)).ToLower(); Set-Content -Path .env -Value "AUTH0_DOMAIN=$Domain"; Add-Content -Path .env -Value "AUTH0_CLIENT_ID=$ClientId"; Add-Content -Path .env -Value "AUTH0_CLIENT_SECRET=$ClientSecret"; Add-Content -Path .env -Value "AUTH0_SECRET=$Secret"; Add-Content -Path .env -Value "AUTH0_REDIRECT_URI=http://localhost:5000/callback"; Remove-Item app-details.json; Write-Output ".env file created with your Auth0 details:"; Get-Content .env
   

   Dashboard

   始める前に、プロジェクトのルートに .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
   

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

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

   openssl rand -hex 64
   

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

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

   ファイルを作成する

   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 のストレージ実装例 を参照してください。

5. アプリを実行する

   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

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

1. .env ファイルで AUTH0_AUDIENCE を設定する
2. スコープに offline_access を含める (リフレッシュトークン用)
3. 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 環境変数が存在しないか、正しく読み込まれていません。

解決方法:

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

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

問題: ログイン時に “Callback URL mismatch” または “invalid_request” エラーが表示される

原因: コード内のリダイレクト URI が、Auth0 Dashboard に登録されているものと一致していません。

解決方法:

1. .env ファイルを確認します: AUTH0_REDIRECT_URI=http://localhost:5000/callback
2. Auth0 Dashboard → Applications → Your App → Settings に移動します
3. http://localhost:5000/callback を Allowed Callback URLs に追加します
4. Save Changes をクリックします
5. 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 がインストールされていないか、仮想環境が有効になっていません。

解決策:

1. 仮想環境が有効になっていることを確認します。
   source venv/bin/activate  # macOS/Linux
   # または
   venv\Scripts\activate  # Windows
   
2. SDK をインストールします。
   pip install auth0-server-python "flask[async]" python-dotenv
   
3. インストールを確認します。

pip list | grep auth0

ClaimDecodingFailed エラー

問題: 認証中に “ClaimDecodingFailed” または “Failed to decode claims” エラーが表示される

原因: Auth0 から受け取った IDトークン または アクセストークン を正しくデコードできませんでした。多くの場合、原因は次のとおりです。

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

解決策:

1. .env ファイル内の AUTH0_CLIENT_SECRET が正しいことを確認します
2. システム時刻が同期されていることを確認します (NTP):
   # macOS
   sudo sntp -sS time.apple.com
   
   # Linux
   sudo ntpdate -s time.nist.gov
   
3. ブラウザーのクッキーを削除し、認証をやり直します
4. AUTH0_DOMAIN に https:// プレフィックスが含まれていないことを確認します
5. Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth → JsonWebToken Signature Algorithm が SDK の設定と一致していることを確認します

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

問題: “Token has expired” または “invalid_token” エラーが表示される

原因: アクセストークンまたはIDトークンの有効期間を超過しているか、セッションの有効期限が切れています。

解決策:

1. offline_access スコープを含めると、SDK が自動的にトークンの更新を処理します。
   authorization_params={
       'scope': 'openid profile email offline_access',
   }
   
2. API の場合は、新しいトークンをリクエストするようにしてください。
   access_token = await auth0.get_access_token(
       audience='https://your-api.example.com',
       force_refresh=True  # 必要に応じて強制的に更新
   )
   
3. Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth で、トークンの有効期間を調整します
4. トークンの有効期限が切れた場合にユーザーをログイン画面へリダイレクトできるよう、適切なエラー処理を実装します

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

問題: ブラウザのコンソールに CORS エラーまたは “Blocked by CORS policy” が表示される

原因: アプリケーションのオリジンが Auth0 側で適切に設定されていません。

解決策:

1. 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
2. 本番環境では、本番用の URL も追加します。
   https://yourdomain.com
   https://yourdomain.com/callback
   
3. フロントエンドの 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 を超過しています。

解決策:

1. Auth0 Dashboard → Monitoring → Logs で rate limit の詳細を確認します
2. リトライに指数バックオフを実装します。
   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
   
3. Auth0 のサブスクリプションプランの制限を確認します
4. 不要なトークンリクエストを減らせるよう、authentication flow を最適化します
5. 新しいトークンを頻繁にリクエストするのではなく、適切にキャッシュします