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

การลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมล บทนำ ส่วนนี้อธิบายว่าคุณสามารถสร้างแอปด้วยการลงทะเบียนผู้ใช้และการตรวจสอบอีเมลได้อย่างไร โดยใช้ ฟีเจอร์หลักของ parse server ผ่าน back4app นี่คือรูปลักษณ์ที่เป็นไปได้ ในทุกช่วงเวลา คุณสามารถเข้าถึง ionic project ที่สร้างขึ้นทั้งหมดด้วยบทเรียนนี้ได้ที่ github repository ข้อกำหนดเบื้องต้น ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ visual studio code (หรือ ide เว็บใดก็ได้ที่คุณชอบ) ionic framework แอปที่สร้างขึ้นที่ back4app ติดตาม บทเรียนการสร้างแอป parse ใหม่ เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app ติดตาม การลงทะเบียนผู้ใช้ บทเรียนเพื่อเรียนรู้วิธีการลงทะเบียน, เข้าสู่ระบบ และออกจากระบบด้วย back4app 1 ตั้งค่า ในบทเรียนนี้ เราจะเริ่มจากจุดที่เราหยุดไว้ในบทเรียนก่อนหน้า การลงทะเบียนผู้ใช้ https //www back4app com/docs/ionic/ionic framework login screen 2 เปิดใช้งานการตรวจสอบอีเมล ไปที่แอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ และคลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ ค้นหาบล็อก “อีเมลการตรวจสอบ” และคลิกที่ การตั้งค่า การตั้งค่า บล็อก “อีเมลการตรวจสอบ” จะมีลักษณะดังนี้ 3\ คลิกที่ ตรวจสอบอีเมลผู้ใช้ ตรวจสอบอีเมลผู้ใช้ มันอยู่ที่นี่ 4\ กรอกข้อมูลในช่องว่างและปรับเปลี่ยนข้อมูลที่กรอกไว้แล้วตามความชอบของคุณ 5\ คลิกที่ บันทึก บันทึก ปุ่ม 3 ลงทะเบียน สองคุณสมบัติพื้นฐานของ parseuser parseuser คลาสคือ ชื่อผู้ใช้ และ รหัสผ่าน มีคุณสมบัติพิเศษที่สามที่คุณควรตั้งค่าเช่นกัน นั่นคือ อีเมล ในการดำเนินการลงทะเบียนด้วยการตรวจสอบอีเมล คุณจะใช้วิธีเดียวกับการลงทะเบียนผู้ใช้พื้นฐาน แต่ในครั้งนี้ แทนที่จะส่งผู้ใช้ไปยังหน้าแรก คุณจะขอให้เขา/เธอตรวจสอบอีเมลของเขา/เธอเพื่อเข้าสู่ระบบ เมื่อการสร้างผู้ใช้เสร็จสมบูรณ์ มันจะถูกเพิ่มโดยอัตโนมัติไปยัง parse แดชบอร์ด แดชบอร์ด และคุณสมบัติ boolean ของ emailverified จะถูกตั้งค่าเป็น false ในจุดนี้ ผู้ใช้ไม่ควรได้รับอนุญาตให้เข้าสู่ระบบในแพลตฟอร์มของคุณ เมื่อเขา/เธอตรวจสอบอีเมลของเขา/เธอโดยการคลิกที่ลิงก์ที่ส่งไปยังกล่องจดหมายของเขา/เธอ คุณสมบัติ boolean ของ emailverified จะถูกตั้งค่าโดยอัตโนมัติเป็น true , ทำให้เขา/เธอสามารถเข้าถึงแพลตฟอร์มของคุณได้อย่างเต็มที่ เพื่อให้ signupactivity signupactivity ทำงาน ให้ทำตามขั้นตอนเหล่านี้ เพิ่ม issigningup issigningup และ อีเมล อีเมล ตัวแปรไปยัง login ts login ts เพื่อสลับและเก็บข้อมูลการป้อนอีเมล login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; ทำให้ signup() signup() เมธอดส่งที่อยู่อีเมลไปยัง user signup() user signup() ฟังก์ชัน 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 } ตอนนี้ มาทบทวนการเปลี่ยนแปลงเหล่านั้นในมุมมอง login html login html โดยการเพิ่ม ngif ngif เพื่อแสดง/ซ่อนองค์ประกอบ 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 ก่อนที่จะส่งผู้ใช้ไปยัง หน้าแรก หน้าแรก หมายเหตุ แม้ว่าผู้ใช้จะเข้าสู่ระบบเมื่อฟังก์ชัน parse user login() parse user login() ถูกเรียก แต่เขา/เธอไม่สามารถเข้าถึงแอปได้จนกว่าการตรวจสอบอีเมลจะเสร็จสิ้น นอกจากนี้ เนื่องจากมีวัตถุ session ถูกสร้างขึ้นในฐานข้อมูลเมื่อเรียก login() จึงเป็นสิ่งสำคัญที่จะต้องเรียก parse user logout() parse user logout() ทุกครั้งที่ผู้ใช้ที่ยังไม่ได้ตรวจสอบอีเมลของเขา/เธอพยายามเข้าถึงแอปพลิเคชันเพื่อไม่ให้มี sessions sessions ที่เปิดอยู่ ตอนนี้ มาลอง 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 ทดสอบแอปของคุณ ทดสอบแอปของคุณโดยการรัน ionic serve ionic serve และสร้างผู้ใช้สองสามคน ลองเข้าสู่ระบบหลังจากลงทะเบียนโดยไม่ต้องยืนยันอีเมลเพื่อดูว่ามีข้อผิดพลาดแสดงจริงหรือไม่ เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ แดชบอร์ด แดชบอร์ด > หลัก หลัก > เบราว์เซอร์ เบราว์เซอร์ > ผู้ใช้ ผู้ใช้ เพื่อดูผู้ใช้ที่คุณได้สร้างขึ้น! เสร็จเรียบร้อย! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน หรือออกจากแอปของคุณโดยใช้การยืนยันอีเมลด้วยฟีเจอร์หลักของ parse server ผ่าน back4app!