Integrasi Login Facebook dengan JavaScript di Back4App

15 mnt

tambahkan login facebook ke aplikasi javascript anda pendahuluan bagian ini memandu anda tentang cara menggunakan api facebook untuk javascript dalam parse http //parseplatform org/ lingkungan melalui back4app dalam tutorial ini, anda akan belajar bagaimana menghubungkan sdk facebook ke dasbor parse anda dan bagaimana mengimplementasikan \login\ , \pendaftaran\ , \keluar\ , \tautan\ dan \putuskan tautan\ fungsi dengan mengikuti langkah langkah yang disebutkan di bawah ini, anda akan mampu membangun sistem seperti ini aplikasi login facebook contoh javascript back4app http //js fb login back4app io/ kapan saja, anda dapat mengakses proyek android lengkap yang dibangun dengan tutorial ini di repositori github 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 tutorial instal parse sdk javascript 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 tutorial webhosting back4app 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 situs pengembang facebook 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 dokumentasi quickstart facebook https //developers facebook com/docs/facebook login/web untuk melakukan aktivasi untuk menghubungkan back4app dengan aplikasi facebook anda, masuk ke back4app https //www back4app com/ akun anda, klik pada \pengaturan server\ dari aplikasi anda dan klik pada \pengaturan\ dari blok ''login facebook'' itu harus terlihat seperti ini 5\ kemudian, tambahkan id aplikasi facebook anda, yang dapat ditemukan di dasbor https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps dari aplikasi facebook anda 6\ ikuti instruksi ini https //developers facebook com/docs/javascript/quickstart/ untuk memuat sdk javascript facebook ke dalam aplikasi anda 7\ ganti panggilan anda ke \fb init()\ dengan panggilan ke \parse facebookutils init()\ sebagai contoh, jika anda memuat sdk javascript facebook secara asinkron, fungsi \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\ namun, ketika anda menggunakan sdk parse untuk facebook 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 tombol masuk facebook https //codepen io/davidelrizzo/pen/veyvyv untuk memulai implementasi masuk, tetapkan sebuah \onclick\ acara yang memanggil fungsi login berikut ke tombol \masuk\ facebook anda untuk membangun fungsi ini, ikuti langkah langkah yang disebutkan di bawah ini gunakan \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 referensi izin login facebook 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\ 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 di sini 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 di sini 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\ , yang memanggil fungsi kami \logoutwithfacebook\ ketika pengguna keluar ya, benar event \onlogin\ dipicu saat keluar fungsi \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\ dan \lepaskan\ fungsi sementara tautkan adalah tindakan mengasosiasikan \parse user\ yang ada dengan akun facebook nya dan lepaskan mengacu pada penghapusan asosiasi ini asosiasi ini dapat dilihat di \dasbor parse\ , di kolom \authdata\ di sini anda dapat menggunakan data di kolom untuk memvalidasi \tautkan\ dan \lepaskan\ fungsi langkah 4 1 tautan fungsi \tautan\ memeriksa apakah pengguna saat ini terhubung sebelum mencoba untuk menghubungkannya lagi ini cukup sederhana dan menggunakan \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\ , cukup panggil \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\ di \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\ dan \logout\ fungsi dengan aplikasi anda, tetapi juga bagaimana menggunakannya dengan back4app dan parse anda sekarang menguasai penggunaan \parse facebook sdk\ dan dapat mulai menggunakannya sesuka hati lihat lebih lanjut tentang parse sdk di j referensi api sdk javascript https //parseplatform org/parse sdk js/api/4 3 1/ dan dokumentasi sumber terbuka parse untuk sdk javascript https //docs parseplatform org/js/guide/#facebook users