Réinitialiser le mot de passe avec Parse dans React Native

9 min

réinitialisation du mot de passe utilisateur pour react native introduction c'est un fait qu'aussitôt que vous introduisez des mots de passe dans un système, les utilisateurs les oublieront dans de tels cas, la bibliothèque parse fournit un moyen de leur permettre de réinitialiser leur mot de passe en toute sécurité comme pour la vérification par e mail, parse a déjà une implémentation prête pour cela, parse user requestpasswordemail parse user requestpasswordemail en utilisant cette méthode, parse gérera tous les aspects de la réinitialisation du mot de passe pour vous sans effort prérequis pour compléter ce tutoriel, vous aurez besoin de une application react native créée et https //www back4app com/docs/react native/parse sdk/react native sdk complétez les guides précédents afin d'avoir une meilleure compréhension de https //www back4app com/docs/react native/parse sdk/working with users/react native login objectif pour ajouter une fonctionnalité de réinitialisation de mot de passe utilisateur à une application react native utilisant parse 1 personnaliser les e mails de réinitialisation de mot de passe avant d'appeler le parse user requestpasswordemail parse user requestpasswordemail méthode, vous pouvez personnaliser le message que votre utilisateur recevra après avoir demandé une réinitialisation de mot de passe connectez vous à votre tableau de bord d'application, allez dans paramètres >e mails de vérification et changez le sujet ou le message de votre e mail de réinitialisation de mot de passe assurez vous que votre utilisateur recevra un e mail contenant des instructions claires et indiquant qu'il provient bien de votre application 2 utiliser requestpasswordemail appeler le parse user requestpasswordemail parse user requestpasswordemail méthode nécessite uniquement l'e mail de votre compte utilisateur comme paramètre, alors allez y et ajoutez la fonction suivante à votre écran de réinitialisation de mot de passe n'oubliez pas d'ajouter un champ de texte pour l'e mail de votre utilisateur à votre écran 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 }; allez y et testez votre écran et votre composant vous verrez un message comme celui ci après avoir demandé un email de réinitialisation de mot de passe vous devriez avoir reçu l'email, alors allez y et vérifiez votre boîte de réception notez que le message contiendra tous les changements que vous aviez configurés auparavant dans votre tableau de bord parse le formulaire de réinitialisation de mot de passe ressemblera à ceci c'est tout, après avoir changé le mot de passe dans ce formulaire, votre utilisateur pourra se reconnecter à votre application 3 création d'un composant de demande de mot de passe comme mentionné précédemment, vous devez créer un composant contenant la fonction montrée à l'étape 2 et également un champ de saisie de texte pour l'email de votre compte utilisateur afin de permettre la réinitialisation du mot de passe dans votre application voici un exemple complet de ce composant vous pouvez l'intégrer dans le projet de connexion utilisateur de nos précédents guides si vous le souhaitez 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 }; ce composant devrait s'afficher sur un écran comme ceci conclusion à la fin de ce guide, vous avez appris comment permettre à vos utilisateurs parse de réinitialiser leur mot de passe sur react native dans le prochain guide, nous vous montrerons comment effectuer des requêtes utilisateur utiles