next.js 串接 google recaptcha verify2 invisible 新手教學

我不是機器人驗證，在一些敏感資訊的交互時候可以加上，確保操作者確實是本人。

驗證方式Google有提供兩個版本：v2、v3

其中v2版本又分為：checkbox（就是會有一個勾勾要打勾選我不是機器人）、invisible（從背景打api驗證送給後端）

---

申請 google recaptcha 金鑰

今天我們介紹的是v2 invisible版本。

首先要先去申請金鑰，申請好之後他會給你兩組：網頁金鑰、密鑰。

網頁金鑰就是我們要串接在網頁上的，密鑰是給後端使用的。

---

引入 javascript sdk

在你要使用的頁面上加入recaptcha的js

如果你是用next.js：

import Script from "next/script";

<Script
    src="https://www.google.com/recaptcha/api.js"
    async
    defer
></Script>
<div id="recaptchaClient" data-size="invisible"></div>

---

取得 token

新增hook/recaptcha.js檔案

const useRecaptcha = () => {
  const handleGetRecaptcha = () => {
    const win = typeof window !== "undefined" ? window : undefined;
    if (!win || !win.grecaptcha) return;
    return new Promise(res => {
      win.grecaptcha.render("recaptchaClient", {
        sitekey: process.env.GOOGLE_RECAPTCHA_SITE_KEY, // 你的金鑰放這裡
        callback: token => {
          res(token);
          win.grecaptcha.reset();
        },
      });
      win.grecaptcha.execute();
    });
  };

  return { handleGetRecaptcha };
};
export default useRecaptcha;

在剛剛引入js的頁面中可以綁定在按鈕中：

import useRecaptcha from 'hook/recaptcha';
const LoginPage = () => {
  const { handleGetRecaptcha } = useRecaptcha();
  const handleSubmit = async () => {
    const token = await handleGetRecaptcha();
    console.log(token);
  }
}

也可以頁面一進來就載入：

<Script
    src="https://www.google.com/recaptcha/api.js"
    async
    defer
    onLoad={()=>{
        const token = await handleGetRecaptcha();
        console.log(token);
    }}
></Script>