このドキュメントでは、PowerCMS のフォームに Google reCAPTCHA を設定し、不正なフォーム送信を防止する方法を説明します。
reCAPTCHA の機能は標準プラグイン「ContactForm reCAPTCHA Field」で提供されており、PowerCMS の初期状態でインストールされています。
利用するには、事前に Google reCAPTCHA の設定を行い、取得した情報を PowerCMS に登録する必要があります。
reCAPTCHA の動作について
PowerCMS のフォームでは、入力内容の確認後に reCAPTCHA が表示されます。
- 入力内容にエラーがない場合のみ reCAPTCHA の認証処理が実行されます
- 認証方法は、設定した reCAPTCHA タイプによって異なります。
- v2：確認画面に「私はロボットではありません」チェックボックスが表示されます。
- v3：送信時にバックグラウンドで認証が行われるため、利用者に認証画面は表示されません。
- 必須項目の未入力など入力エラーがある場合は表示されません
- 入力エラーを解消し、再度確認画面へ進むと reCAPTCHA が表示されます
導入の全体の流れ
- Google reCAPTCHA の設定を行うとPowerCMS と連携するためのサイトキー・シークレットキーを取得する
- PowerCMS で ContactForm reCAPTCHA Field プラグインへ設定を行う (管理者)
- PowerCMS で フォーム項目 reCAPTCHA を作成する(管理者)
- PowerCMS で フォームへフォーム項目を追加し再構築
※ Google reCAPTCHA で取得した情報を PowerCMS へ設定するため、Google reCAPTCHA での設定を先に行うことを推奨します
※ Google reCAPTCHA の設定では reCAPTCHA タイプを後で変更できません。reCAPTCHA タイプを変更したい場合は設定を新しく追加する必要があります。
前提条件
以下のいずれかの権限を持つアカウントが必要です。
- システム管理者
- フォーム管理権限を持つユーザー
また、Google reCAPTCHA の設定には Google アカウントが必要です。
1. Google reCAPTCHA の設定を行うとPowerCMS と連携するためのサイトキー・シークレットキーを取得する
Google reCAPTCHA のサイトへアクセスする
下記のように必要事項を入力する
- ラベル
- 管理しやすい名前を指定してください
- reCAPTCHA タイプ
-
v2 / v3 のどちらかを選択してください。この設定はあとで変更できません。
v2 は「私はロボットではありません」のチェックボックス認証、または画像認証を利用する方式です。
v3 はユーザー操作なしでアクセス状況を評価する方式です。
特別な要件がない場合は、ユーザーの操作が不要な v3 の利用を推奨します。
各方式の詳細については、Google の公式ドキュメント「Choosing the type of reCAPTCHA」をご確認ください。
- ドメイン
- reCAPTCHA を利用するサイトのドメインを指定してください
画面に表示されるサイトキー、シークレットキーをコピーしてください
※ コピーしたサイトキー、シークレットキーは PowerCMS へ設定する必要があります。
2. PowerCMS で ContactForm reCAPTCHA Field プラグインへ設定を行う (管理者)
※ご利用のアカウントが管理者権限を持ってない場合、手順3 でプラグインのメニューが表示されません。その場合は管理者権限のアカウントへ切り替える、アカウントを持つ担当者様へ作業を依頼してください
- PowerCMS 管理画面へ管理者用のアカウントでログインする
- フォームを作成しているワークスペース/スペースへ移動する
- メニューからプラグインを選択し、プラグイン一覧へ移動する
- プラグインの一覧から ContactForm reCAPTCHA Field を選択、「設定」をクリック
- 「サイトキー」と「シークレットキー」の欄へ reCAPTCHA からコピーしたサイトキー、シークレットキーを貼り付け、「変更を保存」をクリックする
3. PowerCMS で フォーム項目 reCAPTCHA を作成する (管理者)
※フォームの権限を持つアカウントが必要です。
- 左のメニューから [フォーム]>[フォーム項目] をクリックして画面を移動する
- 一覧の少し上、「新規作成」をクリックして画面を移動する
下記のように入力を行う
- 名前
- 管理しやすい名前を指定してください
- 種類
- reCAPTCHA を選択してください
- 必須
- チェックを入れないでください
- 入力チェック
「入力チェック」は必ず有効にしてください。
この設定が無効の場合、reCAPTCHA の認証処理が実行されません。- ベースネーム
- 管理しやすい名前を指定してください
最後に「保存」ボタンをクリックしてください
4. PowerCMS で フォームへフォーム項目を追加し再構築
※フォームの権限を持つアカウントが必要です。
- 左のメニューから [フォーム]>[フォーム] をクリックして画面を移動する
- reCAPTCHA を使いたいフォームの名前をクリックし、画面を移動する
- 「すべてのフォーム項目一覧」から手順3. で作成したフォーム項目を見つけ、「このフォームの項目」へ移動する
- フォームを保存する
- 再構築を行う
reCAPTCHA のフィールドは「このフォームの項目」内の順序の位置に表示されます。
プラグイン設定 (ワークスペース/スペース)
| reCAPTCHA タイプ | v2 / v3 のどちらを利用するか選択します。この設定は Google reCAPTCHA サイトの設定とそろっている必要があります |
|---|---|
| サイトキー | Google reCAPTCHA サイトで取得したサイトキーを指定します |
| シークレットキー | Google reCAPTCHA サイトで取得したシークレットキーを指定します |
| スコアの閾値 (v3 用) | reCAPTCHA v3 を利用する場合、機械か判定する閾値を指定します。 (初期値:0.5) |
テンプレートタグ
- MTCFreCAPTCHAType / MTCFreCAPTCHAFieldType
- プラグイン設定で選択した reCAPTCHA タイプに応じて v2 もしくは v3 の値で出力します。
- MTCFreCAPTCHASiteKey / MTCFreCAPTCHAFieldSiteKey
- プラグイン設定で指定したサイトキーの値を出力します。
- MTCFreCAPTCHASecretKey / MTCFreCAPTCHAFieldSecretKey
- プラグイン設定で指定したシークレットキーの値を出力します。
reCAPTCHA フォーム項目のテンプレートについて
reCAPTCHA フォーム項目のテンプレートはデフォルトで v2/v3 の両方に対応した内容になっています。
<MT:If name="confirm_ok">
<MT:If tag="CFreCAPTCHAType" eq="v2">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<p class="g-recaptcha" data-sitekey="<$MTCFreCAPTCHASiteKey$>"></p>
</MT:If>
<MT:If tag="CFreCAPTCHAType" eq="v3">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("contact-form").submit();
}
document.addEventListener("DOMContentLoaded", function () {
const btns = document.querySelectorAll('#contactform input[type="submit"]');
btns.forEach(btn => {
btn.classList.add("g-recaptcha");
btn.setAttribute("data-sitekey", "<$MTCFreCAPTCHASiteKey$>");
btn.setAttribute("data-callback", "onSubmit");
btn.setAttribute("data-action", "submit");
});
});
</script>
</MT:If>
</MT:If>
