如何在 Next.js 表單中添加 ReCaptcha
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....