Melakukan Autentikasi Menggunakan Google dengan JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan Akun Google-nya. Anda dapat menggunakan Firebase SDK untuk menjalankan alur login dengan Google, atau menjalankan alur login secara manual menggunakan library Login dengan Google dan meneruskan token ID yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript.
  2. Aktifkan Google sebagai metode login di Firebase console:
    1. Di Firebase console, buka bagian Auth.
    2. Di tab Sign-in method, aktifkan metode login dengan Google lalu klik Save.

Menangani alur login dengan Firebase SDK

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

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

  1. Buat instance objek penyedia Google:
    WebWeb
    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();
    var provider = new firebase.auth.GoogleAuthProvider();
  2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Contoh:
    WebWeb
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    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 secara eksplisit meneruskan parameter OAuth kustom yang relevan, ubah kode bahasa di instance Auth sebelum memulai alur OAuth. Contoh:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang akan dikirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters di penyedia yang diinisialisasi beserta objek berisi kunci seperti yang ditentukan dalam dokumentasi penyedia OAuth dan nilainya yang terkait. Sebagai contoh:
    WebWeb
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    Parameter OAuth wajib yang dicadangkan tidak boleh digunakan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  5. Lakukan autentikasi dengan Firebase menggunakan objek penyedia Google. Anda bisa meminta pengguna untuk login dengan Akun Google, baik dengan membuka jendela pop-up maupun dengan mengalihkannya ke halaman login. Metode pengalihan lebih disukai pada perangkat seluler.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:
      WebWeb
      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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;
          // ...
        });
      Perlu diingat juga bahwa Anda bisa mengambil token OAuth penyedia Google, yang dapat digunakan untuk mengambil data tambahan menggunakan Google API.

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

    • Untuk login dengan mengalihkan pengguna ke halaman login penyedia, panggil signInWithRedirect: Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      Lalu, Anda juga bisa mengambil token OAuth penyedia Google dengan memanggil getRedirectResult saat halaman dimuat:
      WebWeb
      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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 juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Dokumentasi Referensi Auth.

Jika Anda mengaktifkan setelan One account per email address di Firebase console, saat pengguna mencoba login ke penyedia (seperti Google) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Facebook), error auth/account-exists-with-different-credential akan ditampilkan beserta objek AuthCredential (token ID Google). Untuk menyelesaikan proses login ke penyedia yang dimaksud, pengguna harus login terlebih dahulu ke penyedia yang ada (Facebook), lalu menautkan akunnya ke AuthCredential sebelumnya (token ID Google).

Jika menggunakan signInWithPopup, Anda dapat menangani error auth/account-exists-with-different-credential dengan kode seperti pada contoh berikut:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Google credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Mode pengalihan

Error ini ditangani dengan cara yang mirip di mode pengalihan, tetapi perbedaannya, kredensial yang tertunda harus dimasukkan ke cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Anda juga dapat melakukan autentikasi dengan Firebase menggunakan Akun Google, dengan cara menangani alur login menggunakan library Login dengan Google:

  1. Integrasikan Login dengan Google ke aplikasi Anda dengan mengikuti panduan integrasi. Pastikan untuk mengonfigurasi Login dengan Google dengan Client ID Google yang dibuat untuk project Firebase Anda. Anda dapat menemukan Client ID Google untuk project Anda di halaman Kredensial pada Konsol Developer Project.
  2. Dalam callback hasil login, tukar token ID dari respons autentikasi Google dengan kredensial Firebase dan gunakan untuk melakukan autentikasi dengan Firebase:
    function handleCredentialResponse(response) {
      // Build Firebase credential with the Google ID token.
      const idToken = response.credential;
      const credential = GoogleAuthProvider.credential(idToken);
    
      // Sign in with credential from the Google user.
      signInWithCredential(auth, credential).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // The credential that was used.
        const credential = GoogleAuthProvider.credentialFromError(error);
        // ...
      });
    }

Untuk melakukan autentikasi dengan Firebase pada aplikasi Node.js:

  1. Proses login pengguna dengan Akun Google mereka dan dapatkan token ID Google pengguna tersebut. Anda dapat melakukannya dengan beberapa cara. Contoh:
    • Jika aplikasi Anda memiliki front end browser, gunakan Login dengan Google seperti yang dideskripsikan di bagian Menangani alur login secara manual. Dapatkan token ID Google dari respons autentikasi:
      var id_token = googleUser.getAuthResponse().id_token
      Kemudian, kirim token ini ke aplikasi Node.js Anda.
    • Jika aplikasi Anda berjalan di perangkat dengan kemampuan input terbatas, seperti TV, Anda dapat menggunakan alur Login dengan Google untuk TV dan Perangkat.
  2. Setelah mendapatkan token ID Google pengguna, gunakan token tersebut untuk mem-build objek Kredensial, lalu proses login pengguna dengan kredensial tersebut:
    WebWeb
    import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";
    
    // Build Firebase credential with the Google ID token.
    const credential = GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    const auth = getAuth();
    signInWithCredential(auth, credential).catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      // The email of the user's account used.
      const email = error.customData.email;
      // The AuthCredential type that was used.
      const credential = GoogleAuthProvider.credentialFromError(error);
      // ...
    });
    // Build Firebase credential with the Google ID token.
    var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    firebase.auth().signInWithCredential(credential).catch((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;
      // ...
    });

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, baca artikel panduan Dokumen Di Balik Layar.

Saat membuat project, Firebase akan menyediakan subdomain unik untuk project Anda: https://my-app-12345.firebaseapp.com.

Domain ini juga akan digunakan sebagai mekanisme pengalihan untuk login dengan OAuth. Domain tersebut harus diizinkan untuk semua penyedia OAuth yang didukung. Namun, hal ini berarti pengguna mungkin akan melihat domain tersebut saat login ke Google sebelum dialihkan kembali ke aplikasi: Lanjutkan ke: https://my-app-12345.firebaseapp.com

Agar subdomain tidak ditampilkan, Anda dapat menyiapkan domain kustom dengan Firebase Hosting:

  1. Ikuti langkah 1 sampai 3 seperti yang tertera di artikel Menyiapkan domain Anda untuk Hosting. Saat Anda memverifikasi kepemilikan domain, Hosting akan menyediakan sertifikat SSL untuk domain kustom Anda.
  2. Tambahkan domain kustom ke daftar domain yang diizinkan di Firebase console: auth.custom.domain.com.
  3. Pada Google Developer Console atau halaman penyiapan OAuth, berikan izin pada URL halaman pengalihan, yang akan dapat diakses di domain kustom Anda: https://auth.custom.domain.com/__/auth/handler.
  4. Saat menginisialisasi library JavaScript, tentukan domain kustom Anda dengan kolom authDomain:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan ditautkan 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, terlepas dari cara pengguna login.

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menetapkan observer pada objek Auth. Selanjutnya, Anda bisa mendapatkan informasi profil dasar pengguna dari objek User. Baca bagian Mengelola Pengguna.

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

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

Untuk memproses logout pengguna, panggil signOut:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});