Google reCAPTCHAの設定方法

Google reCAPTCHAとは

botによるWebサイトへの不正アクセス、スパム攻撃対策として、Googleが提供するreCAPTCHA（リキャプチャ）を導入する方法を解説します。対応バージョンはv3です。
※利用状況により、reCAPTCHA Enterprize（有料版）に移行する必要があります。

システム設定で設定後、シート単位でreCAPTCHAの動作箇所が定義できます。

reCAPTCHAのサイトキーとシークレットキーを取得

reCAPTCHAの利用に際し、サイトキーとシークレットキーの取得が必要です。

① Googleアカウントにログインします。

② reCAPTCHA 管理コンソールからサイト情報を登録します。

• ラベル名：サイト情報がわかるreCAPTCHAのラベル名
• reCAPTCHAタイプ：スコアベース（v3)を選択
• サイトのドメイン：reCAPTCHAを実装するウェブサイトのドメインを指定

③ 設定完了画面で、サイトキーとシークレットキーを取得します。
※設定ページ（設定に移動）からも取得できます。

システム設定 | サイト設定

次に、パレットCMSのシステム設定から、Google reCAPTCHAを有効化します。

コンテンツ設定

以下のコンテンツでreCAPTCHAを埋め込むことができます。

管理者ログイン画面は、システム設定で「有効」化すれば機能するため、コンテンツ側の対応はありません。

コンテンツタイプ	コンテンツ
user	ユーザー登録、ユーザーログイン
manager	マネージャー登録、マネージャーログイン
entry	エントリー登録
form	フォーム登録
review	レビュー登録

コンテンツには標準の変数と開発者が自由に定義できる変数を用意。自由度の高い組み込みが可能です。

reCAPTCHA用の変数

変数	説明
[grecaptcha]	変数の設置でreCAPTCHAが動作します。 reCAPTCHA側のaction_nameを引数に指定できます。 参考：アクション名
[grecaptcha_manual]	イベントハンドラーを自由に記述することができます。

変数[grecaptcha_manual]を設置することで、以下の関数が使用できます。

関数名	引数	挙動	返却値
initGrecaptchaParam	なし	name属性がgrecaptchaResponseの値を空にします。	void
getGrecaptchaResponse	site_key action_name （省略可能）	この関数はasync関数です。 grecaptchaと通信を行いトークンを取得します。 失敗した場合、空を返します。	トークンまたは空
checkActionName	action_name	action_nameが半角英数字とアンダースコアのみの文字列であればtrue、そうでないならばfalseを返します。	bool

サンプルコード

$(() =>
{
        initGrecaptchaParam();
        $('form [name="grecaptchaResponse"]').closest('form').on("submit", async(event) =>
        {
                event.preventDefault();

                const site_key = $('[name="grecaptcha_site_key"]').val();
                const action = $('[name="grecaptchaAction"]').val();

                const token = await getGrecaptchaResponse(site_key, action);
                $('[name="grecaptchaResponse"]').val(token);

                event.currentTarget.submit();
        });
        
});

シート編集

reCAPTCHA認証を実装するコンテンツをシート編集から指定します。
userモジュールのシート編集で、ユーザー登録時に実装したい場合は「登録」をチェックします。