การตรวจสอบและลงทะเบียนอีเมลด้วย Parse Server บน Ionic

การลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมล บทนำ ส่วนนี้อธิบายว่าคุณสามารถสร้างแอปด้วยการลงทะเบียนผู้ใช้และการตรวจสอบอีเมลได้อย่างไร โดยใช้ ฟีเจอร์หลักของ parse server https //www back4app com/product/parse server ผ่าน back4app นี่คือรูปลักษณ์ที่เป็นไปได้ ในทุกช่วงเวลา คุณสามารถเข้าถึง ionic project ที่สร้างขึ้นทั้งหมดด้วยบทเรียนนี้ได้ที่ github repository https //github com/back4app/ionic email verification ข้อกำหนดเบื้องต้น ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ visual studio code https //code visualstudio com/download (หรือ ide เว็บใดก็ได้ที่คุณชอบ) ionic framework https //ionicframework com/getting started/ แอปที่สร้างขึ้นที่ back4app ติดตาม บทเรียนการสร้างแอป parse ใหม่ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app ติดตาม การลงทะเบียนผู้ใช้ https //www back4app com/docs/js framework/ionic/ionic framework login บทเรียนเพื่อเรียนรู้วิธีการลงทะเบียน, เข้าสู่ระบบ และออกจากระบบด้วย back4app 1 ตั้งค่า ในบทเรียนนี้ เราจะเริ่มจากจุดที่เราหยุดไว้ในบทเรียนก่อนหน้า การลงทะเบียนผู้ใช้ https //www back4app com/docs/ionic/ionic framework login screen 2 เปิดใช้งานการตรวจสอบอีเมล ไปที่แอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ และคลิกที่ \<font color="#2166ae">การตั้งค่าเซิร์ฟเวอร์\</font> ค้นหาบล็อก “อีเมลการตรวจสอบ” และคลิกที่ \<font color="#2166ae">การตั้งค่า\</font> บล็อก “อีเมลการตรวจสอบ” จะมีลักษณะดังนี้ 3\ คลิกที่ \<font color="#2166ae">ตรวจสอบอีเมลผู้ใช้\</font> มันอยู่ที่นี่ 4\ กรอกข้อมูลในช่องว่างและปรับเปลี่ยนข้อมูลที่กรอกไว้แล้วตามความชอบของคุณ 5\ คลิกที่ \<font color="#2166ae">บันทึก\</font> ปุ่ม 3 ลงทะเบียน สองคุณสมบัติพื้นฐานของ \<font color="#2166ae">parseuser\</font> คลาสคือ ชื่อผู้ใช้ และ รหัสผ่าน มีคุณสมบัติพิเศษที่สามที่คุณควรตั้งค่าเช่นกัน นั่นคือ อีเมล ในการดำเนินการลงทะเบียนด้วยการตรวจสอบอีเมล คุณจะใช้วิธีเดียวกับการลงทะเบียนผู้ใช้พื้นฐาน แต่ในครั้งนี้ แทนที่จะส่งผู้ใช้ไปยังหน้าแรก คุณจะขอให้เขา/เธอตรวจสอบอีเมลของเขา/เธอเพื่อเข้าสู่ระบบ เมื่อการสร้างผู้ใช้เสร็จสมบูรณ์ มันจะถูกเพิ่มโดยอัตโนมัติไปยัง parse \<font color="#2166ae">แดชบอร์ด\</font> และคุณสมบัติ boolean ของ emailverified จะถูกตั้งค่าเป็น false ในจุดนี้ ผู้ใช้ไม่ควรได้รับอนุญาตให้เข้าสู่ระบบในแพลตฟอร์มของคุณ เมื่อเขา/เธอตรวจสอบอีเมลของเขา/เธอโดยการคลิกที่ลิงก์ที่ส่งไปยังกล่องจดหมายของเขา/เธอ คุณสมบัติ boolean ของ emailverified จะถูกตั้งค่าโดยอัตโนมัติเป็น true , ทำให้เขา/เธอสามารถเข้าถึงแพลตฟอร์มของคุณได้อย่างเต็มที่ เพื่อให้ \<font color="#2166ae">signupactivity\</font> ทำงาน ให้ทำตามขั้นตอนเหล่านี้ เพิ่ม \<font color="#2166ae">issigningup\</font> และ \<font color="#2166ae">อีเมล\</font> ตัวแปรไปยัง \<font color="#2166ae">login ts\</font> เพื่อสลับและเก็บข้อมูลการป้อนอีเมล login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; ทำให้ \<font color="#2166ae">signup()\</font> เมธอดส่งที่อยู่อีเมลไปยัง \<font color="#2166ae">user signup()\</font> ฟังก์ชัน login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } ตอนนี้ มาทบทวนการเปลี่ยนแปลงเหล่านั้นในมุมมอง \<font color="#2166ae">login html \</font> โดยการเพิ่ม \<font color="#2166ae"> ngif\</font> เพื่อแสดง/ซ่อนองค์ประกอบ html เมื่อใดก็ตามที่ผู้ใช้กำลังลงทะเบียน ( issigningup เท่ากับ true ) หรือเข้าสู่ระบบ ( issigningup เท่ากับ false ) login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 เข้าสู่ระบบ ตอนนี้ มาลองเพิ่มการตรวจสอบ emailverified แบบ boolean ก่อนที่จะส่งผู้ใช้ไปยัง \<font color="#2166ae">หน้าแรก\</font> หมายเหตุ แม้ว่าผู้ใช้จะเข้าสู่ระบบเมื่อฟังก์ชัน \<font color="#2166ae">parse user login()\</font> ถูกเรียก แต่เขา/เธอไม่สามารถเข้าถึงแอปได้จนกว่าการตรวจสอบอีเมลจะเสร็จสิ้น นอกจากนี้ เนื่องจากมีวัตถุ session ถูกสร้างขึ้นในฐานข้อมูลเมื่อเรียก login() จึงเป็นสิ่งสำคัญที่จะต้องเรียก \<font color="#2166ae">parse user logout()\</font> ทุกครั้งที่ผู้ใช้ที่ยังไม่ได้ตรวจสอบอีเมลของเขา/เธอพยายามเข้าถึงแอปพลิเคชันเพื่อไม่ให้มี \<font color="#2166ae">sessions\</font> ที่เปิดอยู่ ตอนนี้ มาลอง implement การตรวจสอบ emailverified เพื่อตัดสินใจว่าผู้ใช้จะเข้าสู่ระบบหรือได้รับการแจ้งเตือนว่าอีเมลต้องได้รับการตรวจสอบ login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 ทดสอบแอปของคุณ ทดสอบแอปของคุณโดยการรัน \<font color="#2166ae">ionic serve\</font> และสร้างผู้ใช้สองสามคน ลองเข้าสู่ระบบหลังจากลงทะเบียนโดยไม่ต้องยืนยันอีเมลเพื่อดูว่ามีข้อผิดพลาดแสดงจริงหรือไม่ เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ \<font color="#2166ae">แดชบอร์ด\</font> > \<font color="#2166ae">หลัก\</font> > \<font color="#2166ae">เบราว์เซอร์\</font> > \<font color="#2166ae">ผู้ใช้\</font> เพื่อดูผู้ใช้ที่คุณได้สร้างขึ้น! เสร็จเรียบร้อย! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน หรือออกจากแอปของคุณโดยใช้การยืนยันอีเมลด้วยฟีเจอร์หลักของ parse server ผ่าน back4app!