Rumah >pembangunan bahagian belakang >Tutorial Python >Cara Mengintegrasikan Kunci Laluan dalam Python (FastAPI)
Cara Mengintegrasikan Kunci Laluan dalam Python (FastAPI)
- WBOYasal
- 2024-08-31 14:43:03497semak imbas
pengenalan
Dalam panduan ini, kami akan membimbing anda melalui proses penyepaduan pengesahan kunci laluan ke dalam aplikasi web Python menggunakan rangka kerja FastAPI. Pelaksanaan ini memanfaatkan pakej web-js pertama kunci laluan Corbado, yang menyelaraskan penyepaduan dengan hujung belakang kunci laluan. Menjelang akhir tutorial ini, anda akan mempunyai apl FastAPI yang berfungsi dengan pengesahan berasaskan kunci laluan.
Baca tutorial asal penuh di sini
Prasyarat untuk Penyepaduan Kunci Laluan FastAPI
Untuk mengikuti tutorial ini, anda harus mempunyai pemahaman asas tentang Python, FastAPI, HTML dan JavaScript.
Selain itu, anda memerlukan akaun Corbado untuk menggunakan perkhidmatan kunci laluan. Jom mulakan!
Struktur Projek FastAPI Passkey
Projek FastAPI anda akan mengandungi beberapa fail utama. Yang penting termasuk:
├── .env # Contains all environment variables ├── main.py # Contains our webapplication (Handles routes) └── templates ├── index.html # Login page └── profile.html # Profile page
Menyediakan Akaun Corbado Anda
Sebelum anda memulakan pengekodan, sediakan akaun Corbado. Ini akan membolehkan anda mengakses perkhidmatan kunci laluan mereka. Ikuti langkah ini:
- Daftar: Daftar pada panel pembangun Corbado.
- Buat Projek: Namakan projek anda dan pilih "Corbado Complete" semasa persediaan.
- Persediaan Persekitaran: Pilih "DEV" sebagai persekitaran anda dan "Apl Web" untuk jenis aplikasi.
- Pengurusan Sesi: Pilih "Pengurusan sesi Corbado" untuk mengendalikan kedua-dua pengesahan kunci laluan dan pengurusan sesi.
- Rangka Kerja Depan: Pilih "Vanilla JS" sebagai rangka kerja hadapan anda.
- Konfigurasi: Tetapkan URL Aplikasi anda (cth., http://localhost:8000) dan ID Pihak Bergantung (cth., localhost).
Selepas menyediakan, anda akan menerima coretan HTML/JavaScript yang akan anda sepadukan ke dalam projek FastAPI anda.
Memulakan Projek FastAPI
Mulakan dengan mencipta fail main.py jika anda belum melakukannya. Pasang FastAPI dan pakej lain yang diperlukan dengan:
pip install fastapi python-dotenv passkeys
Main.py anda akan mengendalikan logik aplikasi, termasuk menyediakan laluan dan menguruskan sesi.
Mengkonfigurasi Pembolehubah Persekitaran
Dalam akar projek anda, buat fail .env untuk menyimpan pembolehubah persekitaran anda:
PROJECT_ID=your_project_id API_SECRET=your_api_secret
Muatkan pembolehubah ini ke dalam aplikasi anda menggunakan python-dotenv:
from dotenv import load_dotenv
import os
load_dotenv()
PROJECT_ID = os.getenv("PROJECT_ID")
API_SECRET = os.getenv("API_SECRET")
Mencipta Templat HTML dengan Pengurusan Sesi
Seterusnya, sediakan templat HTML anda. Dalam templat/ direktori, cipta login.html dan profile.html. Ini termasuk JavaScript yang diperlukan untuk menyepadukan komponen pengesahan Corbado.
Berikut ialah struktur asas untuk log masuk.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>
Untuk profile.html, masukkan elemen untuk memaparkan data pengguna dan butang log keluar:
<!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>
Menyediakan Pengawal FastAPI
Logik pengawal anda akan berada dalam fail main.py. Fail ini akan mengurus laluan untuk kedua-dua halaman log masuk dan profil. Laluan log masuk hanya akan menyuntik PROJECT_ID ke dalam templat, manakala laluan profil akan mengesahkan sesi dan mengambil data pengguna menggunakan SDK Python Corbado.
Contoh 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)
Menjalankan Aplikasi FastAPI
Akhir sekali, untuk menjalankan aplikasi FastAPI anda, pasang Uvicorn:
pip install 'uvicorn[standard]'
Kemudian, mulakan pelayan anda:
uvicorn main:app --reload
Lawati http://localhost:8000 dalam penyemak imbas anda untuk melihat komponen UI dalam tindakan.
Kesimpulan
Tutorial ini menunjukkan cara untuk menyepadukan pengesahan kunci laluan ke dalam aplikasi FastAPI menggunakan pakej web-js Corbado. Persediaan ini menyediakan kaedah pengesahan yang selamat dan moden, di samping mengurus sesi pengguna dengan lancar. Untuk mendapatkan butiran lanjut tentang melanjutkan pelaksanaan ini atau menyepadukan dengan apl sedia ada, rujuk dokumentasi Corbado.
Atas ialah kandungan terperinci Cara Mengintegrasikan Kunci Laluan dalam Python (FastAPI). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!