React-Komponenten für Passwort-Reset mit Parse

benutzerpasswortzurücksetzung für react 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 app erstellt und mit back4app verbunden vervollständigen sie den vorherigen leitfaden, damit sie ein besseres verständnis von der parse user klasse und der parse user login methode https //www back4app com/docs/react/working with users/react user login wenn sie das bildschirmlayout verwenden/testen möchten, das in diesem leitfaden bereitgestellt wird, sollten sie die ant design ant design bibliothek ziel um eine funktion zur zurücksetzung des benutzerpassworts zu einer react app mit parse hinzuzufügen 1 anpassen von passwortzurücksetzungs 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 parse app dashboard an, gehen sie zu einstellungen >verifizierungs e mails und ändern sie den betreff oder die nachricht ihrer passwortzurücksetzungs 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ücksetzungs komponenten hinzu denken sie daran, ein texteingabefeld für die e mail adresse ihres benutzers zu ihrer komponente hinzuzufügen 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 }; testen sie ihre komponente nachdem sie eine e mail zur passwortzurücksetzung angefordert haben, sollten sie die e mail erhalten haben, also überprüfen sie ihren posteingang beachten sie, dass die nachricht alle änderungen enthalten wird, die sie zuvor in ihrem parse dashboard vorgenommen haben das passwort zurücksetzformular sieht folgendermaßen aus 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 das benutzeranmeldeprojekt unseres vorherigen leitfadens einfügen, wenn sie möchten 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 }; fügen sie diese klassen zu ihrer app css app css datei hinzu, um die layout elemente der komponente vollständig darzustellen 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 } diese komponente sollte auf einem bildschirm wie diesem gerendert werden fazit am ende dieses leitfadens haben sie gelernt, wie sie ihren parse benutzern erlauben, ihr passwort in react zurückzusetzen im nächsten leitfaden zeigen wir ihnen, wie sie nützliche benutzerabfragen durchführen