การใช้ไลบรารี Parse สำหรับรีเซ็ตรหัสผ่านใน React

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