【Salesforce虎の巻】今すぐできるスパム対策！フォームにreCAPTCHAを導入しよう！

<目次>

「スパム」への対策はできていますか？
reCAPTCHAとは？
reCAPTCHAの導入方法
まとめ

「スパム」への対策はできていますか？

皆さんが設置しているフォームに、大量にいたずらとも思える内容が登録されたことはないでしょうか？

このようなスパム行為は、皆さんのマーケティング活動の時間を奪うどころか、本来対処すべきお客様の情報が埋もれてしまい機会損失につながります。スパム行為を防ぐためには、送信元のIPアドレスを特定しIPアドレス制限を行うのが最も対応しやすい方法ではありますが、IPアドレスを変えてアクセスされるといたちごっこになってしまいます。

そのため、IPアドレス制限だけに頼らずフォーム自体に対策を打つ必要があります。そこで登場するのが「reCAPTCHA（リキャプチャ）」というスパム行為からサイトを守るためのシステムです。

reCAPTHCAを導入するには、通常であればフォーム側（HTML）への実装と、認証処理（サーバー側の仕組み）の実装が必要です。ですが、SalesforceのWeb-to-リード、Web-to-ケースをご利用の場合はフォーム側の実装のみで簡単に導入を行うことができます。

本記事では、SalesforceのWeb-to-リードや、Web-to-ケースを利用している方へ、reCAPTCHAを活用したスパム対策方法についてご紹介します。

reCAPTCHAとは？

reCAPTCHAは、Googleから提供されている迷惑行為からサイトを保護するためのシステムです。「私はロボットではありません」というチェックボックスをクリックするフォームを見かけたことはないでしょうか？

reCAPTCHAは以前から存在しており、従来読みづらくした形の文字をユーザーに入力してもらうシステムでした。ですが、

正しい情報を入力しているはずなのにエラーとなる（入力文字の判読が困難）
スマートフォンなどでは入力しづらい

などの点からフォームから離脱してしまう原因にもなり、導入には至らなかった方もいるのではないでしょうか。

その点、現在のreCAPTCHAは改良され、「私はロボットではありません」というチェックボックスにチェックをするだけなのでユーザーにも優しくなっています。また、AIによりフォームの入力状況を分析しスパムの行動に近ければ、さらに質問が表示され、当てはまるイメージを選択するだけで判定が可能になっています。

このように従来のシステムから入力のしやすさを向上することで、さらに多くのサイトでreCAPTCHAが導入されるようになっています。

reCAPTCHAの表示イメージ

スパムと判断されると、このような質問が表示される

※GoogleおよびGoogleのロゴはGoogle LLCの登録商標であり、許可を得て使用しています。

では、実際にreCAPTCHAを設置する方法をご紹介していきます。

reCAPTCHAの導入方法

導入の流れ

reCAPTCHAを導入するには以下の手順で進めていきます。

reCAPTCHAのサイトへアクセスしWebサイトを登録する
SalesforceにreCAPTCHAの登録内容を設定する
Web-to-リード、Web-to-ケースを利用したフォームへ設置する

この流れに従って解説していきます。

1. reCAPTCHAのサイトへアクセスしWebサイトを登録する

reCAPTCHAを設置するWebサイトを登録し、設定に必要な情報を発行します。なお発行にはGoogleアカウントが必要です。

reCAPTCHAのサイト（https://www.google.com/recaptcha/intro/）にアクセスします。
右上の「Get reCAPTCHA」をクリックします。
以下の内容に従い、必要事項を記入し「Register」ボタンをクリックします。

＜各設定項目に関する説明＞

Label	わかりやすいラベルを設定してください。
Choose the type of reCAPTCHA	「reCAPTCHA V2」を選択してください。
Domains	reCAPTCHAを設置するドメインを記入してください。複数に渡り設置する場合は改行で区切ることができます。
Accept the reCAPTCHA Terms of Service	規約について確認し承諾してください。
Send alerts to owner	設定ミスやトラフィックの異常が発生した場合には、Gmailにて通知がくるようにします。

reCAPTCHA Register画面

設定後の内容を確認

Register後は、発行された設定情報の確認画面に遷移しますので内容を確認します。

＜各セクションの説明＞

Keys	Site key ：HTML実装時に利用するサイト固有のキー情報です。 Secret key ：認証処理実装時に利用する秘密鍵情報です。上記2つのkeyは後ほどSalesforceの設定で利用します。
Step 1: Client side integration	クライアント側（フォーム側）に実装する場合の方法を示しています。Web-to-リード、Web-to-ケースではSalesforceにてHTMLを生成するときに必要な実装が行われるため意識する必要がありません。
Step 2: Server side integration	サーバー側（認証処理側）に実装する場合に必要な情報を示しています。認証処理はSalesforceにて実装されているため、意識する必要はありません。

Keys

Site key: ：HTML実装時に利用するサイト固有のキー情報です。
Secret key: ：認証処理実装時に利用する秘密鍵情報です。

上記2つのkeyは後ほどSalesforceの設定で利用します。

Step 1: Client side integration

クライアント側（フォーム側）に実装する場合の方法を示しています。Web-to-リード、Web-to-ケースではSalesforceにてHTMLを生成するときに必要な実装が行われるため意識する必要がありません。

