NO IMAGE

最近在開發一個密碼找回的功能,目前已經實現,現在將實現的步驟記錄下來。

前端-郵箱驗證

使用者進入忘記密碼頁面(localhost:8080/#/FindPwd),將使用者名稱和圖形驗證碼填入。前端對使用者名稱進行後端校驗(呼叫後端的api判斷該使用者名稱是否存在),如果使用者不存在,給出相關提示;如果使用者存在,然後呼叫傳送郵件的後端api(攜帶使用者名稱資訊)

找回密碼頁面

後端-傳送郵件

  1. 後端接收到前端傳送郵件的請求後,通過使用者名稱從資料庫查詢對應的郵箱,傳送郵件(郵件的形式是一些介紹說明和一個前端連結,該連結的形式為
    localhost:8080/#/ResetPwd?token=yP1K8viNMKhv2HfDIPpS8exF21pPdVt8y9LP8AklXv78jPMImA4V7dJ5EMw1vJM7LcZ7BfDpXE1GHhdMga3r0A==)
    其中localhost:8080為前端的ip和埠,後端可以從http請求頭中的Origin中獲取,這裡用localhost:8080作為示例。而token中攜帶了加密資訊(其中可以包含使用者資訊,用來作為重置密碼頁面的提示內容;其中必須包含使用者id,失效時間等關鍵資訊)。

  2. 傳送郵件後,給前端響應,通知前端郵件是否傳送成功。前端拿到這個結果,相應地給使用者提示(如:“郵件傳送成功,請前往郵箱查收”)

前端-解密連結

使用者點選連結開啟頁面,前端對連結中的token查詢字串進行解密,呼叫後端解密的api,傳入token值,解密可以得到使用者id,失效時間等資訊。前端獲取到失效時間後,與當前時間做對比,如果已經過期,則提示使用者;如果未過期,則展示重置密碼頁面。使用者需要填入新密碼,點選確認,進行密碼重置。此時前端攜帶使用者id和加密過的新密碼傳送重置密碼的請求給後端api,後端返回成功後,前端提示使用者修改成功。

以上就是前後端配合實現密碼找回功能的主要步驟!