Integrasi Login Facebook dengan JavaScript di Back4App

tambahkan login facebook ke aplikasi javascript anda pendahuluan bagian ini memandu anda tentang cara menggunakan api facebook untuk javascript dalam http //parseplatform org/ lingkungan melalui back4app dalam tutorial ini, anda akan belajar bagaimana menghubungkan sdk facebook ke dasbor parse anda dan bagaimana mengimplementasikan login login , pendaftaran pendaftaran , keluar keluar , tautan tautan dan putuskan tautan putuskan tautan fungsi dengan mengikuti langkah langkah yang disebutkan di bawah ini, anda akan mampu membangun sistem seperti ini http //js fb login back4app io/ kapan saja, anda dapat mengakses proyek android lengkap yang dibangun dengan tutorial ini di https //github com/back4app/javascript facebook login prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi javascript dasar yang terhubung dengan back4app catatan anda dapat menggunakan aplikasi yang dibuat dalam https //www back4app com/docs/javascript/parse javascript sdk atau aplikasi apa pun yang terhubung ke back4app sebuah domain untuk aplikasi anda catatan penting untuk memiliki domain untuk mulai menggunakan facebook login api untuk mengetahui lebih lanjut tentang web hosting, lihat https //help back4app com/hc/en us/articles/360002120991 how can i use back4app webhosting sebuah parse server versi 2 6 5 atau lebih tinggi catatan parse facebook sdk hanya berfungsi pada versi parse server yang lebih tinggi dari 2 6 5, yang akan digunakan dalam tutorial ini jadi, jika anda menggunakan versi parse yang lebih rendah, pertimbangkan untuk memperbaruinya 1 pengaturan facebook untuk mulai menggunakan facebook sdk untuk javascript, anda perlu mengikuti langkah langkah berikut kunjungi https //developers facebook com/ , buat akun dan sebuah aplikasi atur aplikasi facebook anda aktifkan login facebook dengan mengklik login facebook > quickstart, yang ada di menu sebelah kiri, lalu ikuti https //developers facebook com/docs/facebook login/web untuk melakukan aktivasi untuk menghubungkan back4app dengan aplikasi facebook anda, masuk ke https //www back4app com/ akun anda, klik pada pengaturan server pengaturan server dari aplikasi anda dan klik pada pengaturan pengaturan dari blok ''login facebook'' itu harus terlihat seperti ini 5\ kemudian, tambahkan id aplikasi facebook anda, yang dapat ditemukan di https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps dari aplikasi facebook anda 6\ ikuti https //developers facebook com/docs/javascript/quickstart/ untuk memuat sdk javascript facebook ke dalam aplikasi anda 7\ ganti panggilan anda ke fb init() fb init() dengan panggilan ke parse facebookutils init() parse facebookutils init() sebagai contoh, jika anda memuat sdk javascript facebook secara asinkron, fungsi fbasyncinit fbasyncinit anda akan terlihat seperti ini 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 masuk mulailah dengan membuat sebuah fungsi masuk dengan facebook yang menyimpan pengguna ke dalam database parse sayangnya, tidak mungkin menggunakan tombol masuk yang disediakan oleh facebook, karena masuk menggunakannya tidak akan menyimpan pengguna baru ke dasbor parse dasbor parse namun, ketika anda menggunakan http //docs parseplatform org/js/guide/#facebook users , itu menyelesaikan masalah di sisi server untuk desain yang mudah dari tombol masuk facebook, menggunakan html dan css, lihat implementasi ini https //codepen io/davidelrizzo/pen/veyvyv untuk memulai implementasi masuk, tetapkan sebuah onclick onclick acara yang memanggil fungsi login berikut ke tombol masuk masuk facebook anda untuk membangun fungsi ini, ikuti langkah langkah yang disebutkan di bawah ini gunakan parse facebookutils login parse facebookutils login untuk melakukan masuk facebook bersama dengan parse, fungsi ini menerima izin facebook sebagai argumen dalam contoh ini, izin ini sesuai dengan profil publik dan email catatan lihat https //developers facebook com/docs/permissions untuk detail lebih lanjut 2\ periksa apakah pengguna sudah ada di database jika iya, arahkan dia ke halaman lain 3\ lakukan panggilan ke fb api fb api untuk mendapatkan informasi tentang pengguna baru dalam contoh ini, dimungkinkan untuk mengakses id, nama, email, dan izin pengguna catatan untuk mengetahui lebih lanjut tentang fungsi ini klik https //developers facebook com/docs/javascript/reference/fb api 4\ atur properti, nama pengguna, dan email pengguna dan simpan ke database 5\ arahkan halaman kode login() adalah sebagai berikut 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 keluar fungsi keluar jauh lebih sederhana daripada fungsi masuk kali ini, anda akan dapat menggunakan tombol yang disediakan oleh facebook namun, itu hanya akan digunakan untuk tujuan keluar, karena perlu menggunakan fungsi parse untuk masuk jadi, anda hanya boleh menggunakan tombol ini ketika pengguna sudah masuk ke facebook dan ingin keluar untuk melihat referensi resmi facebook tentang tombol facebook klik https //developers facebook com/docs/facebook login/web/login button berikut cara anda dapat mengimplementasikan tombol ini menggunakan sdk facebook logout html 1 catatan elemen ini memiliki callback onlogin onlogin , yang memanggil fungsi kami logoutwithfacebook logoutwithfacebook ketika pengguna keluar ya, benar event onlogin onlogin dipicu saat keluar fungsi logoutwithfacebook logoutwithfacebook akan secara sederhana mengeluarkan pengguna dari sesi parse nya saat ini dan mengarahkan dia ke halaman lain, seperti yang ditunjukkan di bawah 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 tautkan dan lepaskan fitur terakhir yang tersedia untuk parse facebook adalah tautkan tautkan dan lepaskan lepaskan fungsi sementara tautkan adalah tindakan mengasosiasikan parse user parse user yang ada dengan akun facebook nya dan lepaskan mengacu pada penghapusan asosiasi ini asosiasi ini dapat dilihat di dasbor parse dasbor parse , di kolom authdata authdata di sini anda dapat menggunakan data di kolom untuk memvalidasi tautkan tautkan dan lepaskan lepaskan fungsi langkah 4 1 tautan fungsi tautan tautan memeriksa apakah pengguna saat ini terhubung sebelum mencoba untuk menghubungkannya lagi ini cukup sederhana dan menggunakan parse facebookutils parse facebookutils sdk, seperti yang ditunjukkan di bawah 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 } langkah 4 2 lepaskan tautan untuk fungsi lepas tautan lepas tautan , cukup panggil parse facebookutils unlink parse facebookutils unlink pada pengguna parse saat ini, seperti yang anda lihat 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 } pergi ke kolom authdata authdata di parse dashboard parse dashboard anda untuk mengonfirmasi bahwa itu kosong setelah pemanggilan fungsi selesai! pada titik ini, anda telah belajar tidak hanya bagaimana mengonfigurasi dan menggunakan login login dan logout logout fungsi dengan aplikasi anda, tetapi juga bagaimana menggunakannya dengan back4app dan parse anda sekarang menguasai penggunaan parse facebook sdk parse facebook sdk dan dapat mulai menggunakannya sesuka hati lihat lebih lanjut tentang parse sdk di j https //parseplatform org/parse sdk js/api/4 3 1/ dan https //docs parseplatform org/js/guide/#facebook users