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

วิธีการเพิ่มหน้าล็อกอินในโปรเจกต์ ionic framework ของคุณ บทนำ ในส่วนนี้คุณจะได้เรียนรู้วิธีการสร้างหน้า, การลงทะเบียน, การเข้าสู่ระบบ และการออกจากระบบในแอป ionic ของคุณ นี่คือรูปลักษณ์ที่มันจะเป็น ข้อกำหนดเบื้องต้น ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ 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 ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ ionic ที่สร้างขึ้นโดยใช้บทเรียนนี้ได้ที่ ที่เก็บ github https //github com/back4app/ionic email verification 1 ติดตั้ง parse sdk สมมติว่าคุณมีโปรเจกต์ ionic ที่มีอยู่แล้ว สิ่งแรกที่คุณต้องทำคือการติดตั้ง parse sdk คุณสามารถทำได้โดยการรัน $ npm install parse 2 ตั้งค่าข้อมูลประจำตัวของแอป เปิดไฟล์ \<font color="#2166ae">app component ts\</font> , นำเข้า \<font color="#2166ae">parse\</font> และเริ่มต้นการเชื่อมต่อกับเซิร์ฟเวอร์ back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; หากคุณไม่รู้ว่าจะหาคีย์ของคุณได้ที่ไหน ให้ตรวจสอบบทเรียน ionic แรก เริ่มจากเทมเพลต https //www back4app com/docs/js framework/ionic/ionic template#setup 3 สร้างหน้าเข้าสู่ระบบ ตอนนี้เรามาสร้างหน้าล็อกอินของเรา กันเถอะ โชคดีที่ ionic ทำทุกอย่างให้เรา สิ่งที่เราต้องทำคือรันคำสั่งต่อไปนี้ $ ionic generate page login ในหน้ามุมมองนี้ เราต้องเพิ่มข้อมูลสำหรับ \<font color="#2166ae">ชื่อผู้ใช้\</font> และ \<font color="#2166ae">รหัสผ่าน\</font> และปุ่มสองปุ่ม หนึ่งสำหรับการลงทะเบียนและอีกหนึ่งสำหรับการเข้าสู่ระบบ 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 มาดำเนินการกับวิธีการ \<font color="#2166ae">signin()\</font> และ \<font color="#2166ae">signup()\</font> ที่กล่าวถึงใน \<font color="#2166ae">หน้าล็อกอิน\</font> ของเรา 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 } เรียนรู้เพิ่มเติมเกี่ยวกับ \<font color="#2166ae">signup()\</font> ที่ เอกสาร parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup 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 } เรียนรู้เพิ่มเติมเกี่ยวกับ \<font color="#2166ae">parse user login()\</font> ที่ เอกสาร parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup นี่คือวิธีที่ควรจะเป็น 4 นำไปใช้ในการออกจากระบบ มาทำงานในหน้าแรกของเรากัน (หรือหน้าที่ผู้ใช้จะถูกนำไปหลังจากเข้าสู่ระบบ) และทำการออกจากระบบ ก่อนอื่น ให้เปิด home html และเพิ่มปุ่มสำหรับทำเช่นนั้น login html 1 you are logged in! 2 3 4 5 log out 6 7 ตอนนี้ มาทำการ implement \<font color="#2166ae">logout()\</font> method และเพิ่ม \<font color="#2166ae">toast\</font> 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 } เรียนรู้เพิ่มเติมเกี่ยวกับ \<font color="#2166ae">parse user logout()\</font> ที่ เอกสารของ parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup มันควรจะดูเหมือนแบบนี้ 5 ตั้งค่าหน้าหลัก ฟีเจอร์ที่สำคัญของ \<font color="#2166ae">parse\</font> คือมันจำได้ว่าผู้ใช้ล็อกอินอยู่หรือไม่ในอุปกรณ์ นั่นหมายความว่าถ้าผู้ใช้ปิดแอป คุณยังสามารถกู้คืนเซสชันของเขาเมื่อแอปเปิดอยู่ ด้วยสิ่งนี้ เราสามารถกำหนดได้ว่าหน้าเริ่มต้นของแอปจะเป็น \<font color="#2166ae">loginpage\</font> หรือ \<font color="#2166ae">homepage\</font> เพื่อทำเช่นนั้น เราเพียงแค่ต้องเรียก \<font color="#2166ae">currentasync()\</font> มันจะคืนค่าผู้ใช้ที่ล็อกอินอยู่หรือ \<font color="#2166ae">null\</font> 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 }) เรียนรู้เพิ่มเติมเกี่ยวกับ \<font color="#2166ae">parse user currentasync()\</font> ที่ เอกสารของ parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup ในที่สุด ทุกอย่างก็ถูกตั้งค่าเรียบร้อย! ในจุดนี้ เพียงแค่รัน \<font color="#2166ae">ionic serve\</font> และคุณจะมีฟีเจอร์การลงชื่อเข้าใช้ การลงทะเบียน และการออกจากระบบที่ทำงานซึ่งยังจำผู้ใช้ที่ล็อกอินจนกว่าผู้ใช้จะออกจากระบบ