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

วิธีการเพิ่มการเข้าสู่ระบบ facebook ในแอป ionic ของคุณ บทนำ ส่วนนี้อธิบายวิธีการสร้างแอปด้วยการลงทะเบียนผู้ใช้โดยใช้การเข้าสู่ระบบ facebook และ ฟีเจอร์หลักของ parse server https //www back4app com/product/parse server ผ่าน back4app หลังจากทำตามบทแนะนำนี้ คุณจะสามารถทำสิ่งนี้ได้ ในทุกเวลา คุณสามารถเข้าถึงโปรเจกต์ ionic ที่สร้างขึ้นด้วยบทแนะนำนี้ได้ที่ ที่เก็บ github https //github com/back4app/ionic email verification ในการทำให้การเริ่มต้นนี้สมบูรณ์ คุณต้องการ 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 บัญชี facebook https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f สำหรับการสร้างแอป 1 การตั้งค่า facebook ในการเริ่มใช้ฟังก์ชัน facebook คุณต้อง ไปที่ facebook developer https //developers facebook com/ เว็บไซต์และสร้างบัญชีและเข้าสู่ระบบ ไปที่ my apps https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f และคลิกที่ \<font color="#2166ae">เพิ่มแอปใหม่\</font> ที่แผงด้านซ้าย คลิกที่ \<font color="#2166ae">การตั้งค่า\</font> > \<font color="#2166ae">พื้นฐาน\</font> ในหน้านี้ จดบันทึก \<font color="#2166ae">app id\</font> เพิ่ม \<font color="#2166ae">url นโยบายความเป็นส่วนตัว\</font> เลือก \<font color="#2166ae">หมวดหมู่\</font> เลื่อนลงและกด \<font color="#2166ae">บันทึกการเปลี่ยนแปลง\</font> 4\ ที่ด้านบนของหน้านี้ คลิกที่ \<font color="#2166ae">ปิด\</font> และ ยืนยัน เพื่อทำให้แอปของคุณออนไลน์ 5\ เลื่อนลงที่หน้าเดียวกันและคลิกที่ \<font color="#2166ae">เพิ่มแพลตฟอร์ม\</font> สำหรับบทแนะนำนี้ ให้เราเลือก android เพิ่ม \<font color="#2166ae">ชื่อแพ็คเกจ google play\</font> ของคุณ ซึ่งในกรณีของเราคือ com back4app myapp เพิ่ม \<font color="#2166ae">key hashes\</font> ของเครื่องของคุณ (รัน \<font color="#2166ae">keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\</font> เพื่อค้นหาของคุณ) \<font color="#2166ae">บันทึกการเปลี่ยนแปลง\</font> 6\ ที่แผงด้านซ้าย กลับไปที่ \<font color="#2166ae">แดชบอร์ด\</font> , เลื่อนลงและคลิกที่ \<font color="#2166ae">facebook login\</font> 2 เชื่อมต่อแอป facebook ของคุณกับ back4app ไปที่แดชบอร์ดแอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ และคลิกที่ \<font color="#2166ae">การตั้งค่าเซิร์ฟเวอร์\</font> ค้นหาบล็อก “facebook login” และคลิกที่ \<font color="#2166ae">การตั้งค่า\</font> บล็อก “facebook login” มีลักษณะดังนี้ 3\ เพิ่ม facebook \<font color="#2166ae">app id\</font> ที่บันทึกไว้ในขั้นตอนก่อนหน้า 3 ตั้งค่า ในบทแนะนำนี้ เราจะเริ่มจากจุดที่เราหยุดไว้ใน การลงทะเบียนผู้ใช้ด้วยการตรวจสอบอีเมล https //www back4app com/docs/ionic/user registration email verification ก่อนหน้า 4 การเข้าสู่ระบบด้วย facebook เรามาติดตั้งปลั๊กอิน cordova ของ facebook กันก่อน $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook ตอนนี้ มาลอง implement \<font color="#2166ae">facebooklogin()\</font> เมธอด 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 } สุดท้าย มาลองเพิ่มปุ่มไปที่ \<font color="#2166ae">login\</font> หน้าและทำให้มันเรียกเมธอดที่เราสร้างขึ้น login html 1 2 3 log in with facebook 4 5 5 ทดสอบแอปของคุณ เนื่องจากการเข้าสู่ระบบ facebook ไม่ทำงานในเบราว์เซอร์ ให้ทดสอบแอปของคุณโดยการรัน \<font color="#2166ae">ionic cordova run android\</font> เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ \<font color="#2166ae">แดชบอร์ด\</font> > \<font color="#2166ae">หลัก\</font> > \<font color="#2166ae">เบราว์เซอร์\</font> > \<font color="#2166ae">ผู้ใช้\</font> เพื่อดูผู้ใช้ที่คุณได้สร้างขึ้น! เสร็จสิ้น! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน และออกจากระบบแอปของคุณด้วย facebook โดยใช้ฟีเจอร์หลักของ parse server ผ่าน back4app!