Implementasi Reset Kata Sandi Menggunakan Parse di React Native

9 mnt

reset kata sandi pengguna untuk react native 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 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 hambatan prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan https //www back4app com/docs/react native/parse sdk/react native sdk selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang https //www back4app com/docs/react native/parse sdk/working with users/react native login tujuan untuk menambahkan fitur reset kata sandi pengguna ke aplikasi react native 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 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 benar benar 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 layar reset kata sandi anda ingat untuk menambahkan input teks untuk email pengguna anda ke layar anda 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 }; silakan uji layar dan komponen anda anda akan melihat pesan seperti ini setelah meminta email reset kata sandi anda seharusnya sudah menerima email tersebut, jadi silakan periksa kotak masuk anda perhatikan bahwa pesan tersebut akan berisi perubahan yang telah anda atur sebelumnya di dasbor parse anda form 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 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, {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 }; 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 native di panduan berikutnya, kami akan menunjukkan kepada anda cara melakukan kueri pengguna yang berguna