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

はじめに

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

この「reCAPCHA」はGoogleのAPIキーを使用します。
あらかじめGoogle アカウントを取得し、ログインしてください。

通常の画像認証の場合

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

※サンプルは一例です。

reCAPCHAの場合

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

Google APIキーを取得する

  1. Googleアカウントにログインし、下記のGoogleのサイトへアクセスします。
    ▼ Google reCAPCHA
    https://www.google.com/recaptcha/about/
  2. 画面上部の「v3 Admin Console」をクリックします。
  1. 下記の項目を設定します。
    • 「ラベル」… 任意の名称を入力します。
      ※後でサイトを容易に識別できる名称を使用してください。
    • 「reCAPCHA V2」… チェックを入れます。
    • 「「私はロボットではありません」チェックボックス」… チェックを入れます。
    • 「ドメイン」… reCAPCHAを使用するサイトのドメインを入力します。
    • 「オーナー」… 適宜メールアドレスを追加します。
    • 「reCAPCHA 利用条件に同意する」にチェックを入れます。
      ※reCAPCHA 利用規約の内容をご確認ください。
    • 「アラートをオーナーに送信する」… 適宜選択してください。
    • 「送信」をクリックします。

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

reCAPCHAを設定する

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

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

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

ページトップ