React中用Parse实现用户密码重置功能详细指南

7 分

用户密码重置 for react 介绍一旦你在系统中引入密码，用户就会忘记它们，这是一个事实。在这种情况下，parse库提供了一种安全重置密码的方法。与电子邮件验证一样，parse已经为此准备好了实现， parse user requestpasswordemail parse user requestpasswordemail 。通过使用此方法，parse将无缝处理密码重置的所有方面。先决条件要完成本教程，您需要：创建一个react应用并连接到back4app 完成之前的指南，以便更好地理解 parse user类和parse user login方法 https //www back4app com/docs/react/working with users/react user login 如果您想测试/使用本指南提供的屏幕布局，您应该设置 ant design ant design 库。目标为使用parse的react应用添加用户密码重置功能。 1 自定义密码重置邮件在调用 parse user requestpasswordemail parse user requestpasswordemail 方法之前，您可以自定义用户在请求密码重置后收到的消息。登录到您的 parse 应用程序仪表板，转到设置 >验证邮件，并更改您的密码重置邮件主题或消息。确保您的用户会收到一封包含明确说明并表明确实来自您应用程序的电子邮件。 2 使用 requestpasswordemail 调用 parse user requestpasswordemail parse user requestpasswordemail 方法只需要您的用户帐户电子邮件作为参数，因此请继续将以下函数添加到您的密码重置组件中。记得为您的用户电子邮件添加一个文本输入到您的组件中。 javascript 1 const dorequestpasswordreset = async function () { 2 // note that this value come from state variables linked to your text input 3 const emailvalue = email; 4 try { 5 await parse user requestpasswordreset(emailvalue); 6 alert(`success! please check ${email} to proceed with password reset `); 7 return true; 8 } catch(error) { 9 // error can be caused by lack of internet connection 10 alert(`error! ${error}`); 11 return false; 12 } 13 };1 const dorequestpasswordreset = async function () promise\<boolean> { 2 // note that this value come from state variables linked to your text input 3 const emailvalue string = email; 4 try { 5 await parse user requestpasswordreset(emailvalue); 6 alert(`success! please check ${email} to proceed with password reset `); 7 return true; 8 } catch(error any) { 9 // error can be caused by lack of internet connection 10 alert(`error! ${error}`); 11 return false; 12 } 13 }; 继续测试您的组件。在请求密码重置邮件后，您应该已经收到邮件，因此请检查您的收件箱。请注意，消息将包含您之前在 parse 仪表板中设置的任何更改。密码重置表单将如下所示：就是这样，在此表单中更改密码后，您的用户将能够再次登录到您的应用程序。 3 创建密码请求组件如前所述，您应该创建一个包含步骤2中显示的功能的组件，并且还要有一个文本输入字段，用于您的用户帐户电子邮件，以便在您的应用中启用密码重置。以下是该组件的完整示例。如果您愿意，可以将其插入到我们之前指南的用户登录项目中。 userresetpassword js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5	 6 export const userpasswordreset = () => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9	 10 // functions used by the screen components 11 const dorequestpasswordreset = async function () { 12 // note that this value come from state variables linked to your text input 13 const emailvalue = email; 14 try { 15 await parse user requestpasswordreset(emailvalue); 16 alert(`success! please check ${email} to proceed with password reset `); 17 return true; 18 } catch (error) { 19 // error can be caused by lack of internet connection 20 alert(`error! ${error}`); 21 return false; 22 } 23 }; 24	 25 return ( 26 \<div> 27 \<div classname="header"> 28 \<img 29 classname="header logo" 30 alt="back4app logo" 31 src={ 32 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 33 } 34 /> 35 \<p classname="header text bold">{'react on back4app'}\</p> 36 \<p classname="header text">{'user password reset'}\</p> 37 \</div> 38 \<div classname="container"> 39 \<h2 classname="heading">{'request password reset email'}\</h2> 40 \<divider /> 41 \<div classname="form wrapper"> 42 \<input 43 value={email} 44 onchange={(event) => setemail(event target value)} 45 placeholder="your account email" 46 size="large" 47 classname="form input" 48 /> 49 \</div> 50 \<div classname="form buttons"> 51 \<button 52 onclick={() => dorequestpasswordreset()} 53 type="primary" 54 classname="form button" 55 color={'#208aec'} 56 size="large" 57 > 58 request password reset 59 \</button> 60 \</div> 61 \</div> 62 \</div> 63 ); 64 }; userresetpassword tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5	 6 export const userpasswordreset fc<{}> = () reactelement => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9	 10 // functions used by the screen components 11 const dorequestpasswordreset = async function () promise\<boolean> { 12 // note that this value come from state variables linked to your text input 13 const emailvalue string = email; 14 try { 15 await parse user requestpasswordreset(emailvalue); 16 alert(`success! please check ${email} to proceed with password reset `); 17 return true; 18 } catch(error any) { 19 // error can be caused by lack of internet connection 20 alert(`error! ${error}`); 21 return false; 22 } 23 }; 24	 25 return ( 26 \<div> 27 \<div classname="header"> 28 \<img 29 classname="header logo" 30 alt="back4app logo" 31 src={ 32 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 33 } 34 /> 35 \<p classname="header text bold">{'react on back4app'}\</p> 36 \<p classname="header text">{'user password reset'}\</p> 37 \</div> 38 \<div classname="container"> 39 \<h2 classname="heading">{'request password reset email'}\</h2> 40 \<divider /> 41 \<div classname="form wrapper"> 42 \<input 43 value={email} 44 onchange={(event) => setemail(event target value)} 45 placeholder="your account email" 46 size="large" 47 classname="form input" 48 /> 49 \</div> 50 \<div classname="form buttons"> 51 \<button 52 onclick={() => dorequestpasswordreset()} 53 type="primary" 54 classname="form button" 55 color={'#208aec'} 56 size="large" 57 > 58 request password reset 59 \</button> 60 \</div> 61 \</div> 62 \</div> 63 ); 64 }; 将这些类添加到您的 app css app css 文件中，以完全渲染组件布局元素： app css 1 @import ' antd/dist/antd css'; 2	 3 app { 4 text align center; 5 } 6	 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12	 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20	 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30	 31 p { 32 margin 0; 33 } 34	 35 body { 36 margin 0; 37 background color #fff; 38 } 39	 40 container { 41 width 100%; 42 max width 500px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47	 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53	 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59	 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66	 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71	 72 heading { 73 font size 22px; 74 } 75	 76 form wrapper { 77 margin top 20px; 78 margin bottom 10px; 79 } 80	 81 form input { 82 margin bottom 20px; 83 } 84	 85 form button { 86 width 100%; 87 } 该组件应在屏幕上呈现如下：结论在本指南的最后，您学习了如何允许您的 parse 用户在 react 中重置他们的密码。在下一个指南中，我们将向您展示如何执行有用的用户查询。