![見出し画像](https://assets.st-note.com/production/uploads/images/154523965/rectangle_large_type_2_648accfcfa717ed2e75e832329c72d49.png?width=1200)
PowerCMS X に Google の reCAPTCHA を導入しよう
PowerCMS X は Recaptchaプラグインで Google の reCAPTCHA を簡単に導入できます。
最初に Recaptcha プラグイン を有効にしてください。
![](https://assets.st-note.com/img/1726469075-utcwh1U3ZjpYX6DKgJ9n8yQk.png?width=1200)
次に Google reCAPTCHA にアクセスします。ヘッダーにある「v3 Admin Console」をクリックします。
![](https://assets.st-note.com/img/1726467900-MklCsw7ITv2agXei4nxzPoSH.png)
作成ボタンを押下します。
![](https://assets.st-note.com/img/1726467948-PIynHDAamrGbv79VjYR2qBMe.png)
「ラベル」と「ドメイン」にサイトのドメインを登録します。ドメインと記載があるので「www.」は付けないほうがよいかもしれないですね。
「reCAPTCHAタイプ」は「スコアベース(v3)」を選択します。
![](https://assets.st-note.com/img/1726468084-LZqtbcYiw6ekuy8DhM3vC7JR.png?width=1200)
Google Cloud Platform のプロジェクト名を選択します。入力欄に値が表示されない場合は、Google Cloud Platform でプロジェクトを作る必要があります。最後に「送信」ボタンを押下します。
![](https://assets.st-note.com/img/1726468261-pq4hXIAiorDsWRtK8MTxeV5n.png?width=1200)
次の画面で「サイトキー」「シークレット キー」が表示されます。この値をPowerCMS X の Recaptchaプラグイン設定に登録します。
![](https://assets.st-note.com/img/1726468485-bZj5e8WNgXCSavfArhGP9IlD.png?width=1200)
他の値はデフォルトのままで構いません。
フォームはビューで作成していますので、対象のビューにアクセスします。
以下のコードを貼り込みます。私は </body> の直前に貼りましたが、どこに貼っても良いと思います。
<mt:recaptchaaddtoken form_class=".recaptcha-form" />
次が重要ですが、form タグに「class="recaptcha-form"」を付与します。
例
<form class="recaptcha-form" action="<mt:formpermalink>" method="POST" enctype="multipart/form-data">
あとは対象のフォーム編集画面を開いて「reCAPTCHA を利用する」にチェックを入れます。
![](https://assets.st-note.com/img/1726484546-zjAwXvDO48UabqSJtm1WfHdB.png?width=1200)
フォームにアクセスすると、右下に reCAPTCHA アイコンが表示されます。
![](https://assets.st-note.com/img/1726468773-iTlLfW8C2yEMDjNKbr1dYRhJ.png)
最後に正常に動作するか送信処理を行います。送信処理の翌日以降に Google reCAPTCHA のコンソールで結果が見られると思います。
![](https://assets.st-note.com/img/1726485012-PETt7mAD1B206Q4zkbvChrdG.png?width=1200)
Members プラグインも同様に、サインアップ(member_sign_up)と変更画面(member_edit_profile)のビューに、<mt:recaptchaaddtoken を1行入れて、form に class を付与します。プラグイン設定で「会員登録・編集時に reCAPTCHA を有効にする」にチェックを入れれば動作します。
![](https://assets.st-note.com/img/1726484870-ThkQjODg8S2l7WxinvLuEPXI.png?width=1200)