Python Django 入門トップページ

« 戻る 次へ »

カスタムユーザ認証

  1. プロジェクトの概要
  2. プロジェクトの作成と初期設定
  3. Users アプリケーションの作成と有効化
  4. 認証にカスタムユーザモデルを利用する
  5. モデルの作成
  6. マイグレーション
  7. ユーザの登録
  8. 管理ユーザの登録
  9. 管理サイトの作成
  10. Comments アプリケーションの作成
  11. ページ雛形の作成
  12. ログイン・ログアウトの実装
  13. Navbar の設置
  14. Comments アプリケーションのユーザ認証
  15. ユーザ一覧ページ
  16. ユーザ詳細情報の表示
  17. ユーザ情報の更新
  18. パスワードの変更
  19. Gmail 2段階認証の設定とアプリパスワードの取得
  20. メールの設定と送信
  21. パスワードのリセット
  22. ユーザ登録機能の実装
  23. ユーザ登録時に氏名も登録
  24. ユーザ登録時にメールアドレスも登録
  25. ユーザ登録してもログインできないように
  26. ユーザ登録後にメールを送信
  27. メール検証によるアカウントの有効化
  28. トークン有効期限の変更
  29. ログアウト後に top へリダイレクト
  30. 検証メールの再送信
  31. 未検証ユーザのログインエラーメッセージ
  32. メールに有効期限を表示
  33. フラッシュメッセージの変更
  34. 未検証ユーザのパスワードリセット

カスタムユーザ認証

ページ雛形の作成

ここでは，トップページ，Comments アプリケーションの各ページ，Users アプリケーションの各ページについて雛形を作成します．

URL ルートの定義

まず，プロジェクト全体のURLルートを定義します． 

custom_auth_project/urls.pyfrom django.contrib import admin
from django.urls import path
from django.urls import include
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('admin/', admin.site.urls),
    path('comments/', include('comments.urls')),
    path('users/', include('users.urls')),
]

Comments アプリケーションと Users アプリケーションについて URL ルートを定義します． 

comments/urls.pyfrom django.urls import path

from . import views

app_name = 'comments'
urlpatterns = [
    path('', views.comments_index, name='index'),
    path('', views.comments_show, name='show'),
    path('create/', views.comments_create, name='create'),
    path('/update/', views.comments_update, name='update'),
    path('/delete/', views.comments_delete, name='delete'),
]

users/urls.pyfrom django.urls import path

from . import views

app_name = 'users'
urlpatterns = [
    path('', views.users_index, name='index'),
]

ビューの作成

トップページに対応するビューを作成します．このファイルは新規に作成しなければなりません． 

custom_auth_project/views.pyfrom django.shortcuts import render

# Create your views here.

def index(request):
    context = {}
    return render(request, 'index.html', context)

次に，Comments アプリケーションのビューを定義します． 

comments/views.pyfrom django.shortcuts import render

# Create your views here.

def comments_index(request):
    context = {}
    return render(request, 'comments/index.html', context)

def comments_show(request, comment_id):
    context = {}
    context['comment_id'] = comment_id
    return render(request, 'comments/show.html', context)

def comments_create(request):
    context = {}
    context['page_title'] = 'コメントの投稿'
    return render(request, 'comments/form.html', context)

def comments_update(request, comment_id):
    context = {}
    context['page_title'] = 'コメントの編集'
    return render(request, 'comments/form.html', context)

def comments_delete(request, comment_id):
    return render(request, 'comments/delete_confirm.html')

さらに，Users アプリケーションのビューを定義します． 

users/views.pyfrom django.shortcuts import render

# Create your views here.

def users_index(request):
    context = {}
    return render(request, 'users/index.html', context)

テンプレートの作成

各アプリケーションの views.py で呼び出している HTML ファイルを作成しますが，それらの HTML ファイルで共通する部分をまとめてテンプレート化しておくと後の開発作業や運用開始後の保守作業が非常に楽になります．したがって，HTML ファイルの共通部分を取り出したテンプレート base.html を作成します．このファイルは Comments アプリケーション内に設置することにします．（Users アプリケーション内に置いても動作します．どのアプリケーションに設置すべきかはベストプラクティスがあると思います．）

