スパム対策

Form Appでは、スパム対策機能としてGoogle reCAPTCHA v3に対応しています。

Google reCAPTCHA v3について

Google reCAPTCHAは、bot等を活用したWebサイトに対する不正行為、スパム、悪用からWebサイトを保護することを目的にGoogle社によって提供されている優れたツールです。

Google reCAPTCHA v3では、エンドユーザーに自身がbotでないことを証明させる試験（e.g. 私はロボットではありません）を受けさせることなく、サイト上でのユーザーの行動をバックグラウンドでスコアリングすることでスパム判定を行います。

そのためGoogle reCAPTCHA v3を利用すれば、エンドユーザーのサイト上での体験を既存することなくスパム対策を行うことができます。

Google reCAPTCHA v3の導入方法

Google reCAPTCHA v3をフォームに組み込む手順は、大きく次の3ステップあります。

1. reCAPTCHAコンソールからサイトキーとシークレットキーを取得する
2. Form Appにシークレットキーを登録してGoogle reCAPTCHAを有効化
3. Webサイト側でGoogle reCAPTCHAからトークンを取得、Form Appのエンドポイントに送信

Step 1 - reCAPTCHAコンソールからSite keyとSecret Keyを取得する

Google reCAPTHAのコンソールにアクセスし、新しいサイトを作成します。

reCAPTCHAタイプを reCAPTCHA v3 を選択し、reCAPTCHAを導入したいサイトのドメインを登録します。ローカル環境でのテストを行いたい場合は、 [localhost](http://localhost) を追加するようにします。

全ての項目を入力後、送信ボタンをクリックするとサイトキーとシークレットキーが払い出されます。

Step 2 - Newt Form AppにSecret Keyを登録

Newtの管理画面にアクセスし、Google reCAPTCHA v3を導入したいフォームの設定ページを開きます。Google reCAPTCHAセクションより、 Google reCAPTCHAを有効にする にチェックを入れStep 1で取得したシークレットキーを貼り付けて保存します。

Step 3 - Webサイト側でGoogle reCAPTCHAからトークンを取得、Form Appのエンドポイントに送信

最後に、WebサイトにreCAPTCHAによる検証処理を実装します。

① WebサイトにGoogle reCAPTCHAのJavaScript APIをサイトキー付きで読み込みます。 reCAPTCHA_site_key の部分をStep 1で取得したサイトキーに置き換えてください。

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

② Form AppにreCAPTCHAから取得したトークンを送信するための隠しinput要素を追加します。この時、input要素のname属性の値は必ず googleReCaptchaToken にします。

<input type="hidden" id="recaptchaToken" name="googleReCaptchaToken" />

③ 最後に、Google reCAPTCHAからトークンを取得して 隠しinput要素（googleReCaptchaToken）に値をセットするスクリプトを追加します。

<script>
  grecaptcha.ready(function () {
    grecaptcha
      .execute("reCAPTCHA_site_key", { action: "homepage" })
      .then(function (token) {
        document.getElementById("recaptchaToken").value = token;
      });
  });
</script>

設定手順は以上です。本ドキュメント記事で紹介した以外にも、いくつかの実装方法があるため詳細についてはGoogle reCAPTCHAの公式ドキュメントを参考にしてください。