Google reCAPTCHA の v3 を実装する（JavaScriptとPHP）
#WebAPI連携 #スパム対策
created: 2023/07/21,
modified: 2024/07/27
Google reCAPTCHA はGoogle Cloud Platform（GCP）の機能の一つで、Webサイトにてスパムやボットから保護するためのセキュリティーサービスです。 問合せフォームやログインページなどに導入し、ユーザーが人間であることを確認するためのテストを行うことにより、自動化された攻撃や不正行為を防止します。
reCAPTCHA とは
Google reCAPTCHA はGoogle Cloud Platform（GCP）の機能の一つで、Webサイトにてスパムやボットから保護するためのセキュリティーサービスです。
問合せフォームやログインページなどに導入し、ユーザーが人間であることを確認するためのテストを行うことにより、自動化された攻撃や不正行為を防止します。
reCAPTCHA とは
https://developers.google.com/recaptcha?hl=ja
Google Dev reCAPTCHA v3 マニュアル
https://developers.google.com/recaptcha/docs/v3?hl=ja
reCAPTCHA の v2 と v3 の違い
reCAPTCHA v2 はチェックボックスで、例えば「車が写っているものを選択してください」など選ぶ形式です。v3 は入力欄は表示されず、すべての認証がバックグラウンドで行われます。
設置デモ
設置デモ
https://usual.tools/tools/recaptcha-v3
設置手順
Google reCAPTCHA からAPIキーを取得
Google reCAPTCHAにてプロジェクトを登録し、サイトキーとシークレットキーを取得します。
Google reCAPTCHA
https://www.google.com/recaptcha/about/
| 項目 | 内容 |
|---|---|
| ラベル | 管理しやすい任意の名前 |
| reCAPTCHAタイプ | 新しい方のv3を選択 |
| ドメイン | 導入するWebサイトのドメイン |
| GoogleCloudPlatform | GoogleCloudPlatformのプロジェクトを入力。初めてであれば作成となる。 |
| 利用規約に同意 | 同意にチェック |
Site Key（サイトキー）とSecret Key（シークレットキー）
- Site Key 画面でJavaScriptで記述
- Secret Key PHPで記述。WebサイトとreCAPTCHA間の通信で使用
画面側 (JavaScript)
GoogleからAPIを読み込み、Site Keyをセットして準備をする
formタグの中にinput hiddenを設置
サーバー側
サーバー側では、POSTされてきたトークンをシークレットキーと一緒にGoogleの方に認証をかけます。結果はjson形式で返って来て、成功（スパムやロボットじゃない）であればsuccessがtrueとなっているので、それで判定します。