In this guide, we'll walk you through the steps to integrate passkey authentication into a Python Django web application. We'll be utilizing Corbado's passkey-first UI component, which seamlessly connects to a passkey backend (incl. WebAuthn server), making the integration process straightforward and efficient.
Read the full original tutorial here
Before we go into the implementation, ensure you have a basic understanding of Django, Python, HTML, and JavaScript. Familiarity with these technologies will help you follow along more easily.
If Django isn't installed on your machine, you can install it by running the following command:
pip install Django==4.2.7
Next, install the Corbado Python SDK for passkeys:
pip install passkeys
Now, create a new Django project:
django-admin startproject passkeys_demo cd passkeys_demo
This will generate a passkeys_demo directory containing your Django project files.
Within your project directory, create a .env file to store environment variables. You need a Project ID and API secret that you can obtain from the Corbado developer panel (you need to create a Corbado project in the developer panel):
PROJECT_ID=your_project_id API_SECRET=your_api_secret
Install the django-environ package to load these variables into your Django settings:
pip install django-environ
In your settings.py, import environ and configure it to read the .env file:
import environ env = environ.Env() environ.Env.read_env() PROJECT_ID = env('PROJECT_ID') API_SECRET = env('API_SECRET')
Create a templates directory inside your passkeys_demo project. Within this directory, create index.html for the login page and profile.html for the user profile page.
index.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", }); const authElement = document.getElementById('corbado-auth'); Corbado.mountAuthUI(authElement, { 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> <h2>Protected Page ?</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> (async () => { await Corbado.load({ projectId: "{{ PROJECT_ID }}", darkMode: "off", }); const passkeyListElement = document.getElementById("passkey-list"); Corbado.mountPasskeyListUI(passkeyListElement); const logoutButton = document.getElementById('logoutButton'); logoutButton.addEventListener('click', function() { Corbado.logout() .then(() => { window.location.replace("/"); }) .catch(err => { console.error(err); }); }); })(); </script> </body> </html>
In views.py, create the following methods for rendering the login and profile pages:
from django.shortcuts import render, redirect from django.http import HttpResponse from corbado_python_sdk import Config, CorbadoSDK, SessionInterface, UserEntity from corbado_python_sdk.entities.session_validation_result import SessionValidationResult from corbado_python_sdk.generated.models.identifier import Identifier from passkeys_demo.settings import API_SECRET, PROJECT_ID config = Config(api_secret=API_SECRET, project_id=PROJECT_ID) sdk = CorbadoSDK(config=config) sessions = sdk.sessions identifiers = sdk.identifiers def index(request): context = {"PROJECT_ID": PROJECT_ID} return render(request, "index.html", context) def profile(request): token = request.COOKIES.get(config.short_session_cookie_name) try: if not token: raise ValueError("No token found") validation_result = sessions.get_and_validate_short_session_value(short_session=token) if validation_result.authenticated: email_identifiers = identifiers.list_all_emails_by_user_id( user_id=validation_result.user_id or "" ) user = sessions.get_current_user(short_session=token) context = { "PROJECT_ID": PROJECT_ID, "USER_ID": user.user_id, "USER_NAME": user.full_name, "USER_EMAIL": email_identifiers[0].value, } return render(request, "profile.html", context) else: return HttpResponse("You are not authenticated or have not yet confirmed your email.", status=401) except Exception as e: print(e) return redirect("/")
Configure the routes in urls.py:
from django.urls import path from . import views urlpatterns = [ path("", views.index, name="index"), path("profile/", views.profile, name="profile"), path('<path:unknown_path>/', lambda request, unknown_path: redirect('/'), name='fallback') ]
To start your Django application, use the following command:
python manage.py runserver
Visit http://localhost:8000 in your web browser, and you should see the Corbado UI component integrated seamlessly.
This guide walked you through the process of adding passkey-based authentication to a Django application using Corbado's components. This approach not only enhances security by implementing passwordless authentication but also simplifies session management. For further details on Corbado's session management capabilities, refer to the official documentation.
The above is the detailed content of Tutorial: Integrate Passkeys into Django (Python). For more information, please follow other related articles on the PHP Chinese website!