VisualforceでreCAPTCHAを実装

VisualforceでreCAPTCHAを実装

概要

SalesforceのCommunityやSites等で外部へ公開するページをVisualforceで実装する場合にBotによる標準型攻撃を受けないようにするための対策としてGoogle社が提供するreCAPTCHA(リキャプチャ)を使用して認証を実装するサンプルコードと手順を紹介します。

Googleへサイトの登録とAPIキーを発行

まず、下記のURLからGoogleへサイトの登録とAPIキーの発行を行います。
右上のAdmin Consoleから登録できます。
https://www.google.com/recaptcha/intro/v3.html

現在、Google社が提供しているreCAPTCHAには最新のv3と旧のv2がありますが、v2も引き続き使用できるようですので、そちらを使用したいと思います。
また、ドメインには、公開サイトとなるCommunityやSitesのドメインを指定するようにしてください。今回は、テストで動作確認するのみなので、force.comを指定しておきます。

ここまでの入力が完了すると、Public KeyとSecret Keyが発行されます。こちらを実装するときに使用します。

Salesforceでリモートサイトへ登録

Apexでサーバー側で認証する際に、Googleのサーバーへリクエストする必要があるので、SalesforceのリモートサイトへURLを登録しておく必要があります。

Visualforceの実装

Visualforceでの実装サンプルは下記の通りとなります。チェックボックスの押下により発行されたトークンをhiddenの項目に保持しておき、サーバー送信時にPostします。

サーバー側(Apex)の実装

サーバー側(Apex)の実装サンプルは下記の通りとなります。クライアントからポストされたトークンとSecret Keyをパラメーターにして、所定のGoogle社のURLへPOSTして認証を実施して、レスポンスで結果を確認します。

デモ

下記のようの動作となりました。

参考

Adding CAPTCHA to Force.com Sites
https://developer.salesforce.com/index.php?title=Adding_CAPTCHA_to_Force.com_Sites&oldid=27283

reCAPTCHA v2
https://developers.google.com/recaptcha/docs/display

Verifying the user’s response
https://developers.google.com/recaptcha/docs/verify

最後に

下記に今回のサンプルコードは格納しておりますので、よければ参考にしてください。
https://github.com/yhayashi30/reCAPTCHA-salesforce-visualforce