画像認証でreCAPCHAを設定する方法

はじめに

フォームジェネレータの画像認証パーツで、より高度な本人認証を行える「reCAPCHA」を設定する方法をご紹介します。
画像認証パーツのデフォルトの機能では、フォームで画像に表示された文字を入力し認証を行います。
対して、こちらは「私はロボットではありません」というメッセージにチェックを入れて認証します。

この「reCAPCHA」はGoogleのAPIキーを使用します。
Googleアカウントをお持ちでない場合は、先にGoogle アカウントを取得し、ログインした状態で本マニュアルをご覧ください。
※Googleの利用規約や「reCAPCHA」の料金ついても事前にご確認ください。

通常の画像認証の場合

画像に表示された文字を入力し認証を行います。

※サンプルは一例です。

reCAPCHAの場合

チェックを入れて認証を行います。
必要に応じ、適切な画像をクリックします。
※サンプルは一例です。

Google APIキーを取得する

  1. Googleアカウントにログインし、下記のGoogleのサイトへアクセスします。
    ▼ reCAPTCHA による bot 攻撃からの保護とオンライン不正行為の防止
    https://cloud.google.com/security/products/recaptcha
  2. はじめて設定するときは「使ってみる」をクリックします。
    ※Googleアカウントにログインしていないと、次の画面に移る前にログイン画面が表示されます。適宜ログインを行ってください。
  1. 下記の項目を設定します。
    • 「ラベル」… 任意の名称を入力します。
      ※後でどのサイトを登録したか判別しやすい名称がおすすめです。
    • 「チャレンジ（v2）」… チェックを入れます。
      ※「スコアベース（v3）」はbingo!CMSでは使用できません。
    • 「「私はロボットではありません」チェックボックス」… チェックを入れます。
    • 「ドメイン」… reCAPCHAを使用するサイトのドメインを入力します。
    • 「Google Cloud Platform」… 過去にGoogle Cloud Platformを使用したことがある場合はプロジェクト名が表示されます。既存のプロジェクトを選択するか、新規作成します。過去に一度も使用したことがない場合は自動的に作成されます。
    • 「送信」をクリックします。

クリック後のページに「サイトキー」と「シークレット キー」が表示されます。
後ほどbingo!CMSの管理画面で使用しますので、あらかじめコピーし、適宜メモ帳などに貼り付けて保存してください。

reCAPCHAを設定する

フォームの作成方法についてはフォームジェネレータのマニュアルをご参照ください。

  1. フォームジェネレータの「画像認証」パーツを編集します。
  2. 「reCAPCHA / 使用する」にチェックを入れます。
  3. 「reCAPCHA / Site key, Secret key」に先ほどコピーしたAPIキーをそれぞれ貼り付けます。
  4. 「保存する」をクリックします。
  5. 「プレビュー」で実際の表示画面を確認できます。

公開する前に必ずフォームの送信テストを行ってください。

ページトップ