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

Tambahkan Firebase ke project JavaScript.
Aktifkan Google sebagai metode login di Firebase console:
1. Di Firebase console, buka bagian Authentication.
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:

Buat instance objek penyedia Google:

API modular web

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

API dengan namespace web

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Contoh:
API modular web

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
API dengan namespace web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
Lihat dokumentasi penyedia autentikasi.

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:

API modular web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

API dengan namespace web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

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:
API modular web

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
API dengan namespace web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
Parameter OAuth wajib yang dicadangkan tidak boleh digunakan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.

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:

API modular web

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);
    // ...
  });auth_google_signin_popup.js

API dengan namespace web

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;
    // ...
  });google-signin.js

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`.

API modular web

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

API dengan namespace web

firebase.auth().signInWithRedirect(provider);index.js

Lalu, Anda juga bisa mengambil token OAuth penyedia Google dengan memanggil getRedirectResult saat halaman dimuat:

API modular web

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);
    // ...
  });auth_google_signin_redirect_result.js

API dengan namespace web

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;
    // ...
  });google-signin.js

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

Menangani Error account-exists-with-different-credential

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 dilemparkan 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:


// Step 1.
// User tries to sign in to Google.
auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Google credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Google credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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:

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 project di halaman Kredensial Konsol Developer Project.

Dalam callback hasil login, tukarkan token ID dari respons autentikasi Google dengan kredensial Firebase, dan gunakan token ID tersebut 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);
    // ...
  });
}

Lanjutan: Melakukan autentikasi dengan Firebase di Node.js

Untuk melakukan autentikasi dengan Firebase pada aplikasi Node.js:

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 dijelaskan di bagian Menangani alur login secara manual. Dapatkan token ID Google dari respons auth:
```
var id_token = googleUser.getAuthResponse().id_token
```
  Lalu, kirim token ini ke apl Node.js Anda.
- Jika aplikasi berjalan di perangkat dengan kemampuan input terbatas, seperti TV, Anda dapat menggunakan alur Login dengan Google untuk TV dan Perangkat.

Setelah mendapatkan token ID Google pengguna, gunakan token tersebut untuk mem-build objek Kredensial, lalu proses login pengguna dengan kredensial tersebut:

API modular web

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);
  // ...
});auth_google_build_signin.js

API dengan namespace web

// 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;
  // ...
});google-signin.js

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Jika membangun aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome:

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

Hanya operasi pop-up (signInWithPopup, linkWithPopup, dan reauthenticateWithPopup) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip halaman latar belakang, bukan dari pop-up tindakan browser, karena pop-up autentikasi akan membatalkan pop-up tindakan browser. Metode pop-up hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2. Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang sama sekali tidak dapat menjalankan operasi pop-up.

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

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:

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.
Tambahkan domain kustom ke daftar domain yang diizinkan di Firebase console: auth.custom.domain.com.
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.

Saat menginisialisasi library JavaScript, tentukan domain kustom Anda dengan authDomain kolom:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
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:

API modular web

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

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

API dengan namespace web

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

Melakukan Autentikasi Menggunakan Google dengan JavaScript

Sebelum memulai

Menangani alur login dengan Firebase SDK

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

API modular web

API dengan namespace web

Menangani Error account-exists-with-different-credential

Mode pop-up

Mode pengalihan

Lanjutan: Menangani alur login secara manual

Lanjutan: Melakukan autentikasi dengan Firebase di Node.js

API modular web

API dengan namespace web

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Menyesuaikan domain pengalihan untuk login dengan Google

Langkah berikutnya

API modular web

API dengan namespace web