Python でパスキーを統合する方法 (FastAPI)

導入

このガイドでは、FastAPI フレームワークを使用してパスキー認証を Python Web アプリケーションに統合するプロセスについて説明します。この実装では Corbado のパスキーファースト Web-js パッケージを活用し、パスキー バックエンドとの統合を合理化します。このチュートリアルを完了すると、パスキーベースの認証を備えた FastAPI アプリが動作するようになります。

オリジナルのチュートリアル全体をここで読んでください

FastAPI パスキー統合の前提条件

このチュートリアルを進めるには、Python、FastAPI、HTML、JavaScript の基本を理解している必要があります。 
さらに、パスキー サービスを使用するには Corbado アカウントが必要です。始めましょう!

FastAPI パスキー プロジェクトの構造

FastAPI プロジェクトにはいくつかのキー ファイルが含まれます。重要なものには以下が含まれます:

├── .env                 # Contains all environment variables
├── main.py              # Contains our webapplication (Handles routes)
└── templates
 ├── index.html       # Login page
 └── profile.html     # Profile page

Corbado アカウントのセットアップ

コーディングを始める前に、Corvado アカウントをセットアップしてください。これにより、パスキー サービスにアクセスできるようになります。次の手順に従ってください:

1. サインアップ: Corbado 開発者パネルに登録します。
2. プロジェクトを作成します: プロジェクトに名前を付け、セットアップ中に「Corvado Complete」を選択します。
3. 環境設定: 環境として「DEV」を選択し、アプリケーションの種類として「Web アプリ」を選択します。
4. セッション管理: パスキー認証とセッション管理の両方を処理するには、「Corvado セッション管理」を選択します。
5. フロントエンド フレームワーク: フロントエンド フレームワークとして「Vanilla JS」を選択します。
6. 構成: アプリケーション URL (例: http://localhost:8000) と証明書利用者 ID (例: localhost) を設定します。

セットアップ後、FastAPI プロジェクトに統合する HTML/JavaScript スニペットを受け取ります。

FastAPI プロジェクトの初期化

まだ main.py ファイルを作成していない場合は、まず作成します。 FastAPI とその他の必要なパッケージを次のコマンドでインストールします:

pip install fastapi python-dotenv passkeys

main.py は、ルートの設定やセッションの管理などのアプリケーション ロジックを処理します。

環境変数の構成

プロジェクトのルートに、環境変数を保存するための .env ファイルを作成します。

PROJECT_ID=your_project_id
API_SECRET=your_api_secret

python-dotenv を使用してこれらの変数をアプリケーションにロードします:

from dotenv import load_dotenv
import os

load_dotenv()
PROJECT_ID = os.getenv("PROJECT_ID")
API_SECRET = os.getenv("API_SECRET")

セッション管理を使用した HTML テンプレートの作成

次に、HTML テンプレートを設定します。 template/ ディレクトリに、login.html と profile.html を作成します。これらには、Corvado の認証コンポーネントを統合するために必要な JavaScript が含まれます。
ここに、login.html の基本構造があります:

    <link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css">
    <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>


    <script>
        (async () => {
            await Corbado.load({
                projectId: "{{ PROJECT_ID }}",
                darkMode: "off",
                setShortSessionCookie: "true",
            });
            Corbado.mountAuthUI(document.getElementById('corbado-auth'), {
                onLoggedIn: () => window.location.href = '/profile',
            });
        })();
    </script>
    <div id="corbado-auth"></div>

profile.html には、ユーザー データとログアウト ボタンを表示する要素を含めます。

  
    <link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css">
      <script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>
    
    

      <!-- Define passkey-list div and logout button -->
    <h2 id="protected">:/protected ?</h2>
    <p>User ID: {{USER_ID}}</p>
    <p>Name: {{USER_NAME}}</p>
    <p>Email: {{USER_EMAIL}}</p>
    <div id="passkey-list"></div>
    <button id="logoutButton">Logout</button>


    <!-- Script to load Corbado and mount PasskeyList UI -->
    <script>
 (async () => {
            await Corbado.load({
                projectId: "{{ PROJECT_ID }}",
                darkMode: "off",
                setShortSessionCookie: "true" // set short session cookie automatically
 }); 

            // Get and mount PasskeyList UI
            const passkeyListElement = document.getElementById("passkey-list"); // Element where you want to render PasskeyList UI
            Corbado.mountPasskeyListUI(passkeyListElement);

            // Get the logout button
            const logoutButton = document.getElementById('logoutButton');
            // Add event listener to logout button
 logoutButton.addEventListener('click', function() {
              Corbado.logout()
 .then(() => {
                        window.location.replace("/");
 })
 .catch(err => {
                        console.error(err);
 });
 });
 })();
    </script>

FastAPI コントローラーのセットアップ

コントローラー ロジックは main.py ファイルに存在します。このファイルは、ログイン ページとプロフィール ページの両方のルートを管理します。ログイン ルートは単純に PROJECT_ID をテンプレートに挿入しますが、プロファイル ルートは Corbado の Python SDK を使用してセッションを検証し、ユーザー データをフェッチします。

main.py の例:

from typing import List
from corbado_python_sdk.entities.session_validation_result import (
    SessionValidationResult,
)
from corbado_python_sdk.generated.models.identifier import Identifier

from fastapi import FastAPI, Request, Response
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from dotenv import load_dotenv
import os
from corbado_python_sdk import (
    Config,
    CorbadoSDK,
    IdentifierInterface,
    SessionInterface,
)

load_dotenv()

app = FastAPI()

templates = Jinja2Templates(directory="templates")

PROJECT_ID: str = os.getenv("PROJECT_ID", "pro-xxx")
API_SECRET: str = os.getenv("API_SECRET", "corbado1_xxx")

# Session config
short_session_cookie_name = "cbo_short_session"

# Config has a default values for 'short_session_cookie_name' and 'BACKEND_API'
config: Config = Config(
    api_secret=API_SECRET,
    project_id=PROJECT_ID,
)

# Initialize SDK
sdk: CorbadoSDK = CorbadoSDK(config=config)
sessions: SessionInterface = sdk.sessions
identifiers: IdentifierInterface = sdk.identifiers


@app.get("/", response_class=HTMLResponse)
async def get_login(request: Request):
    return templates.TemplateResponse(
        "login.html", {"request": request, "PROJECT_ID": PROJECT_ID}
    )


@app.get("/profile", response_class=HTMLResponse)
async def get_profile(request: Request):
    # Acquire cookies with your preferred method
    token: str = request.cookies.get(config.short_session_cookie_name) or ""
    validation_result: SessionValidationResult = (
        sessions.get_and_validate_short_session_value(short_session=token)
    )
    if validation_result.authenticated:

        emailList: List[Identifier] = identifiers.list_all_emails_by_user_id(
            user_id=validation_result.user_id
            or ""  # at this point user_id should be non empty string since user was authenticated
        )

        context = {
            "request": request,
            "PROJECT_ID": PROJECT_ID,
            "USER_ID": validation_result.user_id,
            "USER_NAME": validation_result.full_name,
            "USER_EMAIL": emailList[0].value,
        }
        return templates.TemplateResponse("profile.html", context)

    else:
        return Response(
            content="You are not authenticated or have not yet confirmed your email.",
            status_code=401,
        )


if __name__ == "__main__":
    import uvicorn

    uvicorn.run(app, host="127.0.0.1", port=8000)

FastAPI アプリケーションの実行

最後に、FastAPI アプリケーションを実行するには、Uvicorn をインストールします。

pip install 'uvicorn[standard]'

次に、サーバーを起動します。

uvicorn main:app --reload

ブラウザで http://localhost:8000 にアクセスして、UI コンポーネントの動作を確認してください。

結論

このチュートリアルでは、Corbado の web-js パッケージを使用してパスキー認証を FastAPI アプリケーションに統合する方法を説明しました。このセットアップは、安全で最新の認証方法を提供すると同時に、ユーザー セッションをシームレスに管理します。この実装の拡張または既存のアプリとの統合の詳細については、Corbado のドキュメントを参照してください。

以上がPython でパスキーを統合する方法 (FastAPI)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。