具体的には，comments フォルダに templates フォルダを作成し，その中に base.html を設置します．ここでは，Bootstrap によるレスポンシブ Web デザインを利用することにします．次のように Bootstrap のテンプレートをコピーして若干手を加えることにします．なお，2022年7月時点での最新バージョンは5.2です． 

comments/templates/base.html{% load static %}<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

上の 1 行目 {% load static %} は静的ファイル（CSSファイル）を読み込むために必要な命令で，5 行目で CSS ファイルを読み込みます．この CSS ファイルは後ほど設置します．上の 2 行目でページの言語を日本語に指定しています．上の 6 行目で <title>{% block title %}{% endblock %}</title> のように記述することで，ページごとに異なったタイトルを指定することができるようになります．11 行目と 12 行目の間にページのコンテンツが差し込まれるようになります．ただしコンテンツ全体が <div class="container"> ... </div> で囲まれるように 10 行目と 13 行目にタグを配置しています．

HTML ファイルの設置

まず，トップページに該当する index.html を作成します． 

comments/templates/index.html{% extends "base.html" %}

{% block title %}
コメント投稿アプリケーション
{% endblock %}

{% block content %}
<h1 class="my-5">コメント投稿アプリケーション</h1>
<p>
    <a href="{% url 'comments:index' %}">
        コメント一覧ページに移動します．
    </a>
</p>
<p>
    <a href="{% url 'users:index' %}">
        ユーザ一覧ページに移動します．
    </a>
</p>
{% endblock content %}

次に Comments アプリケーションの HTML ファイルをいくつか作成します． 

comments/templates/comments/index.html{% extends "base.html" %}

{% block title %}
コメント一覧
{% endblock %}

{% block content %}
<h1 class="my-5">コメント一覧</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10 %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10 %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10 %}">コメント削除</a>
    </li>
    <li>
        <a href="{% url 'index' %}">トップへ戻る</a>
    </li>
</ul>
{% endblock content %}

comments/templates/comments/show.html{% extends "base.html" %}

{% block title %}
コメント {{ comment_id }}
{% endblock %}

{% block content %}
<h1 class="my-5">コメント {{ comment_id }}</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10 %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10 %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10 %}">コメント削除</a>
    </li>
    <li>
        <a href="{% url 'index' %}">トップへ戻る</a>
    </li>
</ul>
{% endblock content %}

comments/templates/comments/form.html{% extends "base.html" %}

{% block title %}
{{ page_title }}
{% endblock %}

{% block content %}
<h1 class="my-5">{{ page_title }}</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10 %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10 %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10 %}">コメント削除</a>
    </li>
    <li>
        <a href="{% url 'index' %}">トップへ戻る</a>
    </li>
</ul>
{% endblock content %}

comments/templates/comments/delete_confirm.html{% extends "base.html" %}

{% block title %}
コメントの削除
{% endblock %}

{% block content %}
<h1 class="my-5">コメントの削除</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10 %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10 %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10 %}">コメント削除</a>
    </li>
    <li>
        <a href="{% url 'index' %}">トップへ戻る</a>
    </li>
</ul>
{% endblock content %}

最後に Users アプリケーションの HTML ファイルを作成します． 

users/templates/users/index.html{% extends "base.html" %}

{% block title %}
ユーザ一覧
{% endblock %}

{% block content %}
<h1 class="my-5">ユーザ一覧</h1>
<ul>
    <li>
        <a href="{% url 'index' %}">トップへ戻る</a>
    </li>
</ul>
{% endblock content %}

雛形の確認

トップページを開き，様々なリンクからページを移動できることを確認します． 

(py39) C:\Users\lecture\Documents\django\custom_auth_project>python manage.py runserver ⏎
Watching for file changes with StatReloader
Performing system checks...

トップページです．

django2022-00306

Comments アプリケーションのトップページです．

django2022-00307

Users アプリケーションのトップページです．

django2022-00308

今後，Commments アプリケーションのページはログイン認証を経たユーザだけが閲覧できるようにします．またユーザ認証やユーザ登録などの機能は Users アプリケーションに実装します．

目次に戻る

« 戻る 次へ »