- Djangoでパスワード変更フォームを作成するには？
- フォームのデザインなどをカスタマイズするには？
本記事ではこのような疑問を解決します。
Webアプリケーションにおいて、会員登録機能やログイン機能を実装すると、もれなく考えないといけないのがパスワードです。
また、セキュリティ的にもユーザーのパスワード変更フォームは必須です。
ではDjangoにおけるパスワード変更フォームはどのように作成するのか。
また、フォームのデザインなどはどのようにカスタマイズするのか。
そこで今回はDjangoでパスワード変更フォームを自作する方法を解説していきます。
なお、本記事ではフォームの作成にフォーカスするため、モデルの定義やURLの設定などは省略します。
目次
forms.pyを編集する
まずはforms.pyにて、Formクラスの記述をします。
ここではパスワード変更時に、
「元のパスワードを入力させるパターン」と、
「元のパスワードを入力させないパターン」の2つをご紹介します。
元のパスワードを入力させるパターン
「元のパスワードを入力させるパターン」ではDjangoのPasswordChangeFormクラスを継承します。
from django.contrib.auth.forms import PasswordChangeForm
class MyPasswordChangeForm(PasswordChangeForm):
# テンプレートにおいて表示されるinputタグのカスタマイズは以下のように行う（下は一例）
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['old_password'].widget.attrs['class'] = '【class名】'# classの指定
self.fields['new_password1'].widget.attrs['class'] = '【class名】'
self.fields['new_password2'].widget.attrs['class'] = '【class名】'
self.fields['new_password1'].widget.attrs['placeholder'] = '半角英数字８文字以上'# placeholderの指定
self.fields['new_password2'].widget.attrs['placeholder'] = 'パスワード確認用'元のパスワードを入力させないパターン
「元のパスワードを入力させないパターン」ではDjangoのSetPasswordFormクラスを継承します。
from django.contrib.auth.forms import SetPasswordForm
class MySetPasswordForm(SetPasswordForm):
# テンプレートにおいて表示されるinputタグのカスタマイズは以下のように行う（下は一例）
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['new_password1'].widget.attrs['class'] = '【class名】'# classの指定
self.fields['new_password2'].widget.attrs['class'] = '【class名】'
self.fields['new_password1'].widget.attrs['placeholder'] = '半角英数字８文字以上'# placeholderの指定
self.fields['new_password2'].widget.attrs['placeholder'] = 'パスワード確認用'views.pyを編集する
次にviews.pyにて、処理の記述します。
ここでも以下の2パターンを示します。
元のパスワードを入力させるパターン
from .models import User
from .forms import MyPasswordChangeForm
from django.shortcuts import render, redirect
# パスワード変更フォームを表示する処理
def password_change(request):
template_name = 'password_change.html'
form = MyPasswordChangeForm(user=request.user)
context = {
'form': form,
}
return render(request, template_name, context)
# パスワードの変更を保存する処理
def password_change_post(request):
if request.method == 'POST':
form = MyPasswordChangeForm(request.POST)
if form.is_valid():
form.save()
return redirect('【リダイレクト先】')
元のパスワードを入力させないパターン
from .models import User
from .forms import MySetPasswordForm
from django.shortcuts import render, redirect
# パスワード変更フォームを表示する処理
def password_change(request):
template_name = 'password_change.html'
form = MySetPasswordForm(user=request.user)
context = {
'form': form,
}
return render(request, template_name, context)
# パスワードの変更を保存する処理
def password_change_post(request):
if request.method == 'POST':
form = MySetPasswordForm(request.POST)
if form.is_valid():
form.save()
return redirect('【リダイレクト先】')テンプレートを作成する
最後にテンプレートを作成します。
今回はCSSが考慮外のため、必要最低限のページになります。
デザインなどを反映させたい場合は適宜classやidを追加してください。
元のパスワードを入力させるパターン
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="{% url 'password_change_post' %}" method="POST">
<p>元のパスワード:{{ form.old_password }}</p>
<p>新しいパスワード:{{ form.new_password1 }}</p>
<ul>
<li>ご登録情報に似たパスワードにはできません。</li>
<li>8文字以上32文字以内で設定してください。</li>
<li>よく使われるパスワードにはできません。</li>
<li>数字だけのパスワードにはできません。</li>
</ul>
<p>新しいパスワード（確認用）:{{ form.new_password2 }}</p>
<button>パスワードを変更する</button>{% csrf_token %}
</form>
</body>
</html>元のパスワードを入力させないパターン
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="{% url 'password_change_post' %}" method="POST">
<p>新しいパスワード:{{ form.new_password1 }}</p>
<ul>
<li>ご登録情報に似たパスワードにはできません。</li>
<li>8文字以上32文字以内で設定してください。</li>
<li>よく使われるパスワードにはできません。</li>
<li>数字だけのパスワードにはできません。</li>
</ul>
<p>新しいパスワード（確認用）:{{ form.new_password2 }}</p>
<button>パスワードを変更する</button>{% csrf_token %}
</form>
</body>
</html>まとめ
以上がDjangoでパスワード変更フォームを自作する方法になります。
本記事を参考に、フォーム全体やinputタグをカスタマイズすることでそれぞれのWebアプリケーションに合ったパスワード変更フォームが自作できます。
最後までお読みいただきありがとうございました。
