formにid足すだけでreCAPTCHA v3を自動適用させる

やりたいこと

• formに id="recaptcha" を足すだけでreCAPTCHAが動作するようにしたい。
• トークン期限2分は短すぎるので送信の直前にトークンを取得したい。

必要なもの

• jQuery
  • JavaScriptの文法に書き換えるなら不要。
• reCAPTCHA サイトキー
  • reCAPTCHAのサイトで発行できる。

準備

JavaScript

以下のコードを入れる。
アクション名、サイトキー、id名は必要に応じて書き換える。

js

$(function () {
    // 任意のアクション名
    let action = "LOGIN";
    // reCAPTCHAのサイトキー
    let siteKey = "SITE KEY";
    // 適用したいformのid名
    let formId = "#recaptcha";

    // api.js読み込み
    if ($(formId).length) {
        $("<script>", {
            src: "https://www.google.com/recaptcha/api.js?render=" + siteKey,
        }).appendTo("head");
    }

    // 送信イベント
    $(formId).submit(function (e) {
        let form = this;
        e.preventDefault();
        // トークンを受け取るinputを生成
        $("<input>", {
            type: "hidden",
            name: "recaptchaResponse",
            id: "recaptchaResponse",
        }).appendTo(form);
        // トークンを取得
        grecaptcha.ready(function() {
                grecaptcha.execute(siteKey, {
                    action: action,
                }).then(function(token) {
                    $("#recaptchaResponse").val(token);
                    // 送信
                    $(form).unbind("submit").submit();
                });
            });
    });
});

HTML

あとはreCAPTCHAを適用したいformにjs側で指定したid名をつけるだけ。
api.js はスクリプト側で挿入するため、HTML側での挿入は必要なし。

html

<form id="recaptcha"> <!-- idを入れる -->
    <input type="email">
    <input type="password">
    <button type="submit">送信</button>
</form>

結果

うごくよー