Djangoのログイン処理を実装する方法②~パスワード変更~

確認飛行物体

6年前

Djangoのログイン認証パスワード変更処理を実装する方法をご紹介します。

以下の記事の続きです。

Djangoのログイン処理を実装する方法①

1 条件
2 パスワード変更処理
3 参考

条件

Django 2.1.3
Python 3.7.0
PyCharm Professional

パスワード変更処理

パスの追加

パスワード変更処理を使用するためにurls.pyにパスを追加します。

# sample/urls.py

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('django.contrib.auth.urls')), 
    path('password_change/', auth_views.PasswordChangeView.as_view(template_name='password_change_form.html'), name='password_change'), # 追加
    path('password_change/done/', auth_views.PasswordChangeDoneView.as_view(template_name='password_change_done.html'), name='password_change_done'), # 追加
]

テンプレート追加

以下のパスからパスワード変更用のテンプレートをコピーします。

コピー元

\venv\Lib\site-packages\django\contrib\admin\templates\registration\password_change_form.html
\venv\Lib\site-packages\django\contrib\admin\templates\registration\password_change_done.html

コピー先（templatesフォルダの下）

\templates\password_change_form.html
\templates\password_change_done.html

動作確認

manage.py runserverを実行して以下のURLを開きます。
http://127.0.0.1:8000/password_change/
以下のような表示になればOKです。

パスワード変更画面の変更

このままでは管理画面を継承しているため、継承元を変更します。

以下２つのファイルについて「extends」を変更します。

password_change_form.html
password_change_done.html

変更前

{% extends "admin/base_site.html" %}

変更後

{% extends 'base.html' %}

再度動作確認をすると以下のような画面になります。
（画面デザインは適宜変更してください。）

各種リンクの追加

このままでは画面遷移に連続性がないため、各画面にリンクを張ります。

「パスワード変更画面」と「パスワード変更完了画面」にホーム画面へのリンクを張ります。

<!-- templates/password_change_form.html -->
{% extends 'base.html' %}
{% load i18n static %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">{% endblock %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %} {% trans 'Change password' %} / <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
&rsaquo; {% trans 'Password change' %}
</div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}

{% block content %}<div id="content-main">

<form method="post">{% csrf_token %}
<div>
{% if form.errors %}
    <p class="errornote">
    {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
    </p>
{% endif %}


<p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>

<fieldset class="module aligned wide">

<div class="form-row">
    {{ form.old_password.errors }}
    {{ form.old_password.label_tag }} {{ form.old_password }}
</div>

<div class="form-row">
    {{ form.new_password1.errors }}
    {{ form.new_password1.label_tag }} {{ form.new_password1 }}
    {% if form.new_password1.help_text %}
    <div class="help">{{ form.new_password1.help_text|safe }}</div>
    {% endif %}
</div>

<div class="form-row">
{{ form.new_password2.errors }}
    {{ form.new_password2.label_tag }} {{ form.new_password2 }}
    {% if form.new_password2.help_text %}
    <div class="help">{{ form.new_password2.help_text|safe }}</div>
    {% endif %}
</div>

</fieldset>

<div class="submit-row">
    <input type="submit" value="{% trans 'Change my password' %}" class="default">
</div>

</div>
</form></div>

<a href="{% url 'home' %}">トップへ</a>
{% endblock %}

<!-- templates/password_change_done.html -->
{% extends 'base.html' %}
{% load i18n %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %}{% trans 'Change password' %} / <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
&rsaquo; {% trans 'Password change' %}
</div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}
{% block content %}
<p>{% trans 'Your password was changed.' %}</p>

<a href="{% url 'home' %}">トップへ</a>
{% endblock %}

base.htmlにパスワード変更画面へのリンクを張ります。

ログイン状態のときのみパスワード変更画面へのリンクが表示されるようにします。
ついでにログインとログアウトのリンクも追加します。

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}Django Auth Tutorial{% endblock %}</title>
</head>
<body>
  <main>
      {% if user.is_authenticated %}
        <li><a href="{% url 'logout' %}" class="logout">ログアウト</a></li>
            {% if form_name == "password_change" %}
            {% else %}
                <li><a href="{% url 'password_change' %}" class="logout">パスワード変更</a></li>
            {% endif %}
        {% else %}
            <li><a href="{% url 'login' %}" class="login">ログイン</a></li>
        {% endif %}
    {% block content %}
    {% endblock %}
  </main>
</body>
</html>