วิธีเพิ่มการเข้าสู่ระบบ Facebook ใน Ionic ด้วย Parse Server

วิธีการเพิ่มการเข้าสู่ระบบ facebook ในแอป ionic ของคุณ บทนำ ส่วนนี้อธิบายวิธีการสร้างแอปด้วยการลงทะเบียนผู้ใช้โดยใช้การเข้าสู่ระบบ facebook และ ฟีเจอร์หลักของ parse server ผ่าน back4app หลังจากทำตามบทแนะนำนี้ คุณจะสามารถทำสิ่งนี้ได้ ในทุกเวลา คุณสามารถเข้าถึงโปรเจกต์ ionic ที่สร้างขึ้นด้วยบทแนะนำนี้ได้ที่ ที่เก็บ github ในการทำให้การเริ่มต้นนี้สมบูรณ์ คุณต้องการ visual studio code (หรือ ide เว็บใดก็ได้ที่คุณชอบ) ionic framework แอปที่สร้างขึ้นที่ back4app ทำตาม บทแนะนำการสร้างแอป parse ใหม่ เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app บัญชี facebook สำหรับการสร้างแอป 1 การตั้งค่า facebook ในการเริ่มใช้ฟังก์ชัน facebook คุณต้อง ไปที่ facebook developer เว็บไซต์และสร้างบัญชีและเข้าสู่ระบบ ไปที่ my apps และคลิกที่ เพิ่มแอปใหม่ เพิ่มแอปใหม่ ที่แผงด้านซ้าย คลิกที่ การตั้งค่า การตั้งค่า > พื้นฐาน พื้นฐาน ในหน้านี้ จดบันทึก app id app id เพิ่ม url นโยบายความเป็นส่วนตัว url นโยบายความเป็นส่วนตัว เลือก หมวดหมู่ หมวดหมู่ เลื่อนลงและกด บันทึกการเปลี่ยนแปลง บันทึกการเปลี่ยนแปลง 4\ ที่ด้านบนของหน้านี้ คลิกที่ ปิด ปิด และ ยืนยัน เพื่อทำให้แอปของคุณออนไลน์ 5\ เลื่อนลงที่หน้าเดียวกันและคลิกที่ เพิ่มแพลตฟอร์ม เพิ่มแพลตฟอร์ม สำหรับบทแนะนำนี้ ให้เราเลือก android เพิ่ม ชื่อแพ็คเกจ google play ชื่อแพ็คเกจ google play ของคุณ ซึ่งในกรณีของเราคือ com back4app myapp เพิ่ม key hashes key hashes ของเครื่องของคุณ (รัน keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 เพื่อค้นหาของคุณ) บันทึกการเปลี่ยนแปลง บันทึกการเปลี่ยนแปลง 6\ ที่แผงด้านซ้าย กลับไปที่ แดชบอร์ด แดชบอร์ด , เลื่อนลงและคลิกที่ facebook login facebook login 2 เชื่อมต่อแอป facebook ของคุณกับ back4app ไปที่แดชบอร์ดแอปของคุณที่ เว็บไซต์ back4app และคลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ ค้นหาบล็อก “facebook login” และคลิกที่ การตั้งค่า การตั้งค่า บล็อก “facebook login” มีลักษณะดังนี้ 3\ เพิ่ม facebook app id app id ที่บันทึกไว้ในขั้นตอนก่อนหน้า 3 ตั้งค่า ในบทแนะนำนี้ เราจะเริ่มจากจุดที่เราหยุดไว้ใน การลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมล https //www back4app com/docs/ionic/user registration email verification ก่อนหน้า 4 การเข้าสู่ระบบด้วย facebook เรามาติดตั้งปลั๊กอิน cordova ของ facebook กันก่อน ตอนนี้ มาลอง implement facebooklogin() facebooklogin() เมธอด login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } สุดท้าย มาลองเพิ่มปุ่มไปที่ login login หน้าและทำให้มันเรียกเมธอดที่เราสร้างขึ้น login html 1 2 3 log in with facebook 4 5 5 ทดสอบแอปของคุณ เนื่องจากการเข้าสู่ระบบ facebook ไม่ทำงานในเบราว์เซอร์ ให้ทดสอบแอปของคุณโดยการรัน ionic cordova run android ionic cordova run android เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ แดชบอร์ด แดชบอร์ด > หลัก หลัก > เบราว์เซอร์ เบราว์เซอร์ > ผู้ใช้ ผู้ใช้ เพื่อดูผู้ใช้ที่คุณได้สร้างขึ้น! เสร็จสิ้น! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน และออกจากระบบแอปของคุณด้วย facebook โดยใช้ฟีเจอร์หลักของ parse server ผ่าน back4app!