rest-auth でアカウント登録とパスワードリセットを作成したのを適当に書き残しておこうと思ふ

2021年10月31日

色々試していたのですが個人的にはちょっと扱いにくく、結果的廃止としたので細かい使い方はまとめておりませんが、備忘録として残しておこうと思います。

参考

config/urls.py

from accounts import views as accounts_views
urlpatterns = [
    ...
    # rest-auth
    path('rest-auth/', include('rest_auth.urls')),
    path('rest-auth/registration/', include('rest_auth.registration.urls')),
    # メールに付与されてる URL で、クリックするとアカウントを有効化する「アカウント有効化」画面を開く。
    path('account-confirm-email/(?P<key>[-:\w]+)/$', TemplateView.as_view(), name='account_confirm_email'),
    # メールに付与されている URL で、クリックするとパスワードを 2 回入力する「パスワード再設定」画面を開く。
    path('password/reset/confirm/<uidb64>/<token>/', accounts_views.PasswordResetConfirm.as_view(), name='password_reset_confirm'),
    # パスワード再設定完了の「「パスワード再設定完了」画面を開く。
    path('password_reset/complete/', accounts_views.PasswordResetComplete.as_view(), name='password_reset_complete'),
    ...
]

accounts/views.py

from django.shortcuts import render
from django.contrib.auth.views import (
    LoginView, LogoutView, PasswordChangeView, PasswordChangeDoneView,
    PasswordResetView, PasswordResetDoneView, PasswordResetConfirmView, PasswordResetCompleteView
)
from django.urls import reverse_lazy
class PasswordResetConfirm(PasswordResetConfirmView):
    """新パスワード入力ページ"""
    success_url = reverse_lazy('password_reset_complete')
    template_name = 'account/password_reset_confirm.html'
class PasswordResetComplete(PasswordResetCompleteView):
    """新パスワード設定しましたページ"""
    template_name = 'account/password_reset_complete.html'

account/password_reset_confirm.html

<div class="modal">
    <div class="modal-window">
        <div class="modal-content">
            <div class="title-area">
                <h2>パスワード設定</h2>
            </div>
            {% if validlink %}
            <form method="post">{% csrf_token %}
                <div class="input-area">
                    <div class="input-area-wrapper">
                        <p>新しいパスワードを設定してください。</p>
                        <input type="hidden" autocomplete="username" value="{{ form.user.get_username }}">
                        <div class="form-row field-password1">
                            <input class="password" placeholder="password" type="password" name="new_password1" autocomplete="new-password" required="" id="id_new_password1">
                        </div>
                        <div class="form-row field-password2">
                            <input class="password" placeholder="password confirm" type="password" name="new_password2" autocomplete="new-password" required="" id="id_new_password2">
                        </div>
                    </div>
                </div>
                <div class="text-area">
                    <div class="text-area-wrapper">
                        {% if form.errors %}
                        {% for errors in form.errors.values %}
                            {% for error in errors %}
                                <div class="danger">{{ error }}</div>
                            {% endfor %}
                        {% endfor %}
                        {% endif %}
                    </div>
                </div>
                <div>
                    <div>
                        <div class="button-area">
                            <div class="button-area-wrapper">
                                <button class="positive" type="submit" value="パスワードを変更する">設定する</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            {% else %}
            <div class="input-area">
                <div class="input-area-wrapper">
                <p>パスワードリセットリンクが無効でした。</p>
                <p>既に使用されている可能性があります。</p>
                <p>新しいパスワードのリセットをリクエストして下さい。</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

account/password_reset_complete.html

<div class="modal">
    <div class="modal-window">
        <div class="modal-content">
            <div class="title-area">
                <h2>パスワード再設定完了</h2>
            </div>
            <div class="text-area">
                <div class="text-area-wrapper">
                    <p>パスワードが再設定されました。</p>
                    <p>ログインして下さい。</p>
                </div>
            </div>
            <div class="button-area">
                <div class="button-area-wrapper">
                    <button class="button positive" onclick='location.href="{{ login_url }}"'>ログインページ</button>
                </div>
            </div>
        </div>
    </div>
</div>

アカウント作成時のリクエストを送信

...
this.axios.post(
    "/rest-auth/registration/", this.requestJson, config
).then((response) => {
...

パスワードリセット時のリクエストを送信

...
this.axios.post(
    "/rest-auth/password/reset/",this.requestJson, config
).then((response) => {
...

2021年10月31日