はじめに
タイトル通りですが、この記事はCloud Firestore
で特定のアプリケーションのみアクセスを許可する方法について書いています。設定方法はiOS、Android、Webとプラットフォームごとに違いますが、ここではWebについてのみ説明しています。
また、サンプルコードではVue.js
、Javascript
を使用しています。
前提
- Firebaseプロジェクトを作成済み
- FirebaseにWebアプリを作成済み
- Cloud Firestoreを構築済み
App Checkとは
App Check は、未承認のクライアントがバックエンド リソースにアクセスするのを防ぐことで、API リソースを不正使用から保護します。Firebase サービス、Google Cloud サービス、およびお客様の API を連携して、リソースを安全に保ちます。
上記は公式ドキュメントから引用文です。
App Check
は指定したクライアントのみFirebase
のリソースにアクセスできるように設定するためのサービスになります。
Cloud Firestore
は接続情報さえあれば誰でもアクセスできるのですが、この情報は色々なところから誰でも見られるようになっています。このことについては下記の記事がとても参考になりました。
上記のような理由からアクセスの制限を行う必要があり、それをApp Checkで行うことができます。
Cloud FirestoreとApp Checkの連携方法
各種設定を行うと最終的に上記のような状態になります。(正確に表せていない可能性がありますのであくまでもイメージと思っていただけると幸いです)
App Check
を設定したサービスはリクエストする際に専用のトークンを含まないとアクセスできなくなります。トークンを取得するために図の①と②のプロセスが必要になります。このプロセスは全てApp Check SDK
が自動で行ってくれるのであまり意識する必要はありません。
図のような状態にするには以下の4つのことを行う必要があります。
- reCAPTCHA Enterpriseのサイトキーを発行する
- App Checkでウェブアプリに対してreCAPTCHA Enterpriseのサイトキーを設定する
- Cloud FirestoreにApp Checkを適用する
- App Check SDKをアプリケーションに導入する
それぞれ説明していきます。
reCAPTCHA Enterpriseのサイトキーを発行する
以下の手順でreCAPTCHA Enterprise
を設定し、キーを発行します。
- 下記にアクセスする
https://console.cloud.google.com/security/recaptcha?project=_&hl=ja - プロジェクト選択画面で設定したいプロジェクトを選ぶ
-
reCAPTCHA Enterprise API
の画面で青色の「有効にする」ボタンを押す - 遷移後の画面で「キーを作成」押す
- プラットフォームの種類は「ウェブサイト」を選択し、ドメインを追加する。(ローカル環境の場合「localhost」のみでよい)
- キーIDをメモする
App Checkでウェブアプリに対してreCAPTCHA Enterpriseのサイトキーを設定する
Firebase
の管理画面にアクセスし、以下の手順で設定を行う。
- 左のナビゲーションから「全てのプロダクト」を選択
- 「構築」のブロックの「App Check」を選択
-
App Check
の画面で「始める」を押す -
App Check
の設定画面で「アプリ」のタブを押して、設定するアプリを選択する - 証明書プロバイダ選択画面で
reCAPTCHA Enterprise
を選択する - サイトキーの入力フォームにメモしておいたキーIDを入力し、保存する
Cloud FirestoreにApp Checkを適用する
引き続きApp Check
の設定画面で以下の作業を行います。
-
App Check
の設定画面で「API」のタブを押して、「Cloud Firestore」を選択する - ダイアログが開くので「適用」ボタンを押すと、さらにダイアログが開くので同じように「適用」ボタンを押す
App CheckのSDKを導入
アプリケーションに対してSDKを導入していきます。言語はJavascriptで、npm等を使ってライブラリ使用する想定です。
下記のコマンドでfirebase
のライブラリを導入すればApp Check
のライブラリも使用することができます。
npm install firebase
次のソースコードはApp Checkの初期化を行うためのもので、公式ドキュメントから引用しました。
new ReCaptchaEnterpriseProvider
の引数にreCAPTHA Enterprize
のキーIDを設定します。isTokenAutoRefreshEnabled
はトークンを自動的に更新するかどうかを設定するもので、true
だと自動で更新してくれるようになります。
import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
const app = initializeApp({
// Your Firebase configuration object.
});
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
Cloud Firestoreへアクセスしてみる
設定が完了しましたのでCloud Firestore
にアクセスし、制限ができているかどうかを確認します。
まずアクセスできるかどうかを確認してみます。
<script setup>
import { doc, setDoc, getFirestore } from "firebase/firestore"
const db = getFirestore()
const postFirestore = () => {
setDoc(doc(db, "cities", Math.random().toString(32).substring(2)), {
name: "Los Angeles",
state: "CA",
country: "USA",
})
console.log('created')
}
</script>
<template>
<button @click="postFirestore">作成</button>
</template>
上記の作成ボタンを押すとCloud Firestore
にデータが挿入されていることが確認できます。
次にアクセスが失敗するように設定を変更してみます。
reCAPTCHA Enterpriseのサイトキーを発行した際にドメインを設定しましたが、そちらを削除してみます。
先ほどのリクエストの際にキャッシュが保存されてしまっているため、そのままリクエストを行うと成功してしまいます。ブラウザをシークレットモードで開いて「作成」ボタンを押してみてください。するとページを開いた時点で既に下記のエラーが発生していますが、「作成」ボタンを押した時にも発生しており、アクセスができません。これで制限ができていることが確認できます。
chunk-V3SDOGWW.js?v=69717bc6:889 [2024-01-15T13:54:00.095Z] @firebase/app-check: FirebaseError: AppCheck: ReCAPTCHA error. (appCheck/recaptcha-error).
at _ReCaptchaEnterpriseProvider.getToken (firebase_app-check.js?v=69717bc6:869:27)
at async getToken$2 (firebase_app-check.js?v=69717bc6:506:13)
at async Refresher.operation (firebase_app-check.js?v=69717bc6:600:18)
at async Refresher.process (firebase_app-check.js?v=69717bc6:100:7)
終わりに
思ったより簡単に導入できてFirebase便利だな〜と思いました。
参考