reCAPTCHAが今月から利用可能になったということで、お笑いSNSのLaughteriaへ導入してみました。非ログインの状態でユーザー登録ページにアクセスすると、このようなバッジが右下に表示されていると思います。reCAPTCHAでは追加でどのような操作も不要になりました。reCAPTCHAの使い方コードの例も示しながら、導入時に行ったことをまとめていきます。公式サイトで利用登録するはじめに、公式サイトへアクセスしてreCAPTCHAの利用登録を行います。フォームの中にreCAPTCHAのタイプを選ぶ項目があるので、「Invisible」を選択します。登録が完了するとsitekeyとsecretが発行されるので、あとで使うためにそれぞれメモしておきます。表側の実装すべきことはページへのscriptタグの埋め込みと、サブミットボタンへのクラス・属性追加の2つです。headタグ内に以下のscriptタグを追加します。src="https://www.google.com/recaptcha/api.js"></script>サブミットボタンへはg-recaptchaクラスと、data-sitekeyとdata-callback属性を追加します。data-callback="mySubmitFunction">送信</button>data-sitekeyの値には、利用登録時にメモした文字列を設定してください。data-callbackの値には、表側で認証が完了した際のコールバック関数を指定してください。開発者向けガイドではdata-callbackは任意となっていますが、実質これがないとフォームの送信を行えないようです。以下のような関数を用意して、data-callbackに指定します。裏側では、認証用のAPIに対してPOSTリクエストを行い、レスポンスの値が正しいかどうかをチェックします。以下のようなコードで、人間かボットかを判定することができます。"あなたはボットです";g-recaptcha-responseというパラメータは、表側で認証した際に自動でフォームの送信データへ追加されます。reCAPTCHAの導入ができました。登録フォームのような失敗できない箇所であっても、reCAPTCHAの管理画面からエラーの発生状況を確認することができるので、安心して使えそうでした。