BotFlush 接入文件 | CAPTCHA 整合指南

快速開始

BotFlush 可透過三個步驟完成接入：載入元件、渲染元件，並在後端驗證 token。

1. 載入元件

將 widget script 加到頁面中。它會非同步載入，不會阻塞渲染。

<script src="https://challenge.botflush.com/widget.js" async defer></script>

2. 加入容器

在希望顯示 CAPTCHA 的位置放置容器元素。

<div id="bf-captcha" data-sitekey="YOUR_SITE_KEY"></div>

3. 後端驗證

使用者完成挑戰後會產生 token。將它傳送到伺服器並透過 API 驗證。

POST https://challenge.botflush.com/api/siteverify
Content-Type: application/json

{
  "secret": "YOUR_SECRET_KEY",
  "token": "TOKEN_FROM_CLIENT"
}

JavaScript API

BotFlush.render()

BotFlush.render('bf-captcha', {
  siteKey: 'YOUR_SITE_KEY',
  callback: function(token) {
    console.log('Verified:', token);
  }
});

BotFlush.reset()

BotFlush.reset();

BotFlush.getResponse()

var token = BotFlush.getResponse();

遷移說明

BotFlush 支援熟悉的 widget 和 siteverify 模式。遷移通常從 script URL、金鑰和驗證端點開始；正式上線前請測試 callback 與錯誤處理。

<!-- Before -->
<script src="https://legacy-captcha.example/api.js"></script>
<div class="captcha-widget" data-sitekey="LEGACY_SITE_KEY"></div>

<!-- After -->
<script src="https://challenge.botflush.com/widget.js"></script>
<div class="captcha-widget" data-sitekey="BOTFLUSH_KEY"></div>

隱私控制

BotFlush 圍繞最小化資料使用、帳戶層級控制與企業審核流程設計。控制台仍是目前可用隱私與資料控制能力的準確資訊來源。

驗證模式

BotFlush 提供多種挑戰引擎。你可以在控制台中為每個站點設定允許的引擎。

引擎	類型	描述
Invisible Free	背景	無需使用者互動的工作量證明驗證
Visual Match	互動	圖片模式匹配驗證
Emoji Click	互動	從視覺網格中選擇匹配的表情符號
Invisible Max	背景	GPU 加速的工作量證明驗證

後端驗證

驗證端點接受標準 POST 請求。請選擇你的後端語言查看對應範例。

const response = await fetch('https://challenge.botflush.com/api/siteverify', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    secret: process.env.BOTFLUSH_SECRET,
    token: req.body['bf-token']
  })
});

const result = await response.json();
if (!result.success) {
  return res.status(403).send('Verification failed');
}

import requests

response = requests.post('https://challenge.botflush.com/api/siteverify', json={
    'secret': BOTFLUSH_SECRET,
    'token': request.form['bf-token'],
})

if not response.json().get('success'):
    abort(403)

$payload = json_encode([
  'secret' => getenv('BOTFLUSH_SECRET'),
  'token' => $_POST['bf-token'] ?? ''
]);

$context = stream_context_create(['http' => [
  'method' => 'POST',
  'header' => 'Content-Type: application/json',
  'content' => $payload,
]]);

$response = file_get_contents('https://challenge.botflush.com/api/siteverify', false, $context);
$result = json_decode($response, true);
if (empty($result['success'])) { http_response_code(403); exit; }

payload, _ := json.Marshal(map[string]string{
    "secret": os.Getenv("BOTFLUSH_SECRET"),
    "token":  r.FormValue("bf-token"),
})

resp, err := http.Post("https://challenge.botflush.com/api/siteverify",
    "application/json", bytes.NewBuffer(payload))
if err != nil { http.Error(w, "verify failed", 502); return }
defer resp.Body.Close()

var result struct{ Success bool }
json.NewDecoder(resp.Body).Decode(&result)
if !result.Success { w.WriteHeader(http.StatusForbidden); return }

HttpClient client = HttpClient.newHttpClient();
String body = """
{
  "secret": "%s",
  "token": "%s"
}
""".formatted(System.getenv("BOTFLUSH_SECRET"), token);

HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("https://challenge.botflush.com/api/siteverify"))
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(body))
    .build();

HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
Map<String, Object> result = new ObjectMapper().readValue(response.body(), Map.class);
if (!Boolean.TRUE.equals(result.get("success"))) {
    throw new SecurityException("Verification failed");
}

using var client = new HttpClient();
var payload = new {
    secret = Environment.GetEnvironmentVariable("BOTFLUSH_SECRET"),
    token = Request.Form["bf-token"].ToString()
};

var response = await client.PostAsJsonAsync(
    "https://challenge.botflush.com/api/siteverify",
    payload);
var result = await response.Content.ReadFromJsonAsync<VerifyResult>();

if (result?.Success != true) {
    return Forbid();
}

下載

Node Inspector — Chrome 擴充功能

安裝: 下載並解壓縮後，開啟 Chrome 擴充功能頁面，啟用開發人員模式，並載入解壓縮後的資料夾。

下載 Node Inspector (.zip)

接入指南