Implementasi Fitur Reset Kata Sandi di React dengan Parse

reset kata sandi pengguna untuk react pendahuluan ini adalah fakta bahwa segera setelah anda memperkenalkan kata sandi ke dalam sistem, pengguna akan melupakannya dalam kasus seperti itu, pustaka parse menyediakan cara untuk membiarkan mereka mengatur ulang kata sandi mereka dengan aman seperti dengan verifikasi email, parse sudah memiliki implementasi yang siap untuk ini, parse user requestpasswordemail parse user requestpasswordemail dengan menggunakan metode ini, parse akan menangani semua aspek pengaturan ulang kata sandi untuk anda tanpa masalah prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react yang dibuat dan terhubung ke back4app selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang kelas parse user dan metode parse user login https //www back4app com/docs/react/working with users/react user login jika anda ingin menguji/menggunakan tata letak layar yang disediakan oleh panduan ini, anda harus menyiapkan ant design ant design pustaka tujuan untuk menambahkan fitur reset kata sandi pengguna ke aplikasi react menggunakan parse 1 menyesuaikan email reset kata sandi sebelum memanggil parse user requestpasswordemail parse user requestpasswordemail metode, anda dapat menyesuaikan pesan yang akan diterima pengguna anda setelah meminta reset kata sandi masuk ke dasbor aplikasi parse anda, pergi ke pengaturan >email verifikasi dan ubah subjek atau pesan email reset kata sandi anda pastikan bahwa pengguna anda akan menerima email yang berisi instruksi yang jelas dan menunjukkan bahwa itu memang dari aplikasi anda 2 menggunakan requestpasswordemail memanggil parse user requestpasswordemail parse user requestpasswordemail metode hanya memerlukan email akun pengguna anda sebagai parameter, jadi silakan tambahkan fungsi berikut ke komponen reset kata sandi anda ingat untuk menambahkan input teks untuk email pengguna anda ke komponen anda 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 }; silakan uji komponen anda setelah meminta email reset kata sandi, anda seharusnya telah menerima email tersebut, jadi periksa kotak masuk anda perhatikan bahwa pesan tersebut akan berisi perubahan yang telah anda atur sebelumnya di dasbor parse anda formulir reset kata sandi akan terlihat seperti ini itu saja, setelah mengubah kata sandi di formulir ini, pengguna anda akan dapat masuk kembali ke aplikasi anda 3 membuat komponen permintaan kata sandi seperti yang telah disebutkan sebelumnya, anda harus membuat komponen yang berisi fungsi yang ditunjukkan pada langkah 2 dan juga bidang input teks untuk email akun pengguna anda untuk memungkinkan pengaturan ulang kata sandi di aplikasi anda berikut adalah contoh lengkap dari komponen ini anda dapat menghubungkannya dalam proyek login pengguna panduan sebelumnya jika anda mau 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 }; tambahkan kelas ini ke app css app css file anda untuk sepenuhnya merender elemen tata letak komponen 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 } komponen ini harus dirender di layar seperti ini kesimpulan di akhir panduan ini, anda telah belajar bagaimana cara membiarkan pengguna parse anda mereset kata sandi mereka di react di panduan berikutnya, kami akan menunjukkan kepada anda cara melakukan kueri pengguna yang berguna