会員登録機能の追加
はじめに
今回も引き続き本棚アプリケーションの作成を行います。前回までのものに追加でアプリケーションを会員限定で使えるようにする会員登録機能を追加します。過去記事↓
urhayataro.hatenablog.com
これまではログイン、ログアウトの処理がバラバラに書いていましたが、会員登録機能を実装する上で、今回からアカウントの情報などは一つにまとめて書いていきます。
アプリケーションの作成とログアウトの修正
まずはじめにaccountsという名前の新規のアプリケーションを作成します。ターミナル上で以下を入力します。
python3 manage.py startapp accounts
作成できれば、settingファイルのINSTALLED_APPSに新規のアプリケーションを認識させる必要があります。bookproject/setting.pyに以下を記述します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'accounts.apps.AccountsConfig',
'book.apps.BookConfig',
]
それからbookproject/urls.pyも修正します。
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('accounts/', include('accounts.urls')), path('', include('book.urls')), ]
つぎにログアウトに関してバラバラに書いていたものを一つにするために修正します。
book/urls.pyを以下のようにします。
from django.urls import path from . import views urlpatterns = [ path('', views.index_view, name='index'), path('book/', views.ListBookView.as_view(), name='list-book'), path('book/create/', views.CreateBookView.as_view(), name='create-book'), path('book/<int:pk>/delete/', views.DeleteBookView.as_view(), name='delete-book'), path('book/<int:pk>/update/', views.UpdateBookView.as_view(), name='update-book'), path('logout/', views.logout_view, name='logout'), #削除 ]
また、book/views.pyのlogoutをインポートしたもの、def logout_viewを削除します。
これで会員登録機能を実装したときにログイン関係をひとまとめにする準備ができました。
ここからはログイン関係をひとまとめにしていきます。
まずはurls.pyとviews.pyに記述していきます。urls.pyの作成から行います。
touch accounts/urls.py
作成したaccounts/urls.pyに以下を記述します。
from django.urls import path from django.contrib.auth.views import LoginView, LogoutView from .views import SignupView app_name = 'accounts' urlpatterns = [ path('login/', LoginView.as_view(), name='login'), path('logout/', LogoutView.as_view(), name='logout'), path('signup/', SignupView.as_view(), name='signup'), ]
まず、2行目でDjangoのauthアプリケーションのviews.pyで定義されているLoginViewとLogoutViewを呼び出しています。これでログイン、ログアウトした時の状態の遷移ができるようになります。
ではログイン、ログアウトした時の画面の遷移先を指定しておきます。どちらも本棚アプリケーションのトップページに遷移するように設定します。bookproject/settings.pyに以下を記述します。
LOGIN_REDIRECT_URL = 'index' LOGOUT_REDIRECT_URL = 'index'
次に6行目のapp_nameについての記述について見ていきます。
なぜapp_nameで名付けをしたかというと、例えばurlを指定するときに'login'としたとして、複数のアプリケーションで'login'という名前で定義されていたとしましょう。するとどのアプリケーションの'login'のことを指定しているのかがわからなくなります。そのためapp_nameで定義しておくことでどのアプリケーションか判別することができます。
ではtemplates/base.htmlに'login'と記述されているところがあるので修正します。
<div class="navbar-nav d-flex flex-row"> {% if request.user.is_authenticated %} <a class="nav-link mx-3 href={% url 'accounts:logout' %}">ログアウト</a> #修正 {% else %} <a class="nav-link mx-3 href={% url 'accounts:login' %}">ログイン</a> #修正 {% endif %} </div>
会員登録機能の実装
まずはaccounts/views.pyに以下の記述をします。
from django.shortcuts import render from django.contrib.auth.models import User from django.urls import reverse_lazy from django.views.generic import CreateView from .forms import SignupForm # Create your views here. class SignupView(CreateView): model = User form_class = SignupForm template_name = 'accounts/signup.html' success_url = reverse_lazy('index')
会員登録機能にはDjangoにあるformを利用します。formはmodelと似たようなものでデータを扱うときに利用します。それぞれ以下のような場合に利用します。
- formはデータを保存せずに、ただデータのやり取りをする際
- modelはデータベースのデータを扱う際
今回はformを利用するのでform.pyファイルを作成します。
touch accounts/forms.py
作成したaccounts/forms.pyに以下の記述をします。
from django.contrib.auth.forms import UserCreationForm from django.contrib.auth.models import User class SignupForm(UserCreationForm): class Meta: model = User fields = ('username',)
まず1行目で新しいUserを作成できるformをインポートします。2行目で新しいユーザーが登録された際にUserモデルにデータを追加するためのインポートをします。
次にクラスについて見ます。UserCreationFormというクラスでパスワードの設定とユーザーの登録をすることができます。
UserCreationFormのソースコードにはpassword1とpassword2があり、それぞれ登録と確認用となっています。アカウントを作成するにはユーザーID、パスワード、確認用パスワードが必要になります。
これらを踏まえてhtml記述をしていくことで会員登録機能が完成します。
htmlファイルはaccountsの中にtemplatesを作り、その中に作成していきます。ターミナルで以下を入力します。
mkdir accounts/templates mkdir accounts/templates/accounts
それから会員登録をするためのフォームを動作させるhtmlの記述をします。作成したディレクトリにsignup.htmlを作成します。
touch mkdir accounts/templates/accounts/signup.html
作成したファイルに以下の記述をします。
{% extends 'base.html' %}
{% block title %}アカウント作成{% endblock %}
{% block h1 %}アカウント作成{% endblock %}
{% block content %}
<form method="post" class="p-4 m-4 bglight border border-success rounded form-group">
{% csrf_token %}
<input type="text" name='username' class="form-control mt-4"
placeholder="ユーザーID">
<input type="password" name='password1' class="form-control mt-4"
placeholder="パスワード">
<input type="password" name='password2' class="form-control mt-4"
placeholder="パスワード確認用">
<small class="mb-2 d-block text-start">
パスワードは8文字以上で設定してください
</small>
{% if form.errors %}
<span class="mb-2 small text-danger d-block text-start">
利用できないユーザーIDやパスワードの可能性があります。入力内容を再度ご確認ください
</span>
{% endif %}
<button type="submit" class="btn btn-success m-2">
アカウント作成
</button>
</form>
{% endblock %}
Bootstrapを利用してhtmlの作成をしました。
会員登録にはpassword1とpassword2を使用するように記述し、パスワードの設定の際のエラーも表示できるようにしました。
会員登録機能の確認
では、会員登録ができるかの確認をします。サーバーを立ち上げて127.0.0.1:8000/acounts/signup/にアクセスします。
以下のような画面になっており、適当に入力してアカウント作成を押します。
登録ができれば管理画面で確認します。127.0.0.1:8000/admin/にアクセスします。
ユーザーが登録されています。ここでSTAFF STATUSにチェックが入っているものは管理者権限を持っていて、バツのものは持っていないことを表しています。新たに登録したものはバツのものでしょう。
最後に会員登録の文字情報が表示されるようにtemplates/base.htmlに以下を追加します。
<div class="navbar-nav d-flex flex-row"> {% if request.user.is_authenticated %} <a class="nav-link mx-3 href={% url 'accounts:logout' %}">ログアウト</a> {% else %} <a class="nav-link mx-3 href={% url 'accounts:login' %}">ログイン</a> <a class="nav-link mx-3 href={% url 'accounts:signup' %}">会員登録</a> # 追加 {% endif %} </div>
文字情報を追加しただけなので押しても何も起こりませんが、画面の遷移先は今後実装します。
これで会員登録機能の実装ができました。
おわりに
今回は会員登録機能の追加をしました。ユーザーIDとパスワードで登録することができましたが、この本棚アプリケーションが完成すれば、改良としてgoogleアカウントで登録やログインができるようにします。
