Réinitialisation de mot de passe Parse avec React pour devs

réinitialisation du mot de passe utilisateur pour react 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 de manière transparente prérequis pour compléter ce tutoriel, vous aurez besoin de une application react créée et connectée à back4app complétez le guide précédent afin d'avoir une meilleure compréhension de la classe parse user et la méthode parse user login https //www back4app com/docs/react/working with users/react user login si vous souhaitez tester/utiliser la mise en page de l'écran fournie par ce guide, vous devez configurer la bibliothèque ant design bibliothèque ant design objectif ajouter une fonctionnalité de réinitialisation de mot de passe utilisateur à une application react utilisant parse 1 personnaliser les e mails de réinitialisation de mot de passe avant d'appeler la 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 de l'application parse, 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 la 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 composant de réinitialisation de mot de passe n'oubliez pas d'ajouter un champ de saisie de texte pour l'e mail de votre utilisateur à votre composant 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 }; allez y et testez votre composant après avoir demandé un e mail de réinitialisation de mot de passe, vous devriez avoir reçu l'e mail, alors vérifiez votre boîte de réception notez que le message contiendra toutes les modifications que vous aviez configurées auparavant dans votre tableau de bord parse le formulaire de réinitialisation du 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 notre précédent guide si vous le souhaitez 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 }; ajoutez ces classes à votre app css app css fichier pour rendre complètement les éléments de mise en page du composant 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 } ce composant devrait s'afficher sur un écran comme celui ci conclusion à la fin de ce guide, vous avez appris comment permettre à vos utilisateurs parse de réinitialiser leur mot de passe sur react dans le prochain guide, nous vous montrerons comment effectuer des requêtes utilisateur utiles