Реализация сброса пароля пользователя в React с Parse

сброс пароля пользователя для 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 библиотеку цель добавить функцию сброса пароля пользователя в приложение react с использованием parse 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&#x9; 6 export const userpasswordreset = () => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9&#x9; 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&#x9; 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&#x9; 6 export const userpasswordreset fc<{}> = () reactelement => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9&#x9; 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&#x9; 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&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 500px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 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&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 form wrapper { 77 margin top 20px; 78 margin bottom 10px; 79 } 80&#x9; 81 form input { 82 margin bottom 20px; 83 } 84&#x9; 85 form button { 86 width 100%; 87 } этот компонент должен отображаться на экране, как показано ниже заключение в конце этого руководства вы узнали, как позволить вашим пользователям parse сбрасывать свой пароль в react в следующем руководстве мы покажем вам, как выполнять полезные запросы пользователей