Melakukan Autentikasi Menggunakan Login dengan Google pada JavaScript

Anda dapat mengizinkan pengguna untuk melakukan autentikasi dengan Firebase menggunakan Akun Google mereka dengan mengintegrasikan Login dengan Google ke dalam aplikasi Anda. Anda dapat mengintegrasikan Login dengan Google dengan menggunakan Firebase SDK untuk menjalankan proses login, atau dengan menjalankan proses Login dengan Google secara manual dan meneruskan token ID yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript Anda.
  2. Aktifkan Login dengan Google di Firebase console:
    1. Di Firebase console, buka bagian Auth.
    2. Di tab Metode login, aktifkan metode login dengan Google, lalu klik Simpan.

Memproses alur login dengan Firebase SDK

Jika Anda sedang membuat aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan Akun Google mereka adalah dengan memproses alur login menggunakan Firebase JavaScript SDK. (Jika ingin mengautentikasi pengguna dalam Node.js atau lingkungan non-browser lain, Anda harus memproses alur login secara manual.)

Untuk memproses alur login dengan Firebase JavaScript SDK, ikuti langkah berikut ini:

  1. Buat instance objek penyedia Google:
    var provider = new firebase.auth.GoogleAuthProvider();
    
  2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin Anda minta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Misalnya:
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    
    Lihat dokumentasi penyedia autentikasi.
  3. Opsional: Untuk melokalkan alur OAuth penyedia ke bahasa yang dipilih pengguna tanpa meneruskan parameter OAuth kustom yang relevan secara eksplisit, update kode bahasa di instance Auth sebelum memulai alur OAuth. Misalnya:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters pada penyedia yang telah diinisialisasi dengan objek yang berisi kunci, seperti yang ditentukan dalam dokumentasi penyedia OAuth dan nilainya yang terkait. Misalnya:
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    
    Parameter OAuth yang mengharuskan cadangan tidak boleh digunakan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  5. Autentikasi dengan Firebase menggunakan objek penyedia Google. Anda bisa meminta pengguna untuk login dengan Akun Google mereka, baik dengan membuka jendela pop-up atau dengan mengalihkan ke halaman login. Untuk perangkat seluler, sebaiknya menggunakan metode pengalihan.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      Perhatikan juga bahwa Anda bisa mengambil token OAuth penyedia Google yang bisa digunakan untuk mengambil data tambahan menggunakan Google API.

      Di sini Anda juga dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, lihat Dokumen Referensi Auth.

    • Untuk login dengan mengalihkan ke halaman login, panggil signInWithRedirect:
      firebase.auth().signInWithRedirect(provider);
      
      Selanjutnya, Anda juga bisa mengambil token OAuth penyedia Google dengan memanggil getRedirectResult ketika halaman dimuat:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      Di sini Anda juga dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, lihat Dokumen Referensi Auth.

Mengautentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus memberi akses untuk ID ekstensi Chrome:

  1. Buka project Anda di Firebase console.
  2. Di bagian Autentikasi, buka halaman Metode login.
  3. Tambahkan URI seperti berikut ke daftar Domain yang Diotorisasi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup (signInWithPopup dan linkWithPopup) yang tersedia untuk ekstensi Chrome karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip background, bukan dari popup tindakan browser karena popup autentikasi akan membatalkan popup tindakan browser.

Dalam file manifes ekstensi Chrome, pastikan Anda sudah menambahkan URL https://apis.google.com ke content_security_policy yang diizinkan.

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan dihubungkan ke kredensial—yaitu, nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi—yang digunakan pengguna tersebut untuk login. Akun baru ini disimpan sebagai bagian dari project Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam project Anda, terlepas dari cara pengguna login.

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna Anda adalah dengan menyetel observer pada objek Auth. Lalu Anda dapat memperoleh informasi profil dasar pengguna dari objek User. Lihat Mengelola Pengguna.

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda dapat memperoleh ID unik milik pengguna yang login dari variabel auth dan menggunakannya untuk mengontrol data yang dapat diakses pengguna.

Anda dapat mengizinkan pengguna untuk login ke aplikasi Anda menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Agar pengguna logout, panggil signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.