INTEGRITY Документация

← Cloudflare Turnstile / turnstile / extensions

Внедрение Turnstile с помощью Google Firebase

Turnstile доступно в виде расширения ↗ с Firebase от Google ↗ в качестве провайдера App Check ↗ для защиты приложения. Обнаружение ботов и проверки Cloudflare Turnstile помогают убедиться, что запросы к серверным сервисам Firebase проверены и что с приложением работают только настоящие посетители.

Google Firebase представляет собой комплексную платформу для разработки приложений, которая предлагает набор инструментов и сервисов для создания, улучшения и развития мобильных и веб-приложений.

Firebase App Check защищает ресурсы Firebase, такие как Cloud Firestore, Realtime Database, Cloud Storage и Functions, от злоупотреблений: автоматизированного мошенничества и атак типа «отказ в обслуживании» (DoS). Для этого он проверяет, что входящие запросы приходят от настоящих посетителей и доверенных источников.

1. Создайте проект Google Firebase

  1. Чтобы создать проект Firebase, перейдите в Firebase Console ↗.
  2. Выберите Add Project и следуйте подсказкам, чтобы создать новый проект.
  3. Выберите проект и добавьте в него приложение.
  4. В обзоре проекта выберите Add App и выберите платформу: Веб.
  5. Регистрация приложения ↗ и следуйте руководству, чтобы получить конфигурацию Firebase.

2. Настройте Cloudflare Turnstile

  1. Чтобы создать сайт Cloudflare Turnstile, перейдите в Панель управления Cloudflare Turnstile ↗.
  2. Создайте новый виджет и получите sitekey и секретный ключ.
    • В настройках виджета Turnstile указывайте домен вашего веб-приложения.
    • режим виджета должен быть Invisible.

3. Интегрируйте Firebase App Check с Turnstile

3a. Включите App Check в Firebase

  1. Перейдите в Cloudflare Turnstile в каталоге Firebase Extensions ↗.
  2. Установите расширение Cloudflare Turnstile в свой проект Firebase.
  3. Включите Cloud Functions ↗, Artifact Registry ↗, а также Secret Manager ↗.
  4. Введите secret key из Cloudflare Turnstile и идентификатор Firebase App ID.
  5. Выберите Установка расширения.

3b. Предоставьте доступ расширению Cloudflare

  1. Предоставьте расширению Cloudflare доступ в разделе IAM вашего проекта, выбрав Grant Access в разделе Просмотр по субъектам.
  2. Выберите ext-cloudflare-turnstile в раскрывающемся списке.
  3. При фильтрации токена выберите Service Account Token Creator.

3c. Настройте Firebase в приложении для работы с Turnstile

  1. Создайте index.ts файл.

  2. Добавьте конфигурацию 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. Проверьте токен App Check в веб-приложении

Чтобы проверить токен 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.
});