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

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

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

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

Flask のバージョン互換性: このクイックスタートでは、非同期サポートのために [async] エクストラを含む 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 Appを設定する

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

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

   CLI

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

   Mac

   # Auth0 CLIをインストールします（未インストールの場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 アプリを設定し、.env ファイルを生成します
   auth0 qs setup --app --type regular --framework vanilla-python --port 5000 --name "My Flask App"
   

   このコマンドにより、次の処理が行われます。

   1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
   2. http://localhost:5000 用に設定された Auth0 Regular Web Application を作成します
   3. AUTH0_DOMAIN、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET、AUTH0_SECRET、AUTH0_REDIRECT_URI を含む .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 → アプリケーション → アプリケーション に移動します
   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 タブの Domain の値 (例: your-tenant.auth0.com) に置き換えます
   8. .env の YOUR_CLIENT_ID を Client ID に置き換えます
   9. .env の YOUR_CLIENT_SECRET を Client Secret に置き換えます

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

   openssl rand -hex 64
   

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

4. Auth の設定、ルート、テンプレートを作成

   ファイルを作成する

   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. scopes に 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 のサイズ制限を超える大きなセッションデータを扱う
• backchannel logout のためにセッションを一元管理する必要がある

Redis の例:

auth.py

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

# カスタム state ストアを初期化
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 examples を参照してください。

---

​

よくある問題

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” エラーが表示される

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

解決策:

1. .env ファイルを確認します: AUTH0_REDIRECT_URI=http://localhost:5000/callback
2. Auth0 Dashboard → アプリケーション → 対象のアプリ → 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アプリケーションを再起動してください。

Module Not Found エラー

問題: “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” または “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. ブラウザーの Cookie を削除し、認証をやり直します
4. AUTH0_DOMAIN に https:// プレフィックスが含まれていないことを確認します
5. Auth0 Dashboard → アプリケーション → ご利用のアプリ → 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 → アプリケーション → Your App → Settings → Advanced → OAuth でトークンの有効期間を調整します
4. トークンの有効期限が切れたときにユーザーをログイン画面へリダイレクトできるよう、適切なエラー処理を実装します

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

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

原因: Auth0 でアプリケーションのオリジンが正しく設定されていません。

解決策:

1. Auth0 Dashboard → アプリケーション → 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 のレート制限を超えています。

解決策:

1. Auth0 Dashboard → Monitoring → Logs でレート制限の詳細を確認します
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. 不要なトークンリクエストを減らせるよう、認証フローを最適化します
5. 頻繁に新しいトークンをリクエストするのではなく、適切にキャッシュします