Google reCAPTCHA設定
Googleが提供するスパムや不正行為からサイトを保護するサービス・reCAPTCHA（リキャプチャ）を導入できます。
※利用状況により、reCAPTCHA Enterprize（有料版）に移行する必要があります。
https://developers.google.com/recaptcha?hl=ja
対応バージョンのv3はチェックボックス認証や画像認証を行わないため、ユーザー操作を妨げません。
reCAPTCHA v3を組み込んだページに応じてユーザーの環境や動作を学習し、安全な操作かbotかを判断します。
システム設定で有効化後、シート単位でreCAPTCHAの動作箇所が定義できます。
設定方法
有効化できる箇所
- 管理者ログイン（管理画面）
- user、manager：登録、ログイン（コンテンツ）
- entry、form、review：登録（コンテンツ）
reCAPTCHAのサイトキーとシークレットキーを取得
reCAPTCHAの利用に際し、サイトキーとシークレットキーの取得が必要です。
- Googleアカウントにログインします。
- reCAPTCHA 管理コンソール からサイト情報を登録します。
- ラベル名：サイト情報がわかるreCAPTCHAのラベル名
- reCAPTCHAタイプ：スコアベース（v3)を選択
- サイトのドメイン：reCAPTCHAを実装するウェブサイトのドメインを指定
- 設定完了画面で、サイトキーとシークレットキーを取得します。
※設定ページ（設定に移動）からも取得できます。
システム設定 | サイト設定
次に、パレットCMSのシステム設定から、Google reCAPTCHAを有効化します。
Google reCAPTCHA
「設定する」を選択します。
サイトキー
取得したサイトキーを入力します。
シークレットキー
取得したシークレットキーを入力します。
管理者ログイン画面
管理者のログイン時に認証を行う場合は「有効」にします。
スコア閾値
Googleから返却されるスコア（安全な操作かbotかどうかの判定結果）について、
システム側でいくつ以上を「安全」と扱うかを設定します。
参考：reCAPTCHA v3｜スコアの解釈
デフォルトは閾値0.5が設定されています。
閾値より低いスコア（スコア < 閾値）が返された場合、エラーになります（bot判定）。
スコア閾値を高く設定しすぎると、管理者自身がログインできなくなる場合があります。
万一ログインできなくなった場合は、サポートにお問い合わせください。
コンテンツ設定
以下のコンテンツでreCAPTCHAを埋め込むことができます。
- user: ユーザー登録、ユーザーログイン
- manager: マネージャー登録、マネージャーログイン
- entry: エントリー登録
- form: フォーム登録
- review: レビュー登録
管理者ログイン画面は、システム設定で「有効」化すれば機能するため、特に対応はありません。
コンテンツ変数
コンテンツには標準の変数と開発者が自由に定義できる変数を用意。自由度の高い組み込みが可能です。
reCAPTCHA用の変数
| 変数 | 説明 |
|---|---|
[grecaptcha] | 変数の設置でreCAPTCHAが動作します。action_name を引数に指定できます。アクション名 |
[grecaptcha_manual] | イベントハンドラーを自由に記述することができます。 |
grecaptcha_manual 設置時に使用可能な関数
| 関数名 | 引数 | 挙動 | 返却値 |
|---|---|---|---|
| initGrecaptchaParam | なし | name属性がgrecaptchaResponseの値を空にします。 | void |
| getGrecaptchaResponse | site_key, action_name（省略可） | grecaptchaと通信しトークン取得。失敗時は空。 | トークンまたは空 |
| checkActionName | 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モジュールのシート編集で、ユーザー登録時に実装したい場合は「登録」をチェックします。
シート側で動作対象が設定されていないと、コンテンツ変数が動作しません。忘れずに設定を行ってください。