hCaptcha

hCaptcha Pages Plugin は、hCaptcha トークンを検証します。

npm i @cloudflare/pages-plugin-hcaptcha

yarn add @cloudflare/pages-plugin-hcaptcha

pnpm add @cloudflare/pages-plugin-hcaptcha

bun add @cloudflare/pages-plugin-hcaptcha

import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";

export const onRequestPost: PagesFunction[] = [
	hCaptchaPlugin({
		secret: "0x0000000000000000000000000000000000000000",
		sitekey: "10000000-ffff-ffff-ffff-000000000001",
	}),
	async (context) => {
		// Request has been validated as coming from a human

		const formData = await context.request.formData();

		// Store user credentials

		return new Response("Successfully registered!");
	},
];

この Plugin はルートを 1 つだけ公開します。マウントした場所で利用できます。上の例では functions/register.ts にマウントしているため、/register へのリクエストを検証します。Plugin は、次のプロパティを持つオブジェクト 1 つを引数にしてマウントします。

secret ↗（必須）と sitekey ↗（任意）は、どちらも hCaptcha ダッシュボードで確認できます。

response と remoteip は任意の文字列です。response は検証する hCaptcha トークンです（デフォルトでは、multipart/form-data リクエストから h-captcha-response を取り出します）。remoteip はリクエスターの IP アドレスです（デフォルトはリクエストの CF-Connecting-IP ヘッダーです）。

onError は任意の関数で、Pages Function の context オブジェクトを受け取り、Response の Promise を返します。デフォルトでは、人が読めるエラーの Response を返します。

data.hCaptcha は、後続の Pages Functions（onError 関数を含む）で hCaptcha のレスポンスオブジェクト ↗ として設定されます。