django-otp 二要素認証

google Authenticator(スマホアプリ)とdjango認証

すでに構築済みに二要素認証を追加する簡単な方法

(venv)$ pip install django-otp qrcode

setting.py に追加

INSTALLED_APPS = (

    ...

    'django_otp',
    'django_otp.plugins.otp_totp',
    'django_otp.plugins.otp_static',

    ...


)

MIDDLEWARE = (
    ...
    'django_otp.middleware.OTPMiddleware',
    ...
)

migrateの実行

(venv)$ python manage.py migrate

superuserを作っていなければ作る

(venv)$ python manage.py createsuperuser

user:
email:
password:
確認用password:
を入力

この跡 adminを実行する

(venv)$ python manage.py runserver

localhost:8000/adminを実行

localhost:8000/adminを実行し
左図のようにTOTP Devices ＋追加で
User：枠に ユーザ名を入れ右の検索ボタンを押す
ブラウザーが開くので登録したadminユーザを選択して日付、時刻など入力後保存する。

次にqrcodeを表示させる


赤枠のqrcodeをクリック

qrcodeが表示される

google Authenticator(スマホアプリ)に追加する

urls.pyに追加

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.views.generic.base import TemplateView
from django_otp.admin import OTPAdminSite # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    ．．．
    path('', include('blog.urls')),

]

# admin でdjango-otp
admin.site.__class__ = OTPAdminSite # 追加

この設定後adminでのログイン画面

OTP Token枠が表示される
ここにはスマホのgoogle Authenticatorの６文字を入力する。



ここではincludeした blog.urls.pyにloginを追加

from django.urls import path
from . import views
#from django.contrib.auth import views as auth_views
from django.contrib.auth.views import LoginView
from django_otp.forms import OTPAuthenticationForm


app_name = 'blog'

urlpatterns = [
    path('', views.PostList.as_view(), name='post_index'),
    path('login/', LoginView.as_view(authentication_form=OTPAuthenticationForm,template_name='login.html'), name='login'),
 ]

最後にtemplates/ligin.htmlを作成
{% load tailwind_filters %}は pip install django-tailwindを使ってるため

{% extends "base.html" %}
{% load tailwind_filters %}

{% block title %}ログイン | {{ block.super }}{% endblock %}

{% block content  %}


<form action="." method="POST" class="max-w-sm mx-auto text-sm font-medium">
    {% csrf_token %}
    <div class="form-row"> {{ form.username.errors }}{{ form.username.label_tag }}{{ form.username }} </div>
    <div class="form-row"> {{ form.password.errors }}{{ form.password.label_tag }}{{ form.password }} </div>
    {% if form.get_user %}
    <div class="form-row"> {{ form.otp_device.errors }}{{ form.otp_device.label_tag }}{{ form.otp_device }} </div>
    {% endif %}
    <div class="form-row"> {{ form.otp_token.errors }}{{ form.otp_token.label_tag }}{{ form.otp_token }} </div>
    <div class="submit-row">
        <input type="submit" value="ログイン" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"/>

    </div>
</form>
{% endblock content  %}

これによりlogin画面も OTP Tokenが追加表示される。

login画面も OTP Tokenが追加表示される。