七、找回密碼功能

1、找回密碼頁面配置

　　將找回密碼頁面forgetpwd.html前端檔案拷貝到專案的templates資料夾內。

　　然後修改註冊頁面register.html初始檔案中的靜態檔案訪問路徑，修改成{% static '靜態檔案路徑' %}的形式。

2、後端找回密碼介面

2.1 編寫找回密碼介面

　　在users/form.py檔案中編寫form表單驗證的程式碼：

1 class ForgetPwdForm(forms.Form):
2     """找回密碼錶單驗證"""
3     email= forms.EmailField(required=True)
 
4     captcha = CaptchaField(error_messages={'invalid': '驗證碼錯誤'})

　　然後在users/views.py檔案中編寫找回密碼的介面：

1 class ForgetPwdView(View):
2     """找回密碼"""
3     def get(self, request):
4         forget_form = ForgetPwdForm()
5         return render(request, 'forgetpwd.html', {'forget_form': forget_form})

　　最後配置找回密碼的url：

1 from users.views import ForgetPwdView
2 
3 urlpatterns = [
4     path('forget/', ForgetPwdView.as_view(), name='forget_pwd'),  # 找回密碼
5 ]

2.2 前端頁面配置

　　首先在login.html中修改找回密碼的url：

　　然後修改找回頁面驗證碼圖片顯示的問題：

 2.3 傳送找回密碼郵件

　　在utils/email_sendl.py檔案中新增找回密碼的郵件：

1     if
 
 send_type == 'forget':
2         email_title = '知能網找回密碼連結'
3         email_body = '請點選下面的連結找回你的密碼：http://127.0.0.1:8000/reset/{}'.format(code)
4 
5         # 傳送郵件
6         send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
7         if send_status:
8             pass

　　在找回密碼頁面點選提交後，傳送找回密碼郵件。

2.4 完善找回密碼介面

 1 class ForgetPwdView(View):
 2     """找回密碼"""
 3     def get(self, request):
 4         forget_form = ForgetPwdForm()
 5         return render(request, 'forgetpwd.html', {'forget_form': forget_form})
 6 
 7     def post(self, request):
 8         forget_form = ForgetPwdForm(request.POST)
 9         if forget_form.is_valid():
10             # form驗證成功，獲取郵箱
11             email = request.POST.get('email', None)
12 
13             # 傳送郵件
14             send_register_email(email, 'forget')
15             return render(request, 'send_success.html')
16         else:
17             return render(request, 'forgetpwd.html', {'forget_form': forget_form})

　　介面完善之後前端的forgetpwd.html還需要修改其中的幾個地方：

　　然後現在就可以測試輸入郵箱提交之後是否傳送了找回密碼的郵件。

2.5 重置密碼

　　首先將修改密碼的password_reset.html頁面放到templates下。

　　在找回密碼的郵件中點選找回密碼的連結，進入修改密碼的頁面，首先需要編寫重置密碼（get方法獲取重置密碼頁面）的介面：

 1 class ResetView(View):
 2     """重置密碼（get）方法"""
 3     def get(self, request, active_code):
 4         # 從資料庫中獲取所有的驗證碼記錄
 5         all_records = EmailVerifyRecord.objects.filter(code=active_code)
 6 
 7         if all_records:
 8             for record in all_records:
 9                 # 獲取對應的郵箱， 返回重置密碼的頁面
10                 email = record.email
11                 return render(request, 'password_reset.html', {'email': email})
12             else:
13                 return render(request, 'active_fail.html')
14 
15         return render(request, 'login.html')

　　然後配置找回密碼連結的url：

1 from users.views import ResetView
2 
3 urlpatterns = [
4     re_path('reset/(?P<active_code>.*)/', ResetView.as_view(), name='reset_pwd')  # 找回密碼連結
5 ]

　　現在點選找回密碼的連結就可以進入重置密碼的頁面。

　　現在開始編寫重置密碼頁面的form表單驗證的程式碼，在form.py中加入重置密碼錶單驗證：

1 class ModifyPwdForm(forms.Form):
2     """重置密碼錶單驗證"""
3     password1 = forms.CharField(required=True, min_length=5)
4     password2 = forms.CharField(required=True, min_length=5)

　　然後編寫重置密碼的介面：

 1 class ModifyPwdView(View):
 2     """重置密碼"""
 3     def post(self, request):
 4         modify_form = ModifyPwdForm(request.POST)
 5         if modify_form.is_valid():
 6             # 從請求中獲取密碼和郵箱
 7             pwd1 = request.POST.get('password1', '')
 8             pwd2 = request.POST.get('password2', '')
 9             email = request.POST.get('email', '')
10 
11             # 如果兩次密碼不一致，返回錯誤資訊
12             if pwd1 != pwd2:
13                 return render(request, 'password_reset.html', {'email': email, 'msg': '密碼不一致'})
14 
15             # 修改資料庫中的密碼
16             user = UserProfile.objects.get(email=email)
17             user.password = make_password(pwd2)
18             user.save()
19 
20             return render(request, 'login.html')
21         else:
22             email = request.POST.get('email', '')
23             return render(request, 'password_reset.html', {'email': email, 'modify_form': modify_form})

　　在urls中配置重置密碼的url：

1 from users.views import ModifyPwdView
2 
3 urlpatterns = [
4     path('modify_pwd/', ModifyPwdView.as_view(), name='modify_pwd'),  # 重置密碼
5 ]

　　然後修改password_reset.html頁面的一些其他需要修改的地方：