ここではユーザ認証機能を作成し,/comments/ 以下のページはログインしたユーザしか閲覧できるようにしよう.
ログイン機能を有効にするために,/accounts/ への URL パスを定義する.この作業でログインだけでなく様々なユーザ認証に関する機能が利用できるようになる.
django_comment_auth/urls.py
# from django.contrib import admin
from django.urls import path
from django.urls import include
from django_comment_auth import views
urlpatterns = [
path('', views.index, name='index'),
path('comments/', include('comments.urls')),
path('accounts/', include('django.contrib.auth.urls')),
# path('admin/', admin.site.urls),
]
ログアウトについては,comments アプリケーション内に設置する.
comments/urls.py
from django.urls import path
from . import views
app_name = 'comments'
urlpatterns = [
path('', views.comments_index, name='index'),
path('<int:comment_id>', views.comments_show, name='show'),
path('create/', views.comments_create, name='create'),
path('<int:comment_id>/update/', views.comments_update, name='update'),
path('<int:comment_id>/delete/', views.comments_delete, name='delete'),
path('logout/', views.logout_view, name='logout'),
]
次に,comments/views.py を編集します.具体的には,comments_index()
などの関数の先頭に認証されているかどうかのチェックを行い,認証されていなければログインページにリダイレクトするという処理を追加する.またログアウトの関数も追加する.
comments/views.py
from django.conf import settings
from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout
from django.shortcuts import redirect
from django.urls import reverse
# Create your views here.
def comments_index(request):
if not request.user.is_authenticated:
return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
context = {}
return render(request, 'comments/index.html', context)
def comments_show(request, comment_id):
if not request.user.is_authenticated:
return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
context = {}
context['comment_id'] = comment_id
return render(request, 'comments/show.html', context)
def comments_create(request):
if not request.user.is_authenticated:
return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
context = {}
context['page_title'] = 'コメントの投稿'
return render(request, 'comments/form.html', context)
def comments_update(request, comment_id):
if not request.user.is_authenticated:
return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
context = {}
context['page_title'] = 'コメントの編集'
return render(request, 'comments/form.html', context)
def comments_delete(request, comment_id):
if not request.user.is_authenticated:
return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
return render(request, 'comments/delete_confirm.html')
def logout_view(request):
logout(request)
return redirect(reverse('index'))
ログインページ(フォーム)を作成します.
comments/templates/registration/login.html
{% extends "base.html" %}
{% block title %}
ログイン
{% endblock %}
{% block content %}
<div class="col-md-12">
<h2>コメントアプリケーション</h2>
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group row">
<label for="id_username" class="col-md-2 col-form-label text-md-right">ユーザ名</label>
<div class="col-md-10">
<input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="id_password" class="col-md-2 col-form-label text-md-right">パスワード</label>
<div class="col-md-10">
<input type="password" name="password" autocomplete="current-password" required id="id_password" class="form-control">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-10 offset-md-2">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</div>
<input type="hidden" name="next" value="{{ next }}">
</form>
</div>
</div>
{% endblock %}
スタイルファイルを設置して,ログイン画面のデザインを調整します.具体的には,comments フォルダ内に static フォルダを作成し,更にその中に css フォルダを作成して,style.css を設置してください.
comments/static/css/style.css
/* ログインフォームなどで行間を調整 */
.form-group {
margin-bottom: 1.2rem;
}
/* ログインボタンなどの幅を広く */
.btn-block {
width: 100%;
}
コメント一覧ページにログアウトのためのリンクを設置します.
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="/">トップページへ</a>
</li>
</ul>
<p>
<a href="{% url 'comments:logout' %}">
[ ログアウト ]
</a>
</p>
{% endblock content %}
トップページはログインすることなく表示されます.「コメント一覧ページへ」のリンクをクリックすると,ログイン画面に転送されます.
ログイン画面が表示されました.このページの URL を確認すると http://127.0.0.1:8000/accounts/login/?next=/comments/ になっています.つまり,ログイン画面の URL は http://127.0.0.1:8000/accounts/login/ であり,ログインが成功すると http://127.0.0.1:8000/comments/ に転送されることを意味しています.
正しいユーザ名とパスワードを入力してログインします.
ログインに成功するとコメント一覧ページに転送されました.その後,様々なページに移動できること,ログアウトができることなども確認してください.