Google Firebase で Turnstile を実装する

Turnstile は、Google の Firebase ↗ プラットフォームの App Check ↗ プロバイダーとして、拡張機能 ↗ で利用できます。Cloudflare Turnstile のボット検出とチャレンジ機能を使い、Firebase のバックエンドサービスへのリクエストを検証し、実際の人間の訪問者だけがアプリケーションとやり取りできるようにします。

Google Firebase は、モバイルアプリと Web アプリの構築、改善、成長を支援するツールとサービスをまとめたアプリ開発プラットフォームです。

Firebase App Check は、Cloud Firestore、Realtime Database、Cloud Storage、Functions などの Firebase リソースを、自動詐欺攻撃や DoS（Denial of Service）攻撃などの不正利用から守ります。受信リクエストが正当な訪問者と信頼できる送信元からのものであることを確認します。

1. Google Firebase プロジェクトを用意する

Firebase Console ↗ を開き、Firebase プロジェクトを作成します。
プロジェクトを追加 を選び、案内に従って新しいプロジェクトを作成します。
プロジェクトを選んで、アプリを追加します。
プロジェクトの概要で アプリを追加 を選び、プラットフォームに Web を選びます。
アプリを登録 ↗ し、ガイドに従って Firebase の設定を取得します。

2. Cloudflare Turnstile を設定する

Cloudflare Turnstile ダッシュボード ↗ を開き、Cloudflare Turnstile サイトを作成します。
新しいウィジェットを作成し、sitekey と secret key を取得します。
- Turnstile ウィジェットに設定するドメインは、Web アプリのドメインにしてください。
- ウィジェットモードは Invisible にしてください。

3. Firebase App Check と Turnstile を統合する

3a. Firebase で App Check を有効にする

Firebase Extensions ハブの Cloudflare Turnstile ↗ を開きます。
Cloudflare Turnstile 拡張機能を Firebase プロジェクトにインストールします。
Cloud Functions ↗、Artifact Registry ↗、Secret Manager ↗ を有効にします。
Cloudflare Turnstile の secret key と Firebase App ID を入力します。
拡張機能をインストール を選びます。

3b. Cloudflare 拡張機能へのアクセスを許可する

プロジェクトの IAM で、プリンシパルで表示 の アクセスを許可 を選び、Cloudflare 拡張機能へのアクセスを許可します。
ドロップダウンメニューから ext-cloudflare-turnstile を選びます。
トークンを絞り込むときは、Service Account Token Creator を選びます。

3c. アプリで Firebase を Turnstile と一緒に設定する

index.ts ファイルを作成します。

Firebase の設定を追加します。

import { initializeApp } from "firebase/app";
import { getAppCheck, initializeAppCheck } from "firebase/app-check";
import {
    CloudflareProviderOptions,
} from '@cloudflare/turnstile-firebase-app-check';

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);

// Initialize App Check
const siteKey = 'YOUR-SITEKEY';
const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';

const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
const provider = new CustomProvider(cpo);

initializeAppCheck(app, { provider });

// retrieve App Check token from Cloudflare Turnstile
cpo.getToken().then(({ token }) => {
    document.getElementById('app-check-token').innerHTML = token;
});

3d. Web アプリケーションで App Check トークンを検証する

Web アプリケーションで App Check トークンを検証するには、Firebase のトークン検証ガイド ↗ を参照してください。

import express from "express";
import { initializeApp } from "firebase-admin/app";
import { getAppCheck } from "firebase-admin/app-check";

const expressApp = express();
const firebaseApp = initializeApp();

const appCheckVerification = async (req, res, next) => {
    const appCheckToken = req.header("X-Firebase-AppCheck");

    if (!appCheckToken) {
        res.status(401);
        return next("Unauthorized");
    }

    try {
        const appCheckClaims = await getAppCheck().verifyToken(appCheckToken);

        // If verifyToken() succeeds, continue with the next middleware function in the stack.
        return next();
    } catch (err) {
        res.status(401);
        return next("Unauthorized");
    }
}

expressApp.get("/yourApiEndpoint", [appCheckVerification], (req, res) => {
    // Handle request.
});