[Mobilar] 04 - Multiple Users: email and password reset

Ref: Python Django Tutorial: Full-Featured Web App Part 12 - Email and Password Reset

注册的方法和设计技巧。

 

 

原生方案

一、流程

大概会涉及到几个步骤。

• 第一步、填写邮箱

文件 users/password_reset.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Reset Password</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Request Password Reset</button>
            </div>
        </form>
    </div>
{% endblock content %}

 

• 第二步、确认已发送

这里需要提前注册 一个 google账户，使用其对应的服务。

文件 settings.py

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER     = os.environ.get('EMAIL_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')

文件 users/password_reset_done.html

{% extends "blog/base.html" %}
{% block content %}
    <div class="alert alert-info">
        An email has been sent with instructions to reset your password
    </div>
{% endblock content %}

 

• 第三步、修改密码

 

点击链接跳转到 “密码重置” 界面。注意下面的地址栏，<uidb64>保留，<token>消失，变为了 set-password/。

文件 password_reset_confirm.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Reset Password</legend>
                {{ form|crispy }}　　# <---- 可见，中间的部分是系统默认的 一个小组件，在此处一行代码搞定了
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Reset Password</button>
            </div>
        </form>
    </div>
{% endblock content %}

 

• 第四步、密码修改成功

文件 password_reset_complete.html

{% extends "blog/base.html" %}
{% block content %}
    <div class="alert alert-info">
        Your password has been set.
    </div>
    <a href="{% url 'login' %}">Sign In Here</a>
{% endblock content %}

 

 

二、路由

根据以上流程，再设置匹配的路由，如下。

文件 ./django_project/urls.py

urlpatterns = [
    path('admin/',    admin.site.urls),
    path('register/', user_views.register, name='register'),
    path('profile/',  user_views.profile,  name='profile'),
    path('login/',    auth_views.LoginView.as_view(template_name='users/login.html'),   name='login'),
    path('logout/',   auth_views.LogoutView.as_view(template_name='users/logout.html'), name='logout'),

    path('password-reset/',                          auth_views.PasswordResetView.as_view(         template_name='users/password_reset.html' ),          name='password_reset'),
    path('password-reset/done/',                     auth_views.PasswordResetDoneView.as_view(     template_name='users/password_reset_done.html' ),     name='password_reset_done'),
    path('password-reset-confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(  template_name='users/password_reset_confirm.html' ),  name='password_reset_confirm'),
    path('password-reset-complete/',                 auth_views.PasswordResetCompleteView.as_view( template_name='users/password_reset_complete.html' ), name='password_reset_complete'),

    path('', include('blog.urls')),
]

 

 

 

AWS Cognito 方案

 

 /* implement */

 

 未来进一步需要考虑的，替代“原生方案”。