JavaScript
Integrasi Login Facebook dengan JavaScript di Back4App

15mnt
Tambahkan login facebook ke Aplikasi javascript Anda
Pendahuluan
Bagian ini memandu Anda tentang cara menggunakan API Facebook untuk JavaScript dalam Parse 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.
Kapan saja, Anda dapat mengakses Proyek Android lengkap yang dibangun dengan tutorial ini di repositori GitHub.
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 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.
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.
- Pengaturan Facebook
Untuk mulai menggunakan Facebook SDK untuk JavaScript, Anda perlu mengikuti langkah-langkah berikut:
Kunjungi Situs Pengembang Facebook, 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 untuk melakukan aktivasi.
Untuk menghubungkan Back4app dengan Aplikasi Facebook Anda, masuk ke Back4App akun Anda, klik pada Pengaturan Server dari Aplikasi Anda dan klik pada Pengaturan dari blok ''Login Facebook''. Itu harus terlihat seperti ini:
﻿
Kemudian, tambahkan ID Aplikasi Facebook Anda, yang dapat ditemukan di Dasbor dari Aplikasi Facebook Anda.
Ikuti instruksi ini untuk memuat SDK JavaScript Facebook ke dalam aplikasi Anda.
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
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook SDK
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook SDK
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
﻿
- 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, itu menyelesaikan masalah di sisi server.
Untuk desain yang mudah dari tombol Masuk Facebook, menggunakan HTML dan CSS, lihat implementasi ini: Tombol Masuk Facebook.
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 untuk detail lebih lanjut.
Periksa apakah pengguna sudah ada di database. Jika iya, arahkan dia ke halaman lain.
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.
Atur properti, nama pengguna, dan email pengguna dan simpan ke database.
Arahkan halaman.
Kode logIn()  adalah sebagai berikut:
login.js
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
﻿
- 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.
Berikut cara Anda dapat mengimplementasikan tombol ini menggunakan SDK Facebook:
logout.html
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
﻿
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
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
﻿
- 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
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
﻿
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
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
﻿
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 JReferensi API SDK JavaScript dan dokumentasi sumber terbuka Parse untuk SDK Javascript.