👌

Next.js で AppCheck(Firebase) を使う

2022/07/04に公開

Firebase

Next.js(Vercel) ＆ Firebase で作成したサービスに AppCheck を組み込んだ手順をまとめました。AppCheck はバックエンドとして信頼できる所以外のアクセスを制限しようというものです。

前提条件

Next.js でサービスを作成し、Vercel にデプロイして運用しています。
バックエンドに Firebase を利用しています。

reCHAPTA キー取得

まず、認証につかうキーを取得します。

https://www.google.com/recaptcha/about/

「v3 Admin Console」を選択
「＋（作成）」を選択
項目の入力

項目	内容（例）	備考
ラベル	tekito.vercel.app	識別のできる名前
reCAPTCHA タイプ	reCAPTCHA v3
ドメイン	tekito.vercel.app	独自ドメインがあれば追加
オーナー	(自分のgoogleアカウント)	既定値
reCAPTCHA 利用条件に同意する	チェック
アラートをオーナーに送信する	チェック

入力が終わったら「送信」をクリックします。生成された2つのキーのうちサイトキーはNext.jsに実装し、シークレットキーはFirebaseに登録して使用します。

AppCheck(Firebase) 登録

Firebase コンソールにログインします。
Firebae の対象プロジェクト内のプロジェクトショートカットから AppCheck　を起動します。
初回であれば「始める」をクリックします。
ステータスの下にある「登録」をクリックします。
今回は reCAPTCHA v3 を使うので「reCHAPTCHA」を選択します。
「reCAPTCHA 秘密鍵」の欄に、先ほど取得した「シークレットキー」を入力（貼付）します。トークンの有効期間はそのまま既定値とします。入力できたら「保存」をクリックします。

Next.js 側の実装

Firebase の初期化処理の後に AppCheck の初期化処理を入れます。
私の場合は _app.tsx の中に firebase.ts をインポートしているので以下の感じで実装しました。

_app.tsx にインポートしておいて

/src/pages/_app.tsx

import '../lib/firebase'
（以下省略）

以下の感じで作成しました。

/src/lib/firebase.ts

import { getApp, getApps, initializeApp } from 'firebase/app'
import { initializeAppCheck, ReCaptchaV3Provider, getToken } from 'firebase/app-check'

// 環境変数から FirebaseConfig の読み込みをしています
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

// Firebase 初期化処理
export const firebase = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp()

// FIREBASE_APPCHECK_DEBUG_TOKEN の定義(TypeScript用)
declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean | string | undefined
}

// AppCheck 初期化処理
if (typeof document !== 'undefined') {
  // 1.デバック環境用設定
  if (process.env.NODE_ENV === 'development') {
    window.self.FIREBASE_APPCHECK_DEBUG_TOKEN = true // デバッグ用文字列の生成
  }
  // 2.AppCheck 初期化
  const appCheck = initializeAppCheck(firebase, {
    provider: new ReCaptchaV3Provider('ここにreCHAPTAサイトキーを貼り付け'),
    isTokenAutoRefreshEnabled: true,
  })
  // 3.AppCheck　結果 ＆ トークン確認
  getToken(appCheck)
    .then(() => {
      console.log('AppCheck:Success')
    })
    .catch((error) => {
      console.log(error.message)
    })
}

AppCheck 初期化の部分に取得した「サイトキー」の方を貼り付け、「保存」をクリックします。

開発環境用トークンの登録

開発環境からのアクセスは localhost からのアクセスとなり、このままでは「未確認のリクエスト」になってしまうので、トークンを登録してエラーが出ないようにします。

Next.js をデバックモードで起動します。
Chrome の Console　にトークンが出力されます。（トークンの部分を削除しています）
トークンの文字列をコピーし、Firebase の AppCheck　を再度開きます。
タブが「アプリ」の方になっていれば、先ほど reCAPTCHA を登録した画面になります。証明書右側の縦3点の部分（メニューを開く）をクリックして、「デバッグトークンを管理」をクリックします。
「デバッグトークン」をクリックし、デバックトークンを登録します。名前は適当な文字列、値は先ほど Next.js のログに表示された文字列を貼り付けます。入力したら「完了」をクリックします。
完了です。これで開発環境（localhost）からFirebaseにアクセスしてもエラーが表示されなくなります。成功時にログに「AppCheck:Success」が表示されているか確認できます。（トークン取得時にログが表示されるようにしています。）