Zenn
🔥

Firebase: AppCheck 導入

2021/07/16に公開
Firebase
Firestore
Next.js
Nuxt
React
tech

Firebase AppCheck 導入

対応サービス

  • Realtime Database
  • Cloud Storage
  • Cloud Functions (callable functions)

前提

Firebase のプロジェクト作成まで完了している

1. reCAPTCHA 登録

https://www.google.com/recaptcha/admin/create

以下の情報を登録

  • ラベル
  • reCAPTCHA タイプ: "reCAPTCHA v3" を選択
  • ドメイン: ドメイン設定

2. コンソール画面からAppCheck登録

https://console.firebase.google.com/

  1. プロジェクトの設定 > App Check を選択

  2. 「1. reCAPTCHA 登録」　で発行された "シークレットキー"を貼り付ける

3. AppCheck の初期化

import 'firebase/app-check';

const appCheck = firebase.appCheck();
appCheck.activate("{「1. reCAPTCHA 登録」　で発行されたサイトキーを貼り付ける}");

4. デプロイして確認

以下は例になりますが、 firebase storageを利用した際に可視化されるグラフになります

Discussion