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>後再發送表單")
 }
 }}
>
...