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

การลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมล บทนำ ส่วนนี้อธิบายว่าคุณสามารถสร้างแอปด้วยการลงทะเบียนผู้ใช้และการตรวจสอบอีเมลได้อย่างไร โดยใช้ https //www back4app com/product/parse server ผ่าน back4app นี่คือรูปลักษณ์ที่เป็นไปได้ ในทุกช่วงเวลา คุณสามารถเข้าถึง ionic project ที่สร้างขึ้นทั้งหมดด้วยบทเรียนนี้ได้ที่ https //github com/back4app/ionic email verification ข้อกำหนดเบื้องต้น ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ https //code visualstudio com/download (หรือ ide เว็บใดก็ได้ที่คุณชอบ) https //ionicframework com/getting started/ แอปที่สร้างขึ้นที่ back4app ติดตาม 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 เปิดใช้งานการตรวจสอบอีเมล ไปที่แอปของคุณที่ 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 และสร้างผู้ใช้สองสามคน ลองเข้าสู่ระบบหลังจากลงทะเบียนโดยไม่ต้องยืนยันอีเมลเพื่อดูว่ามีข้อผิดพลาดแสดงจริงหรือไม่ เข้าสู่ระบบที่ https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ แดชบอร์ด แดชบอร์ด > หลัก หลัก > เบราว์เซอร์ เบราว์เซอร์ > ผู้ใช้ ผู้ใช้ เพื่อดูผู้ใช้ที่คุณได้สร้างขึ้น! เสร็จเรียบร้อย! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน หรือออกจากแอปของคุณโดยใช้การยืนยันอีเมลด้วยฟีเจอร์หลักของ parse server ผ่าน back4app!