การเพิ่ม Facebook Login ในแอป JavaScript ด้วย Back4App

เพิ่มการเข้าสู่ระบบ facebook ในแอป javascript ของคุณ บทนำ ส่วนนี้จะแนะนำคุณเกี่ยวกับวิธีการใช้ facebook api สำหรับ javascript ใน parse ผ่าน back4app ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการเชื่อมต่อ facebook sdk กับแดชบอร์ด parse ของคุณและวิธีการใช้งาน facebook เข้าสู่ระบบ เข้าสู่ระบบ , ลงทะเบียน ลงทะเบียน , ออกจากระบบ ออกจากระบบ , เชื่อมโยง เชื่อมโยง และ ยกเลิกการเชื่อมโยง ยกเลิกการเชื่อมโยง ฟังก์ชันต่างๆ โดยการทำตามขั้นตอนที่ระบุด้านล่าง คุณจะสามารถสร้างระบบเช่นนี้ได้ แอปเข้าสู่ระบบ facebook ตัวอย่าง javascript ของ back4app ในทุกเวลา คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นด้วยบทเรียนนี้ได้ที่ ที่เก็บ github ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป javascript พื้นฐานที่เชื่อมต่อกับ back4app หมายเหตุ คุณสามารถใช้แอปที่สร้างขึ้นใน บทเรียนการติดตั้ง javascript parse sdk หรือแอปใด ๆ ที่เชื่อมต่อกับ back4app โดเมนสำหรับแอปของคุณ หมายเหตุ จำเป็นต้องมีโดเมนเพื่อเริ่มใช้ facebook login api หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับการโฮสต์เว็บไซต์ โปรดดูที่ บทเรียนการโฮสต์เว็บไซต์ back4app parse server ที่มีเวอร์ชัน 2 6 5 หรือสูงกว่า หมายเหตุ parse facebook sdk ใช้งานได้เฉพาะกับ parse server ที่มีเวอร์ชันสูงกว่า 2 6 5 ซึ่งบทเรียนนี้จะใช้ ดังนั้น หากคุณใช้เวอร์ชันที่ต่ำกว่า parse ให้พิจารณาอัปเกรด 1 การตั้งค่า facebook ในการเริ่มใช้ facebook sdk สำหรับ javascript คุณต้องทำตามขั้นตอนเหล่านี้ ไปที่ เว็บไซต์นักพัฒนาของ facebook , สร้างบัญชีและแอป ตั้งค่าแอป facebook ของคุณ เปิดใช้งาน facebook login โดยคลิกที่ facebook login > quickstart ซึ่งอยู่ในเมนูด้านซ้าย จากนั้นทำตาม เอกสาร quickstart ของ facebook เพื่อดำเนินการเปิดใช้งาน เพื่อเชื่อมโยง back4app กับแอป facebook ของคุณ ให้เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ ของแอปของคุณ และคลิกที่ การตั้งค่า การตั้งค่า ของบล็อก ''facebook login'' มันควรจะดูเหมือนนี้ 5\ จากนั้น เพิ่ม facebook app id ของคุณ ซึ่งสามารถพบได้ที่ แดชบอร์ด ของแอป facebook ของคุณ 6\ ทำตาม คำแนะนำเหล่านี้ สำหรับการโหลด facebook javascript sdk ลงในแอปพลิเคชันของคุณ 7\ แทนที่การเรียก fb init() fb init() ด้วยการเรียก parse facebookutils init() parse facebookutils init() ตัวอย่างเช่น, หากคุณโหลด facebook javascript sdk แบบอะซิงโครนัส ฟังก์ชัน fbasyncinit fbasyncinit ของคุณจะมีลักษณะดังนี้ init js 1 // initialize parse 2 parse initialize("your parse app id here", "your javascript key here"); // don't forget to change these keys 3 parse serverurl = "https //parseapi back4app com/"; 4 5 // load the facebook api asynchronous when the window starts loading 6 window\ fbasyncinit = function() { 7 parse facebookutils init({ // this line replaces fb init({ 8 appid '{facebook app id}', // facebook app id 9 cookie true, // enable cookies to allow parse to access the session 10 xfbml true, // initialize facebook social plugins on the page 11 version 'v2 3' // point to the latest facebook graph api version, found in fb's app dashboard 12 }); 13 14 // put here code to run after the facebook sdk is loaded 15 }; 16 17 // include the facebook sdk 18 (function(d, s, id){ 19 var js, fjs = d getelementsbytagname(s)\[0]; 20 if (d getelementbyid(id)) {return;} 21 js = d createelement(s); js id = id; 22 js src = "//connect facebook net/en us/sdk js"; 23 fjs parentnode insertbefore(js, fjs); 24 }(document, 'script', 'facebook jssdk')); 2 เข้าสู่ระบบ เริ่มต้นด้วยการสร้าง ฟังก์ชันเข้าสู่ระบบด้วย facebook ที่บันทึกผู้ใช้ลงในฐานข้อมูล parse น่าเสียดายที่ไม่สามารถใช้ปุ่มเข้าสู่ระบบที่ facebook ให้มาได้ เนื่องจากการเข้าสู่ระบบ ด้วยมันจะไม่บันทึกผู้ใช้ใหม่ลงใน parse dashboard parse dashboard อย่างไรก็ตามเมื่อคุณใช้ parse sdk สำหรับ facebook , มันจะแก้ปัญหาที่ฝั่งเซิร์ฟเวอร์ สำหรับการออกแบบปุ่มเข้าสู่ระบบ facebook ที่ง่าย โดยใช้ html และ css ดูการใช้งานนี้ ปุ่มเข้าสู่ระบบ facebook เพื่อเริ่มต้นการใช้งานเข้าสู่ระบบ ให้กำหนด onclick onclick อีเวนต์ที่เรียกฟังก์ชัน login ต่อไปนี้ไปยังปุ่ม เข้าสู่ระบบ เข้าสู่ระบบ ของคุณ เพื่อสร้างฟังก์ชันนี้ให้ทำตามขั้นตอนที่กล่าวถึงด้านล่าง ใช้ parse facebookutils login parse facebookutils login เพื่อทำการเข้าสู่ระบบ facebook ร่วมกับ parse ฟังก์ชันนี้รับสิทธิ์ของ facebook เป็นอาร์กิวเมนต์ ในตัวอย่างนี้ สิทธิ์เหล่านี้ตรงกับโปรไฟล์สาธารณะและอีเมล หมายเหตุ ดู เอกสารอ้างอิงการอนุญาตเข้าสู่ระบบ facebook สำหรับรายละเอียดเพิ่มเติม 2\ ตรวจสอบว่าผู้ใช้มีอยู่ในฐานข้อมูลแล้วหรือไม่ หากมี ให้เปลี่ยนเส้นทางไปยังหน้าอื่น 3\ ทำการเรียก fb api fb api เพื่อดึงข้อมูลเกี่ยวกับผู้ใช้ใหม่ ในตัวอย่างนี้ สามารถเข้าถึง id, ชื่อ, อีเมล และสิทธิ์ของผู้ใช้ หมายเหตุ หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันนี้ คลิก ที่นี่ 4\ ตั้งค่าคุณสมบัติ ชื่อผู้ใช้ และอีเมลของผู้ใช้ และบันทึกลงในฐานข้อมูล 5\ เปลี่ยนเส้นทางไปยังหน้า โค้ด login() มีดังนี้ login js 1 function login() { 2 parse facebookutils login("public profile,email", { 3 success function(user) { 4 if (!user existed()) { 5 fb api('/me?fields=id,name,email,permissions', function (response) { 6 user set('username', response name); 7 user set('email', response email); 8 9 user save(null, { 10 success function(user) { 11 alert('user logged in and sign up through facebook, with username ' + user get('username') + ' and email ' + user get('email')); 12 13 // you should redirect the user to another page after a successful login 14 window\ location replace('http //js fb login back4app io/logout html'); 15 }, 16 error function(user, error) { 17 alert('failed to save user to database with error ' + error message); 18 } 19 }); 20 }); 21 } else { 22 alert("user logged in through facebook!"); 23 // you should redirect the user to another page after a successful login 24 window\ location replace('http //js fb login back4app io/logout html'); 25 } 26 }, 27 error function(user, error) { 28 console log("user cancelled the facebook login or did not fully authorize "); 29 } 30 }); 31 } 3 ออกจากระบบ ฟังก์ชันออกจากระบบนั้นง่ายกว่าฟังก์ชันเข้าสู่ระบบมาก ในครั้งนี้ คุณจะสามารถใช้ปุ่มที่ facebook จัดเตรียมไว้ อย่างไรก็ตาม มันจะถูกใช้เฉพาะสำหรับการออกจากระบบเท่านั้น เพราะจำเป็นต้องใช้ฟังก์ชันของ parse เพื่อเข้าสู่ระบบ ดังนั้น คุณควรใช้ปุ่มนี้เมื่อผู้ใช้ได้เข้าสู่ระบบ facebook แล้วและต้องการออกจากระบบ เพื่อดูเอกสารอ้างอิงอย่างเป็นทางการของ facebook เกี่ยวกับปุ่ม facebook คลิก ที่นี่ นี่คือวิธีที่คุณสามารถนำปุ่มนี้ไปใช้โดยใช้ facebook sdk logout html 1 หมายเหตุ องค์ประกอบนี้มีการเรียกกลับ onlogin onlogin , ซึ่งเรียกฟังก์ชันของเรา logoutwithfacebook logoutwithfacebook เมื่อผู้ใช้ออกจากระบบ ใช่แล้ว นั่นถูกต้อง onlogin onlogin จะถูกเรียกเมื่อออกจากระบบ ฟังก์ชัน logoutwithfacebook logoutwithfacebook จะทำการออกจากระบบผู้ใช้จากเซสชัน parse ปัจจุบันและเปลี่ยนเส้นทางเขาไปยังหน้าอื่น ตามที่แสดงด้านล่าง logout js 1 function logoutwithfacebook() { // the callback function 2 parse user logout(); // delete the current session for the user 3 alert('user logged out of facebook!'); 4 window\ location replace('http //js fb login back4app io'); // redirects the user to another webpage 5 } 4 เชื่อมโยงและยกเลิกการเชื่อมโยง ฟีเจอร์สุดท้ายที่มีให้สำหรับ parse facebook คือ เชื่อมโยง เชื่อมโยง และ ยกเลิกการเชื่อมโยง ยกเลิกการเชื่อมโยง ฟังก์ชัน ในขณะที่ การเชื่อมโยง คือการเชื่อมโยง parse user parse user กับบัญชี facebook ของเขา และ การยกเลิกการเชื่อมโยง หมายถึงการลบการเชื่อมโยงนี้ การเชื่อมโยงนี้สามารถเห็นได้ใน parse dashboard parse dashboard , ใน authdata authdata คอลัมน์นี้ คุณสามารถใช้ข้อมูลในคอลัมน์เพื่อยืนยัน การเชื่อมโยง การเชื่อมโยง และ การยกเลิกการเชื่อมโยง การยกเลิกการเชื่อมโยง ฟังก์ชัน ขั้นตอน 4 1 ลิงก์ ฟังก์ชัน ลิงก์ ลิงก์ จะตรวจสอบว่าผู้ใช้ปัจจุบันเชื่อมโยงอยู่หรือไม่ก่อนที่จะพยายามเชื่อมโยงเขาอีกครั้ง มันค่อนข้าง ง่ายและใช้ parse facebookutils parse facebookutils sdk ดังที่แสดงด้านล่าง link js 1 function link() { 2 var user = parse user current(); 3 if (!parse facebookutils islinked(user)) { 4 parse facebookutils link(user, null, { 5 success function(user) { 6 alert("woohoo, user logged in with facebook!"); 7 }, 8 error function(user, error) { 9 alert("user cancelled the facebook login or did not fully authorize "); 10 } 11 }); 12 } 13 else { 14 alert("can't link user to facebook because he is already linked"); 15 } 16 } ขั้นตอน 4 2 ยกเลิกการเชื่อมโยง สำหรับฟังก์ชัน ยกเลิกการเชื่อมโยง ยกเลิกการเชื่อมโยง เพียงแค่เรียก parse facebookutils unlink parse facebookutils unlink บนผู้ใช้ parse ปัจจุบัน ดังที่คุณเห็น unlink js 1 function unlink() { 2 var user = parse user current(); 3 parse facebookutils unlink(user, { 4 success function(user) { 5 alert("the user is no longer associated with their facebook account "); 6 } 7 }); 8 } ไปที่ authdata authdata ใน parse dashboard parse dashboard เพื่อยืนยันว่ามันว่างเปล่าหลังจากการเรียกฟังก์ชัน เสร็จเรียบร้อย! ในจุดนี้ คุณได้เรียนรู้ไม่เพียงแค่การกำหนดค่าและใช้ การเข้าสู่ระบบ การเข้าสู่ระบบ และ การออกจากระบบ การออกจากระบบ ฟังก์ชันกับแอปของคุณ แต่ยังเรียนรู้วิธีการใช้พวกเขากับ back4app และ parse คุณตอนนี้เชี่ยวชาญในการใช้ parse facebook sdk parse facebook sdk และสามารถเริ่มใช้มันได้ตามต้องการ ดูเพิ่มเติมเกี่ยวกับ parse sdk ที่ เอกสารอ้างอิง api ของ javascript sdk และ เอกสารเปิดแหล่งข้อมูลของ parse สำหรับ javascript sdk