在 Google Firebase 中实现 Turnstile

Turnstile 在 Google 的 Firebase ↗ 平台上作为一个 App Check ↗ 提供程序以扩展的形式可用 ↗。您可以利用 Cloudflare Turnstile 的 bot 检测和质询功能，确保对您 Firebase 后端服务的请求得到验证，并且只有真实的真实访客才能与您的应用程序进行交互。

Google Firebase 是一个综合性应用程序开发平台，提供各种工具和服务来帮助开发者构建、改进和发展其移动和 Web 应用程序。

Firebase App Check 通过确保传入请求来自合法访问者和受信任的来源，来帮助保护 Firebase 资源（如 Cloud Firestore、Realtime Database、Cloud Storage 和 Functions）免受滥用（例如自动化欺诈攻击和拒绝服务 (DoS) 攻击）。

1. 设置 Google Firebase 项目

访问 Firebase 控制台 (Firebase Console) ↗ 创建 Firebase 项目。
选择 Add Project（添加项目） 并按照提示创建新项目。
通过选择您的项目在项目中添加一个应用 (app)。
在项目概述中，选择 Add App（添加应用） 并选择平台：Web。
注册您的应用 (Register your app) ↗ 并按照指南获取您的 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 的密匙和您的 Firebase App ID。
选择 Install extension（安装扩展）。

3b. 授予对 Cloudflare 扩展的访问权限

在您项目的 IAM 部分下，通过在 View by Principals（按成员查看） 下选择 Grant Access（授予访问权限），来授予对 Cloudflare 扩展的访问权限。
从下拉菜单中选择 ext-cloudflare-turnstile。
过滤角色时，选择 Service Account Token Creator（服务账户令牌创建者）。

3c. 在您的应用中使用 Turnstile 配置 Firebase

创建一个 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);

// 初始化 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 });

// 从 Cloudflare Turnstile 检索 App Check 令牌
cpo.getToken().then(({ token }) => {
    document.getElementById('app-check-token').innerHTML = token;
});

3d. 在您的 Web 应用程序中验证 App Check 令牌

要在您的 Web 应用程序中验证 App Check 令牌，请参阅 Firebase 的令牌验证指南 (Token Verification guide) ↗。

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("未授权");
    }

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

        // 如果 verifyToken() 成功，则继续执行堆栈中的下一个中间件函数。
        return next();
    } catch (err) {
        res.status(401);
        return next("未授权");
    }
}

expressApp.get("/yourApiEndpoint", [appCheckVerification], (req, res) => {
    // 处理请求。
});