边缘函数

使用 Cloudflare Turnstile 实现 CAPTCHA 支持

Cloudflare Turnstile 是一个友好且免费的 CAPTCHA 替代方案，它能与 Supabase 边缘函数无缝协作来保护您的表单。查看 GitHub 示例。

设置步骤

代码实现

在您的项目中创建新函数：

1
supabase functions new cloudflare-turnstile

然后将以下代码添加到 index.ts 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { corsHeaders } from '../_shared/cors.ts'console.log('Hello from Cloudflare Trunstile!')function ips(req: Request) {  return req.headers.get('x-forwarded-for')?.split(/\s*,\s*/)}Deno.serve(async (req) => {  // 如果计划从浏览器调用函数，需要此处理  if (req.method === 'OPTIONS') {    return new Response('ok', { headers: corsHeaders })  }  const { token } = await req.json()  const clientIps = ips(req) || ['']  const ip = clientIps[0]  // 通过调用 "/siteverify" API 端点验证令牌  let formData = new FormData()  formData.append('secret', Deno.env.get('CLOUDFLARE_SECRET_KEY') ?? '')  formData.append('response', token)  formData.append('remoteip', ip)  const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'  const result = await fetch(url, {    body: formData,    method: 'POST',  })  const outcome = await result.json()  console.log(outcome)  if (outcome.success) {    return new Response('success', { headers: corsHeaders })  }  return new Response('failure', { headers: corsHeaders })})

部署服务器端验证边缘函数

1
2
supabase functions deploy cloudflare-turnstilesupabase secrets set CLOUDFLARE_SECRET_KEY=your_secret_key

从您的站点调用函数

1
2
3
const { data, error } = await supabase.functions.invoke('cloudflare-turnstile', {  body: { token },})