Implementare il reset password con Parse in React Native

ripristino della password utente per react native introduzione è un dato di fatto che non appena introduci le password in un sistema, gli utenti le dimenticheranno in questi casi, la libreria parse fornisce un modo per consentire loro di ripristinare la password in modo sicuro come per la verifica dell'email, parse ha già un'implementazione pronta per questo, parse user requestpasswordemail parse user requestpasswordemail utilizzando questo metodo, parse gestirà tutti gli aspetti del ripristino della password per te senza problemi prerequisiti per completare questo tutorial, avrai bisogno di un'app react native creata e https //www back4app com/docs/react native/parse sdk/react native sdk completa le guide precedenti in modo da avere una migliore comprensione di https //www back4app com/docs/react native/parse sdk/working with users/react native login obiettivo per aggiungere una funzionalità di reset della password utente a un'app react native utilizzando parse 1 personalizzazione delle email di reset della password prima di chiamare il parse user requestpasswordemail parse user requestpasswordemail metodo, puoi personalizzare il messaggio che il tuo utente riceverà dopo aver richiesto un reset della password accedi al dashboard della tua app, vai su impostazioni >email di verifica e modifica l'oggetto o il messaggio dell'email di reset della password assicurati che il tuo utente riceva un'email contenente istruzioni chiare e che indichi che proviene effettivamente dalla tua applicazione 2 utilizzo di requestpasswordemail chiamare il parse user requestpasswordemail parse user requestpasswordemail metodo richiede solo l'email del tuo account utente come parametro, quindi procedi e aggiungi la seguente funzione alla tua schermata di reset della password ricorda di aggiungere un campo di input per l'email del tuo utente alla tua schermata 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 }; procedi e testa il tuo schermo e componente vedrai un messaggio come questo dopo aver richiesto un'email di reimpostazione della password dovresti aver ricevuto l'email, quindi procedi e controlla la tua casella di posta nota che il messaggio conterrà eventuali modifiche che avevi impostato in precedenza nel tuo cruscotto parse il modulo di reimpostazione della password avrà un aspetto simile a questo questo è tutto, dopo aver cambiato la password in questo modulo, il tuo utente sarà in grado di accedere nuovamente alla tua applicazione 3 creazione di un componente per la richiesta di password come detto prima, dovresti creare un componente contenente la funzione mostrata nel passo 2 e anche un campo di input di testo per l'email del tuo account utente per abilitare il ripristino della password nella tua app ecco un esempio completo di questo componente puoi integrarlo nel progetto di accesso utente delle nostre guide precedenti se lo desideri 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&#x9; 7 export const userresetpassword = () => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 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&#x9; 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&#x9; 7 export const userresetpassword fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 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&#x9; 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 }; questo componente dovrebbe essere visualizzato in uno schermo come questo conclusione alla fine di questa guida, hai imparato come consentire ai tuoi utenti di parse di reimpostare la propria password su react native nella prossima guida, ti mostreremo come eseguire query utili sugli utenti