カテゴリ: ホームページ制作系
みんなを悩ませるメールフォームのセキュリティ。
広く使われているのはGoogle reCAPTCHA かと思います。
そのGoogleのreCAPTCHA が、V3からEnterpriseへの移行を進めています。
今までは
reCAPTCHAのページで新しいサイトを登録して
- サイトキー
- シークレットキー
の2つのキーを使って設定していました。
ConcreteCMSなら、管理画面でこの2つのキーを入れて簡単に設定できていました。
PHPなど自作メールフォームなら、表でサイトキーを指定して、form の action の先のファイルにシークレットキーを指定していました。
これからは?
ConcreteCMSの管理画面でreCAPTCHA Enterpriseに対応している様子は見られません。
ConcreteCMSでreCAPTCHA Enterprise を使うなら、レガシーフォームではなく外部フォームを使わないといけないかなーと思います。
PHPなど、CMSを使っていない自作のメールフォームならこうするんですよって手順を残しておきます!
reCAPTCHA Enterprise 導入手順
- サイトキー(reCAPTCHAのID)
- APIキー
- プロジェクトID
が必要になります。
手順①

- Google Cloud にアクセス
- プロジェクトを作成(アルファベットで会社名やサイト名)
- APIとサービスのライブラリへ
- 検索窓に「recaptcha」と入力し、「reCAPTCHA Enterprise API」を有効化
- APIとサービスに戻り、今度は「認証情報」へ
- 「+認証情報を作成」でAPIキーを選ぶ
- 名前は「メールフォーム」などに
- アプリケーションの制限をウェブサイトにしてドメインを入力
- API の制限を「キーを制限」にしてreCAPTCHA Enterprise APIを選択して作成ボタン
これで作成されたプロジェクトIDとAPIキーをコピペでメモしておきます。
手順②

- 画面左上の三本線でメニューを開き、セキュリティのreCAPTCHAへ
- 鍵を作成で、ここもまたメールフォームとかドメインとか入力し、下の青いCreateボタン
これでIDが作成されますが、これがいわゆる「サイトキー」になります。
手順③
これで準備完了。
- プロジェクトID
- APIキー
- サイトキー
が揃いました。
ここからいよいよメールフォームの設定です。
※おまけ
nameに問い合わせ詳細と入れておくと、ここにひらがなが入力されないと送信できない仕様にしてあります。
<textarea name="問い合わせ詳細"
formにid付与
<form id="recaptchamailform" action="その次の行に下記を追加
<input type="hidden" name="res-recaptcha" id="input-res-recaptcha">送信ボタンを下記のように
<button id="submit-button" class="recaptcha-buttton" type="button" value="送信する" data-sitekey="あなたのサイトキー" data-callback='onSubmit' data-action='submit'>送信する</button>そして、そのページの下部か、そのページで読み込んでいるjsファイルに下記を記載

これ、コードを貼ろうとしたのですが、サーバーのセキュリティに引っかかってアップできなかったので仕方なくスクリーンショットにしました…。
これでフロントの設定が完了しました。
次はバックの設定です。
手順④
formタグの「action」の先のファイルですね。
だいたいphpですよね。
送信処理より前に下記を入れておきます。

こちらも同じくスクリーンショットです。
これで完了です。
- あなたのAPIキー
- あなたのプロジェクトID
- あなたのサイトキー
- あなたのサイトURL
書き換えるのを忘れないでくださいね。
完了
メールフォームの動作テストをしてください。
これで正常に動かなかったらどこかが間違っていると思います。
ちなみに、設定が完了してもGoogle cloudの画面が下記のようにオレンジ色のビックリマークのことがありますが、キーなど間違いなく設定していてテストメールも届くなら、ちゃんと設定できていて保護されています。

「準備は終わったけど、まだ本番のデータが溜まってないよ」という感じのようです。
新しくてアクセスが少ないサイトはなりやすいっぽいです。
それでは。
この記事が少しでも役立ったらハートを押してね!
【レンタルサーバーご検討中の方へ】
このブログはエックスサーバーを使用しています。
さくらインターネットも使いやすいですよ。