วิธีสร้างหน้าล็อกอินใน Ionic ด้วย Back4App อย่างมืออาชีพ

14 นาที

วิธีการเพิ่มหน้าล็อกอินในโปรเจกต์ ionic framework ของคุณ บทนำ ในส่วนนี้คุณจะได้เรียนรู้วิธีการสร้างหน้า, การลงทะเบียน, การเข้าสู่ระบบ และการออกจากระบบในแอป ionic ของคุณ นี่คือรูปลักษณ์ที่มันจะเป็น ข้อกำหนดเบื้องต้น ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ visual studio code (หรือเว็บ ide ใด ๆ ที่คุณชอบ) ionic framework แอปที่สร้างขึ้นที่ back4app ติดตาม บทเรียนการสร้างแอป parse ใหม่ เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ ionic ที่สร้างขึ้นโดยใช้บทเรียนนี้ได้ที่ ที่เก็บ github 1 ติดตั้ง parse sdk สมมติว่าคุณมีโปรเจกต์ ionic ที่มีอยู่แล้ว สิ่งแรกที่คุณต้องทำคือการติดตั้ง parse sdk คุณสามารถทำได้โดยการรัน 2 ตั้งค่าข้อมูลประจำตัวของแอป เปิดไฟล์ app component ts app component ts , นำเข้า parse parse และเริ่มต้นการเชื่อมต่อกับเซิร์ฟเวอร์ back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; หากคุณไม่รู้ว่าจะหาคีย์ของคุณได้ที่ไหน ให้ตรวจสอบบทเรียน ionic แรก เริ่มจากเทมเพลต 3 สร้างหน้าเข้าสู่ระบบ ตอนนี้เรามาสร้างหน้าล็อกอินของเรา กันเถอะ โชคดีที่ ionic ทำทุกอย่างให้เรา สิ่งที่เราต้องทำคือรันคำสั่งต่อไปนี้ ในหน้ามุมมองนี้ เราต้องเพิ่มข้อมูลสำหรับ ชื่อผู้ใช้ ชื่อผู้ใช้ และ รหัสผ่าน รหัสผ่าน และปุ่มสองปุ่ม หนึ่งสำหรับการลงทะเบียนและอีกหนึ่งสำหรับการเข้าสู่ระบบ login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 มาดำเนินการกับวิธีการ signin() signin() และ signup() signup() ที่กล่าวถึงใน หน้าล็อกอิน หน้าล็อกอิน ของเรา login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } เรียนรู้เพิ่มเติมเกี่ยวกับ signup() signup() ที่ เอกสาร parse login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } เรียนรู้เพิ่มเติมเกี่ยวกับ parse user login() parse user login() ที่ เอกสาร parse นี่คือวิธีที่ควรจะเป็น 4 นำไปใช้ในการออกจากระบบ มาทำงานในหน้าแรกของเรากัน (หรือหน้าที่ผู้ใช้จะถูกนำไปหลังจากเข้าสู่ระบบ) และทำการออกจากระบบ ก่อนอื่น ให้เปิด home html และเพิ่มปุ่มสำหรับทำเช่นนั้น login html 1 you are logged in! 2 3 4 5 log out 6 7 ตอนนี้ มาทำการ implement logout() logout() method และเพิ่ม toast toast component หากคำขอล้มเหลว home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } เรียนรู้เพิ่มเติมเกี่ยวกับ parse user logout() parse user logout() ที่ เอกสารของ parse มันควรจะดูเหมือนแบบนี้ 5 ตั้งค่าหน้าหลัก ฟีเจอร์ที่สำคัญของ parse parse คือมันจำได้ว่าผู้ใช้ล็อกอินอยู่หรือไม่ในอุปกรณ์ นั่นหมายความว่าถ้าผู้ใช้ปิดแอป คุณยังสามารถกู้คืนเซสชันของเขาเมื่อแอปเปิดอยู่ ด้วยสิ่งนี้ เราสามารถกำหนดได้ว่าหน้าเริ่มต้นของแอปจะเป็น loginpage loginpage หรือ homepage homepage เพื่อทำเช่นนั้น เราเพียงแค่ต้องเรียก currentasync() currentasync() มันจะคืนค่าผู้ใช้ที่ล็อกอินอยู่หรือ null null app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) เรียนรู้เพิ่มเติมเกี่ยวกับ parse user currentasync() parse user currentasync() ที่ เอกสารของ parse ในที่สุด ทุกอย่างก็ถูกตั้งค่าเรียบร้อย! ในจุดนี้ เพียงแค่รัน ionic serve ionic serve และคุณจะมีฟีเจอร์การลงชื่อเข้าใช้ การลงทะเบียน และการออกจากระบบที่ทำงานซึ่งยังจำผู้ใช้ที่ล็อกอินจนกว่าผู้ใช้จะออกจากระบบ