Next.jsとCloudFunctionsでGoogleReCAPTCHAを設置する方法

皆さんセキュリティ対策ってどのようにされていますか？

私はセキュリティについてそこまで詳しくないので、個人で開発する際にはGoogleReCAPTCHAを多用しております。

とても便利ですし、なんと言っても簡単！

そんなGoogleReCAPTCHAをNext.jsで使用する方法をお教えします。

素のReactでも同じように出来ますので、ぜひ活用ください。

それでは説明していきます！

ReCAPTCHAの設定

こちらの「V3 Admin Console」から、新しいサイトを登録してください。

・ラベルは何でもよいです
・タイプはV3を選んでください
・ドメインは使用するドメインをご入力ください。
例： localhost, example.vercel.app

登録するとサイトキーとシークレットキーが表示され、後で使うのでどこかにメモしておいてください。

パッケージのインストール

Next.jsのプロジェクトでreact-google-recaptcha-v3をインストールして下さい。

npm i react-google-recaptcha-v3

_app.tsxにて、GoogleReCaptchaProviderでラッピング

_app.tsx

import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";

// 省略

return (
    <GoogleReCaptchaProvider
       reCaptchaKey= "サイトキーをここに入れる"
       language="ja"
    >
        <Component {...pageProps} />
    </GoogleReCaptchaProvider>
)

そしたらトークンを発行してみましょう！

recaptcha.tsx

import { useGoogleReCaptcha } from "react-google-recaptcha-v3";

const { executeRecaptcha } = useGoogleReCaptcha();

const handleReCaptchaVerify = async () => {
        if (executeRecaptcha) {
            const token = await executeRecaptcha("example");
            console.log(token)
        } else {
            alert("エラーが発生しました")
        }
    };

ボタンのクリックイベントとかでhandleReCaptchaVerify を実行してみましょう。

コンソール画面で長い文字列が出力されればOK！

次は、ここで発行したキーをもとにReCAPTCHAの検証を行ってみましょう。

CloudFunctionsの設定

https通信を行うので、ご自身の好きなパッケージを使ってください。

この記事ではaxiosを使います。

index.ts

exports.VerifyRecaptcha = functions.region("asia-northeast-1").https.onRequest(async (req, res) => {
    // フロントで発行したトークンを受け取る
    const token = req.query.token;

    // 
    await axios
        .post(
            `https://www.google.com/recaptcha/api/siteverify?secret="シークレットキーを入れる"&response=${token}`,
        )
        .then((result) => {
            console.log(result.data)
        })
        .catch(() => {
            throw new functions.https.HttpsError("internal", "Internal Server Error");
        }))

{
    success: true,
    challenge_ts: '2021-08-28T07:22:42Z',
    hostname: 'localhost',
    score: 0.9,
    action: 'example'
}

このようなデータが出力されればOK！

successがfalseなら認証失敗となり、scoreが大体0.5以下であればスパムの可能性が高いです。

なので、セキュリティをどれだけ強くするかによってそこは変えてみてください。

ちなみにCloudFunctionsでなくても、AWSのLamdaでも実装出来ます。（検証はしていない）

いかがだったでしょうか？

セキュリティ対策を全て自分で行うとなるとかなり面倒ですよね。

なので、GoogleReCAPTCHAが気になる方はぜひ使ってみてください！

以上、「Next.jsとCloudFunctionsでGoogleReCAPTCHAを設置する方法」でした！

Thank you for reading