ホームページ > 記事 > バックエンド開発 > Python でパスキーを統合する方法 (FastAPI)

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

WBOYオリジナル: 2024-08-31 14:43:03467ブラウズ

導入

このガイドでは、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 アカウントをセットアップしてください。これにより、パスキーサービスにアクセスできるようになります。次の手順に従ってください:

サインアップ: Corbado 開発者パネルに登録します。
プロジェクトを作成します: プロジェクトに名前を付け、セットアップ中に「Corvado Complete」を選択します。
環境設定: 環境として「DEV」を選択し、アプリケーションの種類として「Web アプリ」を選択します。
セッション管理: パスキー認証とセッション管理の両方を処理するには、「Corvado セッション管理」を選択します。
フロントエンドフレームワーク: フロントエンドフレームワークとして「Vanilla JS」を選択します。
構成: アプリケーション 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 の基本構造があります:

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <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>
</body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <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>
    </head>
    <body>

      <!-- Define passkey-list div and logout button -->
    <h2>:/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>


</body>
</html>

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 コンポーネントの動作を確認してください。

How to Integrate Passkeys in Python (FastAPI)

結論

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

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

Python JavaScript html fastapi if for while select include Session Directory register using finally JS this display web app http ui Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：タイプキャスティング Par-06次の記事：タイプキャスティング Par-06

続きを見る