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
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!
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
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:
Nach der Einrichtung erhalten Sie HTML-/JavaScript-Schnipsel, die Sie in Ihr FastAPI-Projekt integrieren.
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.
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")
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>
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)
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.
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!
