/

如何在 Next.js 表單中添加 ReCaptcha

如何在 Next.js 表單中添加 ReCaptcha

ReCaptcha 是 Google 對表單垃圾郵件和濫用的解決方案。

這是一個非常有價值的工具。如果您還沒有在 https://www.google.com/recaptcha 創建帳戶，請先創建並添加您的網站域名。

選擇 v2，並選擇「我不是機器人」複選框：

你會獲得一個站點金鑰和站點密鑰。

將密鑰儲存在您的.env文件中：

1
RECAPTCHA_SECRET=<....>

現在，在您的 Next.js 網站中使用 npm 安裝react-google-recaptcha：

1
npm install react-google-recaptcha

現在，在具有表單的頁面中引入它：

1
import ReCAPTCHA from 'react-google-recaptcha'

並將其添加到 JSX 中：

1
<ReCAPTCHA size="normal" sitekey="<YOUR SITE KEY>" />

您應該在表單中看到它：

現在，如果您嘗試提交表單，它能正常工作，因為它什麼都不做。任何人，包括機器人，在不點擊「我不是機器人」按鈕的情況下都可以成功提交表單。

您需要在服務器端驗證驗證碼，以使其有用。

假設您將表單發送到 Next.js API 路由。在其中，添加一個validateCaptcha方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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)
 })
 })
}

現在，在處理請求的主代碼之前，添加以下代碼：

1
2
3
4
if (!(await validateCaptcha(req.body['g-recaptcha-response']))) {
 return res.redirect(`/captcha`)
}
delete req.body['g-recaptcha-response']

在 Next.js 中創建 /captcha 頁面，以在驗證碼檢查無效時進行重定向。

在前端，在提交表單之前，應該添加一些驗證：

1
2
3
4
5
6
7
8
9
10
11
12
<form
 method='post'
 action='/api/new'
 enctype='multipart/form-data'
 onSubmit={event => {
 if (grecaptcha.getResponse() === '') {
 event.preventDefault()
 alert("請點擊<I'm not a robot>後再發送表單")
 }
 }}
>
...

tags: [“Next.js”, “ReCaptcha”, “form”, “spam”, “validation”]