Halaman ini diterjemahkan oleh Cloud Translation API.

Otentikasi Menggunakan Google dengan JavaScript

Anda dapat mengizinkan pengguna mengautentikasi dengan Firebase menggunakan Akun Google mereka. Anda dapat menggunakan Firebase SDK untuk menjalankan alur login Google, atau menjalankan alur login secara manual menggunakan library Sign In With Google dan meneruskan token ID yang dihasilkan ke Firebase.

Sebelum kamu memulai

Tambahkan Firebase ke proyek JavaScript Anda .
Aktifkan Google sebagai metode masuk di konsol Firebase:
1. Di konsol Firebase , buka bagian Auth .
2. Pada tab Metode masuk , aktifkan metode masuk Google dan klik Simpan .

Tangani alur masuk dengan Firebase SDK

Jika Anda membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan Akun Google mereka adalah menangani alur masuk dengan Firebase JavaScript SDK. (Jika Anda ingin mengautentikasi pengguna di Node.js atau lingkungan non-browser lainnya, Anda harus menangani alur masuk secara manual.)

Untuk menangani alur masuk dengan Firebase JavaScript SDK, ikuti langkah berikut:

Buat instance objek penyedia Google:

Web version 9

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Web version 8

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

Opsional : Tentukan cakupan OAuth 2.0 tambahan yang ingin Anda minta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope . Sebagai contoh:
Web version 9
Pelajari lebih lanjut SDK modular Web v9 yang dapat diguncang pohon dan tingkatkan dari versi 8.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Web version 8
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
Lihat dokumentasi penyedia autentikasi .

Opsional : Untuk melokalkan alur OAuth penyedia ke bahasa pilihan pengguna tanpa meneruskan parameter OAuth khusus yang relevan secara eksplisit, perbarui kode bahasa pada instance Auth sebelum memulai alur OAuth. Sebagai contoh:

Web version 9

import { getAuth } from "firebase/auth";

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

Web version 8

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 khusus tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter khusus, panggil setCustomParameters pada penyedia yang diinisialisasi dengan objek berisi kunci seperti yang ditentukan oleh dokumentasi penyedia OAuth dan nilai yang sesuai. Sebagai contoh:
Web version 9
Pelajari lebih lanjut SDK modular Web v9 yang dapat diguncang pohon dan tingkatkan dari versi 8.
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
Parameter OAuth wajib yang dicadangkan tidak diizinkan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk detail lebih lanjut.

Autentikasi dengan Firebase menggunakan objek penyedia Google. Anda dapat meminta pengguna untuk masuk dengan Akun Google mereka dengan membuka jendela munculan atau dengan mengalihkan ke laman masuk. Metode pengalihan lebih disukai di perangkat seluler.

Untuk masuk dengan jendela pop-up, panggil signInWithPopup :

Web version 9

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

Web version 8

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

Perhatikan juga bahwa Anda dapat mengambil token OAuth penyedia Google yang dapat digunakan untuk mengambil data tambahan menggunakan Google API.

Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

Untuk masuk dengan mengalihkan ke laman masuk, panggil signInWithRedirect : Ikuti praktik terbaik saat menggunakan `signInWithRedirect`.

Web version 9

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

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

Web version 8

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

Kemudian, Anda juga dapat mengambil token OAuth penyedia Google dengan memanggil getRedirectResult saat halaman Anda dimuat:

Web version 9

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

Web version 8

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

Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat Auth Reference Docs .

Menangani Kesalahan akun-ada-dengan-kredensial-berbeda

Jika Anda mengaktifkan setelan Satu akun per alamat email di konsol Firebase , saat pengguna mencoba masuk ke penyedia (seperti Google) dengan email yang sudah ada untuk penyedia pengguna Firebase lain (seperti Facebook), kesalahan auth/account-exists-with-different-credential dilemparkan bersama dengan objek AuthCredential (token ID Google). Untuk menyelesaikan proses masuk ke penyedia yang dimaksud, pengguna harus masuk terlebih dahulu ke penyedia yang ada (Facebook) lalu menautkan ke AuthCredential sebelumnya (token Google ID).

Jika Anda menggunakan signInWithPopup , Anda dapat menangani kesalahan auth/account-exists-with-different-credential dengan kode seperti 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();
        });
      });
    });
  }
});

Modus pengalihan

