“ورود با کلیدهای عبور” را به برنامه جنگو خود اضافه کنید

کلیدهای عبور، کلیدهای عبور، کلیدهای عبور! همه در مورد آنها صحبت می کنند. با انتشار رمز عبور آمازون در سال گذشته و تشویق کاربران توسط گوگل به تبدیل آنها به روش احراز هویت پیش فرض، این سوال مطرح می شود: چگونه آنها را به برنامه خود اضافه کنم؟
کلیدهای عبور چگونه کار می کنند؟
اگر فقط به اجرای آنها علاقه دارید، می توانید از این بخش صرف نظر کنید. توهین نشده 😉
اعتبار چند دستگاهی FIDO2 که اغلب به عنوان “کلیدهای عبور” شناخته می شود استانداردی است که توسط اتحاد FIDO معرفی شده است. این یک روش بسیار قدرتمند برای استفاده از رمزنگاری کلید عمومی برای تأیید هویت کاربر بدون رمز عبور، چند عاملی و غیره است.
برای کسب اطلاعات بیشتر در مورد نحوه عملکرد دقیق کلیدهای عبور و احراز هویت، مقاله Secure By Design Hub در مورد کلیدهای عبور را بررسی کنید.
چگونه آن را در آن بسازم؟
در این آموزش، میخواهیم از صفحات میزبانی شده Pangea AuthN استفاده کنیم تا بتوانیم به سرعت کلیدهای عبور را پیکربندی کنیم، بدون اینکه تمام مشکلات رمزنگاری را از ابتدا ایجاد کنیم. برای اثبات اینکه اضافه کردن کلیدهای عبور به هر برنامه ای در چند دقیقه آسان است، می خواهم با یک برنامه جدید جنگو شروع کنم و کلیدهای عبور را تنها در چند مرحله پیاده سازی کنم.
مرحله 1: یک برنامه جنگو جدید ایجاد کنید و وابستگی های مورد نیاز را نصب کنید
python -m pip install django
django-admin startproject mysite
cd mysite
python manage.py startapp authme
pip install python-dotenv pangea-django
python manage.py migrate
برویم به mysite/mysite/settings.py
به برنامه ما اجازه می دهد از این بسته ها استفاده کند.
ما باید بتوانیم:
-
بارگذاری a
.env
فایل -
دسترسی به
pangea-django
میان افزار -
صفحات HTML ما را از یک مکان مشخص بارگیری کنید
templates
پوشه
from dotenv import load_dotenv
import os
from pathlib import Path
load_dotenv()
# Skip down to the middlware declaration.
# Comment or remove the default django middleware.
# Add Pangea's Auth Middleware
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
#"django.contrib.auth.middleware.AuthenticationMiddleware",
"pangea_django.PangeaAuthMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
]
# Replace the default configuration with the templates below
# templates folder is where we will keep our html
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [os.path.join(BASE_DIR, "templates")],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
مرحله 2: یک حساب کاربری در pangea.cloud ایجاد کنید
به pangea.cloud بروید و یک حساب کاربری رایگان ایجاد کنید. سپس در کنسول توسعه دهنده، سرویس “AuthN” را فعال کنید و توکن های زیر را بگیرید.
این نشانهها در فایل پیکربندی .env شما مانند شکل زیر جایگذاری میشوند. این نشانه ها را ایجاد و اضافه کنید mysite/.env
فایل مانند این:
PANGEA_AUTHN_TOKEN=
PANGEA_DOMAIN=
PANGEA_HOSTED_LOGIN=
مرحله 3: اجزای Pangea Auth را به برنامه جدید جنگو اضافه کنید
اکنون ما خود را ویرایش می کنیم mysite/authme/views.py
فایل با pangea_django
بسته ای که زمینه و وضعیت احراز هویت را در سراسر برنامه حفظ می کند.
پس ما authme/views.py
فایل باید به شکل زیر باشد:
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from pangea_django import PangeaAuthentication, generate_state_param
import os
# Create your views here.
def landing(request):
if request.user.is_authenticated:
return redirect("/home")
hosted_login = os.getenv("PANGEA_HOSTED_LOGIN")
redirect_url = hosted_login + "?state=" + generate_state_param(request)
return redirect(redirect_url)
def login_success(request):
user = PangeaAuthentication().authenticate(request=request)
if user:
return redirect("/home")
return redirect("/")
@login_required(login_url="/")
def logout(request):
user = PangeaAuthentication().logout(request)
return redirect("/logout")
@login_required(login_url="/")
def home(request):
context = {}
context["user"] = request.user
return render(request, "home.html", context)
بعد باید این نماها را به مسیرها ترسیم کنیم. ما این کار را در mysite/mysite/urls.py
from django.urls import path
import authme
urlpatterns = [
path('', authme.views.landing),
path('home', authme.views.home),
path('login_success', authme.views.login_success),
path('logout', authme.views.logout),
]
برنامه باید بتواند دسترسی داشته باشد mysite/authme/views.py
از جانب mysite/mysite/urls.py
. این خط را به mysite/authme/__init__.py
from . import views
در نهایت ما به صفحه ای نیاز داریم تا این احراز هویت به آن رندر شود. روشی که ما در جنگو صفحات می سازیم با ایجاد یک پوشه templates با صفحات html است. از آنجا که authme.view.home
در حال مسیریابی به
، باید با صفحه خود تماس بگیریم mysite/templates/home.html
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1">
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #b47b00;
line-height: 1.8;
background-color: antiquewhite;
}
table {
margin: 0px auto;
background-color: white;
padding: 25px;
}
tr {
font-family: Verdana, Tahoma, sans-serif;
font-size: 20px;
color: #rgb(158, 108, 0);
}
td {
padding: 2px;
}
ID:
{{ user.id }}
Email:
{{ user.email }}
First Name:
{{ user.first_name }}
Last Name:
{{ user.last_name }}
Last Login:
{{ user.last_login }}
مرحله 4: Redirect را اضافه کنید و کلیدهای عبور را در کنسول Pangea فعال کنید
ما باید یک تغییر مسیر مجاز اضافه کنیم، تا صفحات میزبانی شده AuthN Pangea با موفقیت ما را به http://127.0.0.1:8000/home هدایت کنند، زمانی که یک کاربر احراز هویت انجام شد.
پس ابتدا بیایید به زیر برویم General > Redirect (Callback) Settings
و http://127.0.0.1:8000/home را به عنوان تغییر مسیر اضافه کنید و ذخیره کنید.
در اینجا آخرین مرحله فرا می رسد، بیایید Passkeys را فعال کنیم! سر به Single Sign On > Passkeys
و آن را فعال کنید. به صورت اختیاری میتوانید انتخاب کنید که گزینههای احراز هویت مجدد بر اساس تجربه کاربری مورد نظرتان فعال شود.
در اینجا یک ویدیوی سریع در مورد نحوه فعال کردن آن در تنظیمات وجود دارد:
بیایید آن را امتحان کنیم! می توانید کد را در Github پیدا کنید و نسخه ی نمایشی را در زیر مشاهده کنید.
اگر به دنبال اضافه کردن AuthN به سایر زبان ها یا فریم ورک ها هستید، این آموزش ها را دنبال کنید: