การรีเซ็ตรหัสผ่านใน React Native โดยใช้ Parse SDK

8 นาที

การรีเซ็ตรหัสผ่านผู้ใช้สำหรับ react native บทนำ เป็นข้อเท็จจริงว่าเมื่อใดก็ตามที่คุณแนะนำรหัสผ่านเข้าสู่ระบบ ผู้ใช้จะลืมมัน ในกรณีเช่นนี้ ไลบรารี parse มีวิธีการให้พวกเขารีเซ็ตรหัสผ่านของตนอย่างปลอดภัย เช่นเดียวกับการตรวจสอบอีเมล parse มีการใช้งานที่พร้อมสำหรับสิ่งนี้แล้ว parse user requestpasswordemail parse user requestpasswordemail โดยการใช้วิธีนี้ parse จะจัดการทุกด้านของการรีเซ็ตรหัสผ่านให้คุณอย่างราบรื่น ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างและ เชื่อมต่อกับ back4app ทำตามคู่มือก่อนหน้านี้เพื่อให้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับ คลาสผู้ใช้ parse เป้าหมาย เพื่อเพิ่มฟีเจอร์การรีเซ็ตรหัสผ่านผู้ใช้ในแอป react native โดยใช้ parse 1 ปรับแต่งอีเมลการรีเซ็ตรหัสผ่าน ก่อนที่จะเรียกใช้ parse user requestpasswordemail parse user requestpasswordemail เมธอด คุณสามารถปรับแต่งข้อความที่ผู้ใช้ของคุณจะได้รับหลังจากขอรีเซ็ตรหัสผ่าน เข้าสู่ระบบในแดชบอร์ดแอปของคุณ ไปที่การตั้งค่า >อีเมลการตรวจสอบ และเปลี่ยนหัวข้อหรือข้อความของอีเมลการรีเซ็ตรหัสผ่านของคุณ ให้แน่ใจว่าผู้ใช้ของคุณจะได้รับอีเมลที่มีคำแนะนำที่ชัดเจนและระบุว่ามาจากแอปพลิเคชันของคุณจริงๆ 2 การใช้ requestpasswordemail การเรียกใช้ parse user requestpasswordemail parse user requestpasswordemail เมธอดต้องการเพียงอีเมลบัญชีผู้ใช้ของคุณเป็นพารามิเตอร์ ดังนั้นไปข้างหน้าและเพิ่มฟังก์ชันต่อไปนี้ในหน้าจอรีเซ็ตรหัสผ่านของคุณ อย่าลืมเพิ่มช่องกรอกข้อความสำหรับอีเมลของผู้ใช้ในหน้าจอของคุณ 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 }; ไปข้างหน้าและทดสอบหน้าจอและส่วนประกอบของคุณ คุณจะเห็นข้อความแบบนี้หลังจากขออีเมลรีเซ็ตรหัสผ่าน คุณควรได้รับอีเมลแล้ว ดังนั้นไปข้างหน้าและตรวจสอบกล่องขาเข้าของคุณ โปรดทราบว่าข้อความจะมีการเปลี่ยนแปลงใด ๆ ที่คุณได้ตั้งค่าไว้ก่อนหน้านี้ในแดชบอร์ด parse ของคุณ แบบฟอร์มรีเซ็ตรหัสผ่านจะมีลักษณะเช่นนี้ แค่นั้นแหละ หลังจากเปลี่ยนรหัสผ่านในแบบฟอร์มนี้ ผู้ใช้ของคุณจะสามารถเข้าสู่ระบบอีกครั้งในแอปพลิเคชันของคุณ 3 สร้างส่วนประกอบการขอรหัสผ่าน ตามที่กล่าวไว้ก่อนหน้านี้ คุณควรสร้างส่วนประกอบที่มีฟังก์ชันที่แสดงในขั้นตอนที่ 2 และยังมีฟิลด์ป้อนข้อความสำหรับอีเมลบัญชีผู้ใช้ของคุณเพื่อเปิดใช้งานการรีเซ็ตรหัสผ่านในแอปของคุณ นี่คือตัวอย่างที่สมบูรณ์ของส่วนประกอบนี้ คุณสามารถนำไปใช้ในโครงการเข้าสู่ระบบผู้ใช้ในคู่มือก่อนหน้านี้ของเราได้หากคุณต้องการ 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 }; ส่วนประกอบนี้ควรแสดงในหน้าจอแบบนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการอนุญาตให้ผู้ใช้ parse ของคุณรีเซ็ตรหัสผ่านใน react native ในคู่มือต่อไป เราจะแสดงวิธีการทำการค้นหาผู้ใช้ที่มีประโยชน์