Kesalahan ini ditangani dengan cara serupa dalam mode pengalihan, dengan perbedaan bahwa kredensial yang tertunda harus di-cache di antara pengalihan halaman (misalnya, menggunakan penyimpanan sesi).

Anda juga dapat mengautentikasi dengan Firebase menggunakan Akun Google dengan menangani alur login dengan library Sign In With Google:

Integrasikan Masuk Dengan Google ke dalam aplikasi Anda dengan mengikuti panduan integrasi . Pastikan untuk mengonfigurasi Masuk dengan Google dengan ID Klien Google yang dihasilkan untuk proyek Firebase Anda. Anda dapat menemukan ID Klien Google proyek Anda di laman Kredensial Konsol Pengembang Proyek Anda.

Dalam callback hasil login, tukarkan token ID dari respons autentikasi Google dengan kredensial Firebase dan gunakan untuk mengautentikasi 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: Autentikasi dengan Firebase di Node.js

Untuk mengautentikasi dengan Firebase di aplikasi Node.js:

Login pengguna dengan Akun Google mereka dan dapatkan token ID Google pengguna. Anda dapat melakukannya dengan beberapa cara. Sebagai contoh:
- Jika aplikasi Anda memiliki tampilan depan browser, gunakan Login dengan Google seperti yang dijelaskan di bagian Tangani alur login secara manual . Dapatkan token ID Google dari respons autentikasi:
```
var id_token = googleUser.getAuthResponse().id_token
```
  Lalu, kirimkan token ini ke aplikasi Node.js Anda.
- Jika aplikasi Anda berjalan di perangkat dengan kemampuan masukan terbatas, seperti TV, Anda dapat menggunakan alur Masuk dengan Google untuk TV dan Perangkat .

Setelah Anda mendapatkan token ID Google pengguna, gunakan token tersebut untuk membuat objek Kredensial, lalu masukkan pengguna dengan kredensial tersebut:

Web version 9

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

Web version 8

// 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

Autentikasi dengan Firebase di ekstensi Chrome

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

Buka proyek Anda di konsol Firebase .
Di bagian Autentikasi , buka halaman Metode masuk .
Tambahkan URI seperti berikut ke daftar Authorized Domains:
```
chrome-extension://CHROME_EXTENSION_ID
```

Hanya operasi popup ( 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 daripada popup tindakan browser, karena popup autentikasi akan membatalkan popup tindakan browser. Metode sembulan hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2 . Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang tidak dapat melakukan operasi sembulan sama sekali.

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

Pada pembuatan proyek, Firebase akan menyediakan subdomain unik untuk proyek Anda: https://my-app-12345.firebaseapp.com .

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

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

Ikuti langkah 1 sampai 3 di Menyiapkan domain Anda untuk Hosting . Saat Anda memverifikasi kepemilikan domain, Hosting menyediakan sertifikat SSL untuk domain kustom Anda.
Tambahkan domain khusus Anda ke daftar domain resmi di konsol Firebase : auth.custom.domain.com .
Di konsol pengembang Google atau laman penyiapan OAuth, daftar putih URL laman pengalihan, yang dapat diakses di domain khusus Anda: https://auth.custom.domain.com/__/auth/handler .

Saat Anda menginisialisasi perpustakaan JavaScript, tentukan domain khusus Anda dengan bidang authDomain : l10n

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 selanjutnya

Setelah pengguna masuk untuk pertama kali, akun pengguna baru dibuat dan ditautkan ke kredensial—yaitu, nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi—yang digunakan pengguna untuk masuk. 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 disarankan untuk mengetahui status autentikasi pengguna Anda adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .
Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik pengguna yang masuk dari variabel auth , dan menggunakannya untuk mengontrol data apa yang dapat diakses pengguna.

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

Untuk mengeluarkan pengguna, panggil signOut :

Web version 9

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

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

Web version 8

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

Otentikasi Menggunakan Google dengan JavaScript

Sebelum kamu memulai

Tangani alur masuk dengan Firebase SDK

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Menangani Kesalahan akun-ada-dengan-kredensial-berbeda

Modus munculan

Modus pengalihan

Lanjutan: Tangani alur masuk secara manual

Lanjutan: Autentikasi dengan Firebase di Node.js

Web version 9

Web version 8

Autentikasi dengan Firebase di ekstensi Chrome

Menyesuaikan domain pengalihan untuk masuk dengan Google

Langkah selanjutnya

Web version 9

Web version 8