ตั้งค่าการตรวจสอบอีเมลใน React Native ด้วย Parse SDK

การตรวจสอบอีเมลผู้ใช้สำหรับ react native บทนำ การมีแอปมือถือที่อนุญาตให้ผู้ใช้ลงทะเบียนได้โดยไม่มีข้อจำกัดอาจทำให้เกิดปัญหาด้านความปลอดภัยและสแปมในเซิร์ฟเวอร์แอปพลิเคชันของคุณ การตรวจสอบอีเมลสามารถช่วยป้องกันสถานการณ์นี้ โดยกำหนดให้ผู้ใช้ที่ลงทะเบียนในแอปของคุณต้องมีที่อยู่อีเมลที่ถูกต้อง ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการตั้งค่าการตรวจสอบอีเมลใน back4app back4app เซิร์ฟเวอร์ของคุณ ซึ่งจะจัดการการตรวจสอบนี้โดยอัตโนมัติ คุณจะได้เรียนรู้วิธีการตรวจสอบในแอปพลิเคชันของคุณว่าผู้ใช้ได้รับการตรวจสอบแล้วจริงๆ ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นจากบทเรียนนี้ได้ที่ที่เก็บ github ของเรา https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java เป้าหมาย เพื่อสร้างฟีเจอร์การเข้าสู่ระบบผู้ใช้โดยใช้ apple sign in บน parse สำหรับแอป react native ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ https //www back4app com/docs/react native/parse sdk/react native sdk ทำตามคู่มือก่อนหน้านี้เพื่อให้คุณเข้าใจได้ดีขึ้นเกี่ยวกับ https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 ตั้งค่าการตรวจสอบอีเมล คุณจะตั้งค่าเซิร์ฟเวอร์ parse ของคุณบน back4app เพื่อให้ต้องการการตรวจสอบอีเมลของผู้ใช้ เปิด https //dashboard back4app com/apps และไปที่แผงควบคุมการตั้งค่าเซิร์ฟเวอร์ของคุณ ค้นหา อีเมลการตรวจสอบ อีเมลการตรวจสอบ และคลิกที่ การตั้งค่า การตั้งค่า ดำเนินการตรวจสอบ ตรวจสอบอีเมลผู้ใช้ ตรวจสอบอีเมลผู้ใช้ และ ป้องกันการเข้าสู่ระบบหากอีเมลไม่ได้รับการตรวจสอบ ป้องกันการเข้าสู่ระบบหากอีเมลไม่ได้รับการตรวจสอบ ช่องทำเครื่องหมาย รู้สึกอิสระในการอัปเดตและปรับแต่งการตั้งค่าใด ๆ ในหน้าจอนี้ เช่น ข้อความในอีเมลยืนยันและที่อยู่ตอบกลับ หลังจากตั้งค่านี้เสร็จแล้ว เซิร์ฟเวอร์ parse parse ของคุณจะจัดการการตรวจสอบอีเมลผู้ใช้โดยอัตโนมัติ หมายเหตุ การเปิดใช้งาน ป้องกันการเข้าสู่ระบบหากอีเมลไม่ได้รับการตรวจสอบ ป้องกันการเข้าสู่ระบบหากอีเมลไม่ได้รับการตรวจสอบ ไม่จำเป็น แต่เป็นแนวทางที่ดีในการให้ผู้ใช้ใหม่ของคุณยืนยันก่อนที่จะดำเนินการใด ๆ ในแอปของคุณ 2 อัปเดตส่วนประกอบ userregistration ของคุณ คุณต้องทำการเปลี่ยนแปลงบางอย่างใน userregistration userregistration เพื่อให้สามารถลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมลได้อย่างถูกต้อง ก่อนอื่นให้เพิ่มฟิลด์ข้อมูลใหม่สำหรับค่าอีเมลของผู้ใช้ของคุณ อัปเดตฟังก์ชันการลงทะเบียนผู้ใช้ใน userregistration js userregistration js ( userregistration tsx userregistration tsx หากคุณกำลังใช้ typescript) เพื่อที่ตอนนี้คุณจะได้ตั้งค่าแอตทริบิวต์อีเมลในข้อมูลผู้ใช้ userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; โปรดทราบว่าเนื่องจากผู้ใช้ของคุณไม่ควรเข้าสู่ระบบโดยไม่ตรวจสอบอีเมลของเขา คุณจำเป็นต้องออกจากระบบเขาหลังจากการลงทะเบียนเพื่อหลีกเลี่ยงข้อผิดพลาดใดๆ ในแอปพลิเคชันปัจจุบัน เซสชัน เซสชัน ทดสอบแอปพลิเคชันของคุณและตอนนี้คุณควรเห็นข้อความแบบนี้หลังจากลงทะเบียนผู้ใช้ใหม่ หลังจากลงทะเบียนผู้ใช้ใหม่ของคุณสำเร็จแล้ว parse จะส่งอีเมลที่มีลิงก์การตรวจสอบ ซึ่งมีลักษณะดังนี้ 3 ตั้งค่าคอมโพเนนต์ userlogin ของคุณ เซิร์ฟเวอร์ parse parse ของคุณตอนนี้กำลังบล็อกการพยายามเข้าสู่ระบบโดยอัตโนมัติที่ไม่มาจากผู้ใช้ที่ได้รับการตรวจสอบแล้ว อย่างไรก็ตาม มันยังเป็นแนวทางที่ดีที่จะทำให้แน่ใจว่าไม่มีวิธีใดที่ผู้ใช้ที่ไม่ได้รับการตรวจสอบจะเข้าถึงแอปพลิเคชันของคุณได้ ดังนั้นเรามาเพิ่มเงื่อนไขใหม่ภายใน userlogin userlogin คอมโพเนนต์ใน userlogin js userlogin js ( userlogin tsx userlogin tsx หากคุณใช้ typescript) ไฟล์ userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 ทดสอบการตรวจสอบอีเมล ไปข้างหน้าและทดสอบแอปพลิเคชันของคุณ โดยพยายามเข้าสู่ระบบด้วยผู้ใช้ที่ไม่ได้รับอนุญาตที่สร้างขึ้นก่อนหน้านี้ หากคุณไม่ได้คลิกลิงก์การตรวจสอบในอีเมล คุณควรได้รับข้อความข้อผิดพลาดเช่นนี้ หลังจากคลิกที่ลิงก์การตรวจสอบแล้ว คุณจะสามารถเข้าสู่ระบบและถูกเปลี่ยนเส้นทางไปยังหน้าหลักของคุณได้ คุณยังสามารถตรวจสอบผู้ใช้ของคุณโดยการเปิด ผู้ใช้ ผู้ใช้ ตารางภายในแดชบอร์ด back4app ของคุณและแก้ไข emailverified emailverified คอลัมน์ด้วยตนเอง บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการตั้งค่า parse parse เซิร์ฟเวอร์ของคุณให้ต้องการการตรวจสอบอีเมลของผู้ใช้และยังบังคับข้อจำกัดนี้ภายในแอปพลิเคชัน react native ของคุณ ในคู่มือต่อไป เราจะแสดงวิธีการทำการค้นหาผู้ใช้ที่มีประโยชน์