ReCaptcha 是 Google 對表單垃圾郵件和濫用的解決方案。
這是一個非常有價值的工具。如果您還沒有在 https://www.google.com/recaptcha 創建帳戶,請先創建並添加您的網站域名。
選擇 v2,並選擇「我不是機器人」複選框:
你會獲得一個站點金鑰和站點密鑰。
將密鑰儲存在您的.env
文件中:
RECAPTCHA_SECRET=<....>
現在,在您的 Next.js 網站中使用 npm 安裝react-google-recaptcha
:
npm install react-google-recaptcha
現在,在具有表單的頁面中引入它:
import ReCAPTCHA from 'react-google-recaptcha'
並將其添加到 JSX 中:
<ReCAPTCHA size="normal" sitekey="<YOUR SITE KEY>" />
您應該在表單中看到它:
現在,如果您嘗試提交表單,它能正常工作,因為它什麼都不做。任何人,包括機器人,在不點擊「我不是機器人」按鈕的情況下都可以成功提交表單。
您需要在服務器端驗證驗證碼,以使其有用。
假設您將表單發送到 Next.js API 路由。在其中,添加一個validateCaptcha
方法:
const validateCaptcha = (response_key) => {
return new Promise((resolve, reject) => {
const secret_key = process.env.RECAPTCHA_SECRET
const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secret_key}&response=${response_key}`
fetch(url, {
method: 'post'
})
.then((response) => response.json())
.then((google_response) => {
if (google_response.success == true) {
resolve(true)
} else {
resolve(false)
}
})
.catch((err) => {
console.log(err)
resolve(false)
})
})
}
現在,在處理請求的主代碼之前,添加以下代碼:
if (!(await validateCaptcha(req.body['g-recaptcha-response']))) {
return res.redirect(`/captcha`)
}
delete req.body['g-recaptcha-response']
在 Next.js 中創建 /captcha
頁面,以在驗證碼檢查無效時進行重定向。
在前端,在提交表單之前,應該添加一些驗證:
<form
method='post'
action='/api/new'
enctype='multipart/form-data'
onSubmit={event => {
if (grecaptcha.getResponse() === '') {
event.preventDefault()
alert("請點擊<I'm not a robot>後再發送表單")
}
}}
>
...