Python Django 入門トップページ

« 戻る 次へ »

ユーザ認証とコメント掲示板の開発

  1. プロジェクトの概要
  2. プロジェクトの作成と初期設定
  3. アプリケーションの作成と有効化
  4. ルートの記述
  5. ビューの定義
  6. HTML のテンプレート化
  7. HTML ファイルの作成
  8. Web ページ雛形の表示確認
  9. トップページの作成
  10. データベースのマイグレーション
  11. ユーザの作成
  12. ユーザ認証機能の実装
  13. セッション情報の確認
  14. ユーザ認証の状態を表示
  15. Navbar を設置
  16. モデルの作成とマイグレーション
  17. テストデータの投入
  18. コメントの一覧表示
  19. ページネーションと更新逆順表示
  20. コメント投稿機能の実装
  21. フラッシュメッセージ
  22. コメント詳細表示ページの実装
  23. 投稿者のユーザ名とメールアドレスの表示
  24. 投稿者であるかどうかの判断
  25. 編集・更新機能の実装
  26. コメント削除機能の実装
  27. Navbar の調整
  28. Profile の表示
  29. Profile の編集と更新
  30. パスワードの変更
  31. 管理サイトの準備
  32. 管理ユーザの登録
  33. 管理サイトへのログインとスタッフの登録
  34. グループの追加と権限の付与
  35. 管理サイトに comments アプリケーションを登録
  36. Comments アプリケーションから管理サイトへ

ユーザ認証とコメント掲示板の開発

ユーザ認証機能の実装

ここではユーザ認証機能を作成し，/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.pyfrom 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.pyfrom 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 %}

目次に戻る

動作の確認

トップページはログインすることなく表示されます．「コメント一覧ページへ」のリンクをクリックすると，ログイン画面に転送されます．

django2022-00085

ログイン画面が表示されました．このページの 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/ に転送されることを意味しています．

django2022-00086

正しいユーザ名とパスワードを入力してログインします．

django2022-00087

ログインに成功するとコメント一覧ページに転送されました．その後，様々なページに移動できること，ログアウトができることなども確認してください．

django2022-00088

目次に戻る

« 戻る 次へ »