Passwortzurücksetzung mit Parse in React Native

benutzerpasswortzurücksetzung für react native einführung es ist eine tatsache, dass benutzer ihre passwörter vergessen, sobald sie passwörter in ein system einführen in solchen fällen bietet die parse bibliothek eine möglichkeit, ihnen zu ermöglichen, ihr passwort sicher zurückzusetzen wie bei der e mail verifizierung hat parse bereits eine implementierung dafür bereit, parse user requestpasswordemail parse user requestpasswordemail durch die verwendung dieser methode kümmert sich parse nahtlos um alle aspekte der passwortzurücksetzung für sie voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react native app, die erstellt und mit back4app verbunden ist schließen sie die vorherigen anleitungen ab, damit sie ein besseres verständnis von der parse benutzerklasse ziel um eine benutzer passwortzurücksetzfunktion zu einer react native app mit parse hinzuzufügen 1 anpassen von passwortzurücksetz e mails bevor sie die parse user requestpasswordemail parse user requestpasswordemail methode aufrufen, können sie die nachricht anpassen, die ihr benutzer nach der anforderung eines passwortzurücksetzens erhält melden sie sich bei ihrem app dashboard an, gehen sie zu einstellungen >verifizierungs e mails und ändern sie den betreff oder die nachricht ihrer passwortzurücksetz e mail stellen sie sicher, dass ihr benutzer eine e mail erhält, die klare anweisungen enthält und darauf hinweist, dass sie tatsächlich von ihrer anwendung stammt 2 verwendung von requestpasswordemail der aufruf der parse user requestpasswordemail parse user requestpasswordemail methode erfordert nur die e mail adresse ihres benutzerkontos als parameter, also fügen sie die folgende funktion zu ihrem passwortzurücksetzbildschirm hinzu denken sie daran, ein texteingabefeld für die e mail ihres benutzers zu ihrem bildschirm hinzuzufügen 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 }; gehen sie voran und testen sie ihren bildschirm und ihre komponente sie werden eine nachricht wie diese sehen, nachdem sie eine e mail zur passwortzurücksetzung angefordert haben sie sollten die e mail erhalten haben, also überprüfen sie ihr postfach beachten sie, dass die nachricht alle änderungen enthalten wird, die sie zuvor in ihrem parse dashboard eingerichtet haben das passwortzurücksetzungsformular wird so aussehen das war's, nachdem sie das passwort in diesem formular geändert haben, kann ihr benutzer sich wieder in ihre anwendung einloggen 3 erstellen einer passwortanforderungskomponente wie bereits erwähnt, sollten sie eine komponente erstellen, die die in schritt 2 gezeigte funktion enthält, sowie ein texteingabefeld für die e mail ihres benutzerkontos, um die passwortzurücksetzung in ihrer app zu ermöglichen hier ist ein vollständiges beispiel für diese komponente sie können es in unser vorheriges benutzeranmeldeprojekt einfügen, wenn sie möchten 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 }; diese komponente sollte auf einem bildschirm wie diesem gerendert werden fazit am ende dieses leitfadens haben sie gelernt, wie sie ihren parse benutzern das zurücksetzen ihres passworts in react native ermöglichen im nächsten leitfaden zeigen wir ihnen, wie sie nützliche benutzerabfragen durchführen