Mulai menggunakan App Check dengan reCAPTCHA v3 di aplikasi web

Halaman ini menunjukkan cara mengaktifkan App Check di aplikasi web menggunakan penyedia reCAPTCHA v3 bawaan. Dengan mengaktifkan App Check, Anda membantu memastikan bahwa hanya aplikasi Anda yang dapat mengakses resource Firebase project Anda. Lihat Ringkasan fitur ini.

Perhatikan bahwa reCAPTCHA v3 tidak terlihat oleh pengguna. Penyedia reCAPTCHA v3 tidak mengharuskan pengguna untuk menyelesaikan tantangan kapan saja. Baca dokumentasi reCAPTCHA v3.

Jika Anda ingin menggunakan App Check dengan penyedia kustom Anda sendiri, lihat Menerapkan penyedia App Check kustom.

1. Siapkan project Firebase

Tambahkan Firebase ke project JavaScript jika Anda belum melakukannya.
Daftarkan situs Anda untuk menggunakan reCAPTCHA v3 serta dapatkan kunci situs dan kunci rahasia reCAPTCHA v3.
Daftarkan aplikasi Anda untuk menggunakan App Check dengan penyedia reCAPTCHA di bagian App Check di Firebase console. Anda harus memberikan kunci rahasia yang didapatkan di langkah sebelumnya.

Anda biasanya harus mendaftarkan semua aplikasi project Anda, karena setelah penerapan untuk produk Firebase diaktifkan, hanya aplikasi terdaftar yang akan dapat mengakses resource backend produk.
Opsional: Di setelan pendaftaran aplikasi, tetapkan time to live (TTL) kustom untuk token App Check yang dikeluarkan oleh penyedia. Anda dapat menetapkan TTL ke semua nilai dalam rentang 30 menit hingga 7 hari. Saat mengubah nilai ini, perhatikan pertimbangan berikut:
- Keamanan: TTL yang lebih singkat memberikan keamanan yang lebih kuat karena mengurangi periode yang memungkinkan penyalahgunaan token yang bocor atau ditangkap oleh penyerang.
- Performa: TTL yang lebih singkat membuat aplikasi Anda akan lebih sering melakukan pengesahan. Karena proses pengesahan aplikasi menambahkan latensi ke permintaan jaringan setiap kali dilakukan, TTL yang singkat dapat memengaruhi performa aplikasi Anda.
- Kuota dan biaya: TTL yang lebih singkat dan pengesahan ulang yang sering dilakukan akan mengurangi kuota Anda lebih cepat, dan untuk layanan berbayar, mungkin akan menimbulkan biaya yang lebih besar. Lihat Kuota & batas.
TTL default selama 1 hari termasuk wajar untuk sebagian besar aplikasi. Perlu diketahui bahwa library App Check memperbarui token pada sekitar setengah dari durasi TTL.

2. Tambahkan library App Check ke aplikasi

Tambahkan Firebase ke aplikasi web jika Anda belum melakukannya. Pastikan untuk mengimpor library App Check.

3 Lakukan inisialisasi App Check

Tambahkan kode inisialisasi berikut ke aplikasi Anda sebelum mengakses layanan Firebase. Anda harus meneruskan kunci situs reCAPTCHA yang Anda buat di konsol reCAPTCHA ke activate().

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});appcheck_initialize.js

Web

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);index.js

Langkah berikutnya

Setelah library App Check terinstal di aplikasi Anda, deploy aplikasi tersebut.

Aplikasi klien yang diupdate akan mulai mengirimkan token App Check beserta setiap permintaan yang dibuatnya ke Firebase. Namun, sebelum Anda mengaktifkan penerapan di bagian App Check di Firebase console, token tersebut tidak harus valid untuk produk Firebase.

Memantau metrik dan mengaktifkan penerapan

Sebelum mengaktifkan penerapan, Anda harus memastikan bahwa tindakan tersebut tidak akan mengganggu pengguna sah yang sudah ada. Di sisi lain, jika Anda melihat penggunaan resource aplikasi yang mencurigakan, sebaiknya segera aktifkan penerapan.

Untuk membantu membuat keputusan ini, Anda dapat melihat metrik App Check untuk layanan yang Anda gunakan:

Pantau metrik permintaan App Check untuk Realtime Database, Cloud Firestore, Cloud Storage, dan Authentication (beta).
Pantau metrik permintaan App Check untuk Cloud Functions.

Mengaktifkan penerapan App Check

Setelah memahami pengaruh App Check terhadap pengguna dan siap melanjutkan, Anda dapat mengaktifkan penerapan App Check:

Aktifkan penerapan App Check untuk Realtime Database, Cloud Firestore, Cloud Storage, dan Authentication (beta).
Aktifkan penerapan App Check untuk Cloud Functions.

Menggunakan App Check di lingkungan debug

Jika Anda telah mendaftarkan aplikasi untuk App Check lalu ingin menjalankan aplikasi di lingkungan yang biasanya tidak akan diklasifikasikan sebagai valid oleh App Check, seperti secara lokal selama pengembangan atau dari lingkungan continuous integration (CI ), Anda dapat membuat build debug aplikasi yang menggunakan penyedia debug App Check, bukan penyedia pengesahan asli.

Lihat Menggunakan App Check dengan penyedia debug di aplikasi web.