程式碼改動長這樣
Before — hCaptcha
<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>After — CaptchaLa
<button id="login-btn">Sign in</button>
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>
<script>
loadCaptchala(() => Captchala.init({ appKey: 'YOUR_APP_KEY', action: 'login' })
.onSuccess(res => onToken(res.token))
.bindTo('#login-btn'));
</script>Before — hCaptcha server verify (Node)
const res = await fetch('https://api.hcaptcha.com/siteverify', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
secret: process.env.HCAPTCHA_SECRET,
response: req.body['h-captcha-response'],
}),
})
const data = await res.json()
if (!data.success) return res.status(400).json({ error: 'bot' })After — CaptchaLa server verify (Node)
const res = await fetch('https://apiv1.captcha.la/v1/validate', {
method: 'POST',
headers: {
'X-App-Key': process.env.CAPTCHALA_APP_KEY,
'X-App-Secret': process.env.CAPTCHALA_APP_SECRET,
'Content-Type': 'application/json',
},
body: JSON.stringify({ pass_token: req.body['captchala-token'] }),
})
const { data } = await res.json()
if (!data || !data.valid) return res.status(400).json({ error: 'bot' })遷移步驟
- 1
註冊並取得你的 App Key + Secret
建立免費 CaptchaLa 帳號、新增一個站點,複製 App Key(公開)與 App Secret(伺服器端)。免綁卡。
- 2
替換元件標籤
把 h-captcha class 換成 captchala,data-sitekey 換成 data-app-key,script src 換成我們的 CDN URL。結構維持一致。
- 3
更新隱藏欄位名稱
hCaptcha 注入 h-captcha-response,CaptchaLa 注入 captchala-token。如果你在表單處理程式中依名稱引用該欄位,就尋找替換它。
- 4
更新伺服器驗證
將端點改為 apiv1.captcha.la/v1/validate。我們使用 JSON(hCaptcha 用 form-urlencoded),所以要更新 Content-Type 與 body。回應中仍有 valid 旗標(data.valid)——分支邏輯不必改。
- 5
逐步上線
先在一個表單上換成 CaptchaLa,測量幾小時的轉化與驗證率。由於少了圖像分類回合,多數團隊會立刻看到完成率持平或提升。
常見問題
我的 hCaptcha 帳號會怎樣?
什麼都不會——維持原樣、停止送出請求即可。沒有合約、沒有通知步驟。帳號會閒置在那。如果你想正式關閉,hCaptcha 有自助刪除帳號的選項。
Core Web Vitals 會改善嗎?
通常會。hCaptcha 的元件在表單頁面通常會讓 LCP 增加 400–600ms。CaptchaLa 的元件目標是 <100ms。確切差距取決於頁面其他預算,但在表單密集的頁面上差異很明顯。
我正在用的 hCaptcha Enterprise 功能呢?
多數企業版功能(自訂主題、進階風險打分、分析儀表板)在 CaptchaLa 的標準方案裡都有直接對應。文件中的遷移頁面列出了每項功能及其 CaptchaLa 對應。