Googleの「reCAPTCHA」を5分で実装する

Googleの「reCAPTCHA」を5分で実装する

公開したサイトについているメールフォームから30分に1度通知が来るようになりました。

残念ながら見込客などといったコンバージョンではありません。ロボットによるスパムの投稿です。

そのままでも良いのですが、せっかくなのでGoogleの「reCAPTCHA」を導入してスパムによる投稿を撃退したいと思います。

スポンサーリンク

Googleの「reCAPTCHA」実装までの3ステップ

1 GoogleへWEBサイトの登録&APIキー取得

2 Webサイトへの実装

3 サーバーサイドでの実装

1 GoogleへWEBサイトの登録&APIキー取得 方法

まずは、1のGoogleへWEBサイトの登録&APIキー取得を行ないます。

以下のGoogleのサイトへアクセスし、右上の「Get reCAPTCHA」をクリックします。

猫可愛い(´ε` )

どのreCAPTCHAを利用するか選択します。

今回は「私はロボットではありません」をクリックする一番スタンダードなものを選択します。

一番上の「Label」は どのサイトのものか分かるように、任意の文言を記載してください。

選択すると、ドメインの入力項目が出てきますので、ドメインを入力します。

下記の様に入力できたら、「Register」をクリックします。

登録すると以下の情報が手に入ります。利用するには、サイトキーとシークレットキーです。

以上で 1 GoogleへWEBサイトの登録&APIキー取得 は完了です。

2 Webサイトへの実装

次は1で取得したAPIキーをWEBサイトへ実装していきます。

利用するのはサイトキーとなっているものです。

https://www.google.com/recaptcha/api.js を読込み、「ロボットではありません」のチェックボックスを表示したい場所に次のコードを記載します。

上記のコードは</form>タグよりも前に入れておく必要があります。

後は「ロボットではありません」のチェックボックス にチェックを入れていない場合は、送信ボタンが押せないように 属性で「disable」を入れておきます。チェックボックスにチェックが入ったら「disable」を外すようJqueryで記載します。

実装例としては以下のコードになります。

最後に 3 サーバー側での実装です。

この3迄を実装しないと実際のスパムの投稿は防げません。

mailを送信する関数が書いてあるファイルに以下を記述します。

スポンサーリンク

シェアする

フォローする

スポンサーリンク