閉じる

reCAPTCHA「私はロボットではありません」のフォーム実装に必要な登録とAPIキーの取得方法

ホームページを公開すると設置したメールフォームに海外からスパム投稿されることがあります。
全角のひらがなやカタカナ認証も有効ですが、GoogleのreCAPTCHAも有効です。

下記のような

「私はロボットではありません」という表示です。

reCAPTCHA「ロボットではありません」認証のフォーム実装のやり方

Google reCAPTCHAの実装について説明します。

Googler eCAPTCHAに登録する

まずフォームに設定する前にGoogler eCAPTCHAに登録が必要です。

導入するサイトのGoogleアカウントでログインした状態で「Google reCAPTCHA」にアクセスします。

reCAPTCHA

「My  reCAPCHA」をクリックします。

登録画面が表示されます。

Label

まず、Labelには、URLやサイト名など、後で一覧などで判別できる名称を入力します。

Choose the type of reCAPTCHAの選択で3つありますが、
「ロボットではありません」という認証の場合、
Checkboxを選択します。

選択すると、ドメイン入力欄が表示されますので、

Get alerts if Google detects

ドメインの入力欄には、reCAPTCHAを設置するサイトのドメインを入力します。(wwwなどは不要)

Accept the reCAPTCHA Terms of Service.

Send alerts to owners

にチェックをして「Register」をクリックします。

「Accept the reCAPTCHA Terms of Service.」は、
Google API利用規約、Google利用規約、reCAPTCHA の追加規約に同意するという意味です。

「Send alerts to owners.」は設定エラーやトラフィック増加など、サイトの問題を検出した場合にGoogleがアラートを取得します。に同意するという意味です。

 

発行されるAPIキー「Site key」「Secret key」を保存する

「Site key」「Secret key」が設置に必要な情報です。

設置が必要なページで使用しますので、「Site key」「Secret key」を保存します。

登録には下記のコードが必要です。

<head>内に

<script src='https://www.google.com/recaptcha/api.js'></script>

<form>内に

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="登録したサイトキー"></div>

を記載します。

あとはフォームプログラムに実装します。

「secretKey」は、プログラムの認証、返り値で設定してください。

正常に動作すると

ロボットではありません

私はロボットではありませんの認証でチェックが付きます。

WordPressのContactForm7では簡単に実装できる

WordPressのContactForm7では簡単にreCAPTCHAを設定できます。

インテグレーション

左メニュー、お問い合わせの「インテグレーション」をクリックします。

キーを設定

「キーを設定する」をクリックします。

Site key

取得した「Site key」「Secret key」をコピペして保存をクリックします。

設定を保存しました。「キーをリセットする」ボタンが表示されれば正常に登録されました。

後は、ContactForm7のフォーム画面で設定するだけです。

ContactForm7

フォーム画面のreCAPTCHA→挿入をクリックで

[recaptcha]

[recaptcha]タグが挿入されますので「保存」ボタンを押して設定完了です。

WordpresでのreCAPTCHA設置はこれで完了です。
正常に動作する確認しましょう。

APIKEY、「Site key」「Secret key」が忘れた場合ですが、

Google reCAPTCHA」の「My  reCAPCHA」に入ると登録したサイトが一覧で表示されています。

サイト名をクリックして詳細ページの中に入り、Adding reCAPTCHA to your siteのkeysから「Site key」「Secret key」を確認できます。

以上、reCAPTCHAのフォーム実装に必要な登録とAPIキーの取得方法でした。

関連記事

  1. IE

    2018年1、2月のブラウザシェアとIE使用率

  2. サイト内検索機能で広告yahooカスタムサーチを利用する

  3. css grid

    IE11に対応させる場合はCSS Grid Layoutを利用し…

  4. サイト内検索機能をGoogleカスタム検索で設置する

  5. 病院

    産婦人科、歯医者など病院のホームページ制作に最適なWordPre…

  6. エックスサーバーでphpをhtmlで動作させる(.htacces…

ピックアップ記事

  1. Hacking Alert! You account was hacked
  2. サーチコンソール
  3. CC2019
ページ上部へ戻る