Next.jsだけでreCaptcha V3を実装する方法

Glow-botというプロジェクトでweb認証と呼ばれる。ウェブサイトにアクセスしたらロボットかどうかを判定し、Discord上で特定のロールを与えるという機能を作りました。ただ外部ライブラリなしで作りたかったのですが、調べてもあまり出てこなかったので、自力で実装しました。

ただ今回は実装のみを中心に書くので、サイトキーの取得の方法とかを今回は解説するつもりはございません。

必要なライブラリのダウンロード

:::message 今回はTypeScriptを用いての開発なので、普通にJavaScriptだけで開発する場合はここの部分は要りません

$ pnpm add -D @types/grecaptcha

Google reCaptchaのライブラリをロード

import Script from "next/script";

const SITE_KEY: string = "";

const Page = () => {
    return (
        <Script src={`https://www.google.com/recaptcha/api.js?render=${SITE_KEY}`} />
    );
};

export default Page;

プログラマティック

いろんな人がReact.useEffectを使うのかなって想像したと思いますが、コンポーネントが読み込まれたら実行されるので、reCaptchaのライブラリが読み込まれていません。そこでScriptにあるonReadyというパラメータを使おうと思います。

import Script from "next/script";

const SITE_KEY: string = "";

const Page = () => {
    const handleReady = () => {
        grecaptcha.ready(() => {
            grecaptcha.execute({ action: "captcha" })
                .then((token) => {
                    // ここから先はトークンをバックエンドに渡してロボットかどうか判定するのを確かめるため省かせていただきます。
                });
        });
    };

    return (
        <Script src={`https://www.google.com/recaptcha/api.js?render=${SITE_KEY}`} onReady={handleReady} />
    );
};

export default Page;

最後に

今回はページをアクセスした後にすぐに認証するという仕組みを導入したかったので、今回みたいな実装になったのですが、別のページなどでreCaptchaを利用する場合は今回のをベースとしてReact.createSessionなどを使う必要があると思います。では最後まで読んでいただきありがとうございます。