Heim > Artikel > Backend-Entwicklung > So integrieren Sie Passkeys in Python (FastAPI)

So integrieren Sie Passkeys in Python (FastAPI)

WBOYOriginal: 2024-08-31 14:43:03327Durchsuche

Einführung

In diesem Leitfaden führen wir Sie durch den Prozess der Integration der Passkey-Authentifizierung in eine Python-Webanwendung mithilfe des FastAPI-Frameworks. Diese Implementierung nutzt Corbados passkey-first Web-JS-Paket, das die Integration mit einem Passkeys-Backend optimiert. Am Ende dieses Tutorials verfügen Sie über eine funktionierende FastAPI-App mit passschlüsselbasierter Authentifizierung.

Lesen Sie hier das vollständige Original-Tutorial

Voraussetzungen für die FastAPI-Passkey-Integration

Um diesem Tutorial folgen zu können, sollten Sie über grundlegende Kenntnisse in Python, FastAPI, HTML und JavaScript verfügen.
Darüber hinaus benötigen Sie ein Corbado-Konto, um Passkey-Dienste nutzen zu können. Fangen wir an!

Struktur des FastAPI-Passkey-Projekts

Ihr FastAPI-Projekt enthält mehrere Schlüsseldateien. Zu den wesentlichen gehören:

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

Einrichten Ihres Corbado-Kontos

Bevor Sie mit dem Programmieren beginnen, richten Sie ein Corbado-Konto ein. Dadurch können Sie auf deren Passkey-Dienste zugreifen. Befolgen Sie diese Schritte:

Anmelden: Registrieren Sie sich im Corbado-Entwicklerpanel.
Erstellen Sie ein Projekt: Benennen Sie Ihr Projekt und wählen Sie während der Einrichtung „Corbado Complete“ aus.
Umgebungseinrichtung: Wählen Sie „DEV“ als Umgebung und „Web-App“ als Anwendungstyp.
Sitzungsverwaltung: Entscheiden Sie sich für „Corbado-Sitzungsverwaltung“, um sowohl die Passkey-Authentifizierung als auch die Sitzungsverwaltung zu verwalten.
Frontend-Framework: Wählen Sie „Vanilla JS“ als Ihr Frontend-Framework.
Konfiguration: Legen Sie Ihre Anwendungs-URL (z. B. http://localhost:8000) und die ID der vertrauenden Partei (z. B. localhost) fest.

Nach der Einrichtung erhalten Sie HTML-/JavaScript-Schnipsel, die Sie in Ihr FastAPI-Projekt integrieren.

Initialisierung des FastAPI-Projekts

Erstellen Sie zunächst eine main.py-Datei, falls Sie dies noch nicht getan haben. Installieren Sie FastAPI und andere notwendige Pakete mit:

pip install fastapi python-dotenv passkeys

Ihre main.py übernimmt die Anwendungslogik, einschließlich der Einrichtung von Routen und der Verwaltung von Sitzungen.

Konfigurieren von Umgebungsvariablen

Erstellen Sie im Stammverzeichnis Ihres Projekts eine .env-Datei, um Ihre Umgebungsvariablen zu speichern:

PROJECT_ID=your_project_id
API_SECRET=your_api_secret

Laden Sie diese Variablen mit python-dotenv:
in Ihre Anwendung

from dotenv import load_dotenv
import os

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

Erstellen von HTML-Vorlagen mit Sitzungsverwaltung

Als nächstes richten Sie Ihre HTML-Vorlagen ein. Erstellen Sie im Verzeichnis templates/ die Dateien login.html und Profile.html. Dazu gehört das notwendige JavaScript zur Integration der Authentifizierungskomponenten von Corbado.
Hier ist die Grundstruktur für 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>

Fügen Sie für die Datei „profile.html“ Elemente zur Anzeige von Benutzerdaten und eine Schaltfläche zum Abmelden hinzu:

<!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>

Einrichten des FastAPI-Controllers

Ihre Controller-Logik befindet sich in der Datei main.py. Diese Datei verwaltet Routen sowohl für die Anmelde- als auch für die Profilseite. Die Login-Route fügt einfach die PROJECT_ID in die Vorlage ein, während die Profilroute die Sitzung validiert und Benutzerdaten mithilfe des Python SDK von Corbado abruft.

Beispiel 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)

Ausführen der FastAPI-Anwendung

Um Ihre FastAPI-Anwendung auszuführen, installieren Sie schließlich Uvicorn:

pip install 'uvicorn[standard]'

Dann starten Sie Ihren Server:

uvicorn main:app --reload

Besuchen Sie http://localhost:8000 in Ihrem Browser, um die UI-Komponente in Aktion zu sehen.

How to Integrate Passkeys in Python (FastAPI)

Abschluss

In diesem Tutorial wurde gezeigt, wie Sie die Passkey-Authentifizierung mithilfe des web-js-Pakets von Corbado in eine FastAPI-Anwendung integrieren. Dieses Setup bietet eine sichere und moderne Authentifizierungsmethode und verwaltet gleichzeitig Benutzersitzungen nahtlos. Weitere Informationen zur Erweiterung dieser Implementierung oder zur Integration in vorhandene Apps finden Sie in der Corbado-Dokumentation.

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Passkeys in Python (FastAPI). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Geben Sie Casting Par-06 einNächster Artikel：Geben Sie Casting Par-06 ein

In Verbindung stehende Artikel

Mehr sehen