← Cloudflare Turnstile / turnstile / extensions

Nasazení Turnstile s Google Firebase

Turnstile je dostupné jako rozšíření ↗ hodnotou Firebase od Googlu ↗ jako App Check ↗ ve vaší aplikaci. Díky detekci botů a výzvám služby Cloudflare Turnstile ověříte požadavky na backendové služby Firebase a zajistíte, že s aplikací pracují jen skuteční lidé.

Google Firebase je ucelená platforma pro vývoj aplikací. Nabízí řadu nástrojů a služeb, které vývojářům pomáhají tvořit, vylepšovat a rozvíjet mobilní i webové aplikace.

Firebase App Check pomáhá chránit prostředky Firebase, jako jsou Cloud Firestore, Realtime Database, Cloud Storage a Functions, před zneužitím, například před automatizovanými podvodnými útoky a útoky typu denial of service (DoS). Ověřuje totiž, že příchozí požadavky pocházejí od skutečných návštěvníků a z důvěryhodných zdrojů.

1. Založte projekt Google Firebase

Projekt Firebase vytvoříte tak, že přejdete na Firebase Console ↗.
Vyberte Add Project a podle pokynů vytvořte nový projekt.
Vyberte projekt a přidejte do něj aplikaci.
V přehledu projektu vyberte Add App a zvolte platformu: Web.
Registrace aplikace ↗ a podle návodu si opatřete konfiguraci Firebase.

2. Nastavte Cloudflare Turnstile

Web Cloudflare Turnstile vytvoříte tak, že přejdete na Dashboard Cloudflare Turnstile ↗.
Vytvořte nový widget a získejte sitekey a tajný klíč.
- Doména, kterou u widgetu Turnstile nastavíte, má být doménou vaší webové aplikace.
- Prvek režim widgetu musí být Invisible.

3. Propojte Firebase App Check s Turnstile

3a. Zapněte App Check ve Firebase

Přejděte na Cloudflare Turnstile v katalogu Firebase Extensions ↗.
Nainstalujte rozšíření Cloudflare Turnstile do svého projektu Firebase.
Zapněte Cloud Functions ↗, Artifact Registry ↗, a Secret Manager ↗.
Zadejte secret key z Cloudflare Turnstile a své Firebase App ID.
Vyberte Instalace rozšíření.

3b. Udělte přístup rozšíření Cloudflare

V sekci IAM svého projektu udělte přístup rozšíření Cloudflare výběrem Grant Access v části View by Principals.
Vyberte ext-cloudflare-turnstile z rozbalovací nabídky.
Při filtrování tokenu vyberte Service Account Token Creator.

3c. Nastavte ve své aplikaci Firebase s Turnstile

Vytvořte index.ts .

Doplňte konfiguraci 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. Ověřte token App Check ve své webové aplikaci

Postup ověření tokenu App Check ve webové aplikaci najdete v dokumentaci Firebase: Průvodce ověřením tokenu ↗.

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.
});