【FireBase】AppCheck 設定方法

前提

Web アプリ版用（Next.js）の設定方法です。

おおまかな手順

1. 「Google reCAPTCHA」で reCAPTCHA のキーを取得する
2. 「Firebase Console」 にて、AppCheck を有効にする
3. コード上に設定を記載する

Google reCAPTCHA キー取得

まず、Google reCAPTCHA ↓ にアクセスする。
https://www.google.com/recaptcha/admin/

reCAPTCHA を新規作成する。
「ラベル」には任意の文字列（キーの名前）を入力。
「reCAPTCHA タイプ」は "v3" を、
「オーナー」は自分のメールアドレスを入力。
「ドメイン」は以下の 2 種類を登録する。

• localhost（開発環境用）
• ～.web.app
  例：test-abc12-web.app
  （FireBase にデプロイした際に表示される URL の、https:// 部分を抜いた URL）

作成完了後、「サイトキー」と「シークレットキー」が付与されるので、両方保存する。

AppCheck 有効化

Firebase Console にて、App Check の設定画面を開く。

アプリタブを開き、App Check を有効にしたい対象のプロジェクトを選択。
"reCAPTCHA 秘密鍵" の入力を求められるので、先ほど保存した reCAPTCHA の「シークレットキー」を入力し、保存。

コードに記載

プロジェクトにて、firebase/app-check をインストール。

.env ファイルに、保存した「サイトキー」を追記。

.env

NEXT_PUBLIC_RECAPTCHA_SITE_KEY = <サイトキーの値>

Firebase の初期化を行っているファイル内に、以下のような内容を追記する。

import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
// <中略>
if (typeof window !== "undefined") {
  // reCaptcha用キー取得
  const siteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
  if (!siteKey) {
    throw new Error("RECAPTCHA_SITE_KEY is not defined");
  }

  // AppCheck初期化
  initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(siteKey),
    isTokenAutoRefreshEnabled: true,
  });
}

後は必要に合わせて ～.rules ファイルに、以下のような内容を追記したりなどで、reCAPTCHA したときしか使えないようにしたりできる。

firestore.rules

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null && request.appCheck != null;
    }
  }
}

以上です。