【もはや必須？】reCAPTCHA v3をAccount Engagementに実装する
最近フォームにbotからの送信で大量のプロスペクトが作られる事が増えています。意味不明のアルファベットの羅列だったり、googleを騙ったり、大事な本当のプロスペクトが視認しにくいだけではなく、統計値にも大きく影響が出てしまうのでほんとに迷惑ですよね！
Account Engagementの標準フォームだと「有効なメールサーバーからのメール」または「ISP や無料のメールプロバイダ以外からのメール」という項目にチェックを入れることでbot対策になりますが、フォームハンドラーの場合はそのままではbotのいい標的にされてしまうので、GoogleのreCAPTCHAでbot対策をされることをお勧めします！
reCAPTCHAを実装すると上図の右下にあるバナーが表示されます。reCAPTCHAには色々バージョンがあるのですが今回は最新のv3で実装してみます。
赤枠のv3 Admin Consoleをクリックして出てくる下の画面で「＋」を押して新しいreCAPTCHAを作っていきます。
次に下の画面でわかりやすいラベル名をつけます。reCAPTCHAタイプはチャレンジにすると「私はロボットでありません」ていう例のユーザに面倒をかけるチェックボックスが出ちゃうので、弊社では機械学習ベースのスコアタイプを選んでます。ドメインはreCAPTCHAを設置するドメインを入力してください。
青い「送信」ボタンをクリックで下の画面が表示されます。ここでサイトキーとシークレットキーが得られますのでそれぞれコピーしておいてください。
reCAPTCHAの設定が終わったら対象ドメインサイトにあるHTMLページの<head></head>間にJSを記述します。下図のソースの20行目に先程取得したサイトキーを貼り付けています。29行目では通常のようにフォームハンドラーのURLではなく、サーバーサイドのphpをPOST先にします。
次にフォームのコード内（400行目）に非表示の項目を入れておき、フォームの送信ボタンが押されると上図のファンクションが実行されてフォームの入力項目とページロード時にgoogleから取得したトークンをサーバー上のphpに送っています。
サーバーサイドのphpは下図のように記述しています。
ここでは３行目でシークレットキーを使っています。
あとはトークンをgoogleが検証してOKな場合はフォームハンドラーのURL(14行目）にフォーム入力内容を送って、サンクス画面に遷移するようにしています。（29行目）NGな時はエラー画面が表示されます。（33行目）
一点、注意気をつける点として・・・
画面遷移の制御はphpが持っているので、フォームハンドラーの完了アクションでの「成功した場所」と「エラー発生場所」では指定できません。
今回はphpでトークンの検証とその後の処理をシンプルに書いてますが、もちろんnode.jsでもpythonでもお好きな言語で実装していただけます。
今回の記事はちょっとコードよりなお話になってしまいました。
「何言ってるのかわからないけど、至急botをとめたい！」という方は弊社までご連絡ください。
この記事が気に入ったらサポートをしてみませんか？