Сброс пароля в React Native с использованием Parse SDK

9 мин

сброс пароля пользователя для react native введение это факт, что как только вы вводите пароли в систему, пользователи будут их забывать в таких случаях библиотека parse предоставляет способ безопасно сбросить пароль как и с проверкой электронной почты, у parse уже есть готовая реализация для этого, parse user requestpasswordemail parse user requestpasswordemail используя этот метод, parse будет обрабатывать все аспекты сброса пароля для вас без проблем предварительные требования чтобы завершить этот учебник, вам потребуется приложение react native, созданное и подключенное к back4app пройдите предыдущие руководства, чтобы лучше понять класс пользователя parse цель чтобы добавить функцию сброса пароля пользователя в приложение react native с использованием parse 1 настройка писем для сброса пароля перед вызовом parse user requestpasswordemail parse user requestpasswordemail метода вы можете настроить сообщение, которое получит ваш пользователь после запроса сброса пароля войдите в панель управления вашим приложением, перейдите в настройки >письма для проверки и измените тему или сообщение письма для сброса пароля убедитесь, что ваш пользователь получит письмо с четкими инструкциями и указанием на то, что оно действительно от вашего приложения 2 использование requestpasswordemail вызов parse user requestpasswordemail parse user requestpasswordemail метода требует только адрес электронной почты вашей учетной записи пользователя в качестве параметра, поэтому добавьте следующую функцию на экран сброса пароля не забудьте добавить текстовое поле для электронной почты вашего пользователя на экран javascript 1 const douserpasswordreset = async function () { 2 // note that this value come from state variables linked to your text input 3 const emailvalue = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 };1 const douserpasswordreset = async function () promise\<boolean> { 2 // note that this value come from state variables linked to your text input 3 const emailvalue string = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error object) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 }; продолжайте и протестируйте свой экран и компонент вы увидите сообщение, подобное этому, после запроса на сброс пароля вы должны были получить электронное письмо, поэтому проверьте свой почтовый ящик обратите внимание, что сообщение будет содержать любые изменения, которые вы настроили ранее в своей панели управления parse форма сброса пароля будет выглядеть так вот и все, после изменения пароля в этой форме ваш пользователь сможет снова войти в ваше приложение 3 создание компонента запроса пароля как уже упоминалось, вы должны создать компонент, содержащий функцию, показанную на шаге 2, а также текстовое поле для ввода электронной почты вашего пользователя, чтобы включить сброс пароля в вашем приложении вот полный пример этого компонента вы можете подключить его к проекту входа пользователя из наших предыдущих руководств, если хотите userresetpassword js 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6	 7 export const userresetpassword = () => { 8 const navigation = usenavigation(); 9	 10 // your state variable 11 const \[email, setemail] = usestate(''); 12	 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33	 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; userresetpassword tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6	 7 export const userresetpassword fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9	 10 // your state variable 11 const \[email, setemail] = usestate(''); 12	 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue string = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error object) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33	 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; этот компонент должен отображаться на экране, как этот заключение в конце этого руководства вы узнали, как позволить вашим пользователям parse сбрасывать свои пароли в react native в следующем руководстве мы покажем вам, как выполнять полезные запросы пользователей