Step 2: Server side integration

サーバー側（認証処理側）に実装する場合に必要な情報を示しています。認証処理はSalesforceにて実装されているため、意識する必要はありません。

Register後のreCAPTCHA設定内容画面

2. SalesforceにreCAPTCHAの登録内容を設定する

ここではWeb-to-リードの設定画面から設定する方法をご紹介いたします。
※Web-to-ケースも、ほぼ同様の操作で設定が可能です。

[設定] | [リード] | [Web-to-リード] をクリックします。
「Web-to-リードフォームの作成」ボタンをクリックします。
「reCAPTCHA APIキーのペア」の「虫眼鏡アイコン」をクリックします。

虫眼鏡アイコンをクリックし、reCAPTCHA情報をSalesforceに設定する

ポップアップウィンドウの「新規」ボタンをクリックし、新たにAPIキーを登録し「保存」ボタンをクリックします。
※「保存」ボタンクリック後、3の画面に戻ります。

＜設定内容の説明＞

APIキーペアのニックネーム	わかりやすい名前を設定してください。（英数字のみ）
サイトキー	1.4. で確認した Site key を設定してください。
秘密	1.4. で確認した Secret key を設定してください。

SalesforceへreCAPTCHAの設定を追加

「サーバーフォールバックを有効化」に「✔」（初期設定のまま）

「サーバーフォールバック」とは、reCAPTCHAのサーバーがダウンし認証ができない場合には、すべてのデータを登録させるようにする設定です。デフォルトまま（チェックあり）で問題ありません。

3. Web-to-リード、Web-to-ケースを利用したフォームへ設置する

Web-to-リードのフォームに必要な項目を設定し「作成」ボタンをクリックします。
該当HTMLソースを貴社のWebサイトに組み込みます。

＜生成されるソースコード例＞

<!--  ----------------------------------------------------------------------- - -->
<!--  次の <META> 要素を、HTML の <HEAD>タグ間に追加してください。必要に応じて、charset  -->
<!--  パラメータを変更して、HTML ページの文字コードを指定してください。  -->
<!--  ----------------------------------------------------------------------- - -->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } setInterval(timestamp, 500); 
</script>
<!--  -------------------------------------------------  -->
<!--  次の <FORM> 要素をページに追加してください。  -->
<!--  -------------------------------------------------  -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name='captcha_settings' value='{"keyname":"2.4で設定したニックネーム","fallback":"true","orgId":"組織ID","ts":""}'>
<input type=hidden name="oid" value="組織ID">
<input type=hidden name="retURL" value="http://">
<label for="first_name">名</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">姓</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="company">会社名</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>
<div class="g-recaptcha" data-sitekey="reCAPTCHAのSite key"></div>
<br>
<input type="submit" name="submit">
</form>

reCAPTCHAを有効にすることで、HTMLソースコードに追加される部分は以下のとおりです。そのため既に運用が開始されているフォームに導入する場合には、以下に示す部分を切り出して適用してください。

2.1. <META>タグ直後の2つの<script>タグ

reCAPTCHAを利用するのに必要なScriptがSalesforceから自動的に発行されます。これはそのまま設定してください。

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } setInterval(timestamp, 500); 
</script>

2.2.

タグ直後のタグ

reCAPTCHA設定をSalesforce側に送付するための情報です。必ず

<input type=hidden name='captcha_settings' value='{"keyname":"2.4で設定したニックネーム","fallback":"true","orgId":"組織ID","ts":""}'>

2.3. Submitボタン直前の
タグ

reCAPTCHAシステムを表示するための設定になります。

<div class="g-recaptcha" data-sitekey="reCAPTCHAのSite key"></div>
<br>

ここまで設定できればreCAPTCHAが有効になっている状態です。テスト登録をして問題がなければ運用が開始できます。

4. 実装サンプル

実際に動作するサンプルシステムを作成しました。正常に登録できた場合には、完了画面に登録したデータが表示されます。もし登録できなかった場合には「データの登録が確認できませんでした。」と表示される仕組みとしました。

reCAPTCHAにチェックを入れずに登録した場合はデータが登録されません。チェックした上で登録した場合のみデータは登録されます。

http://synergylead-demo-developer-edition.na75.force.com/reCAPTCHADemoInput
※ データは登録されますが、１時間後に自動的に削除されますのでご安心ください。
※ 実装上、基本的なWeb-to-リードのコードからカスタマイズしています。あらかじめご了承ください。

まとめ

いかがでしたでしょうか？

私が今回この内容を記載しようとしたきっかけは、お客様先を訪問している中で「スパム対策に困っている」というお声を多くお聞きしたことです。同じ課題に困っている方に少しでもお役に立てていただけると幸いです。

reCAPTCHAとSalesforceの環境を活用することで、通常であれば必要なサーバーの構築をすることなしに、簡単にスパム対策を実施することができます。またスパム行為を未然に防ぐことで、余計な作業を増やさずに済みます。ただし、HTMLやhtmlScriptを少しですが記述する必要があるので、システム管理者の方でもハードルが高いかもしれません。Salesforceの運用にお悩みの方は、是非弊社にご連絡いただければと思います。

今後も、Salesforceを利用されている皆さんに有用な情報を共有していきます。ご期待ください！