#概要
React コンタクトフォームを作成しており、そこにGoogle reCAPTCHAをつけスパムブロックをしたいと考えています。
SPAなのでサーバーサイドレンダリングではないと思います。
Google reCAPTCHAはV3を使用していますが、V2の方が簡単に実装出来るのであればv2でも良いと考えています。
Reactでのライブラリはreact-google-recaptcha-v3を使用しています。
#わからないこと
Google reCAPTCHAを実装について調べると、フロントエンド側での実装方法は書かれているのですが、(自前の)サーバー側でもトークンのチェックが必要だと書かれている記事がいくつかあります。
公式ドキュメントを読みましたが静的なサイトだと、自前のサーバーを経由することなく直接Googleにトークンを確認してユーザーのBot判定が出来るようです
。
実際の自分の環境でもトークンを出力することは出来ましたが、Bot判定は機能していないようです。
トークンの出力後、そらに処理が必要だと思います。
#質問
Reactにて、Google reCAPTCHAを導入する場合、サーバーサイド側の処理も自分で作らないといけないでしょうか?
できればフロントエンドだけ完結したいので、それについてアドバイス頂ければ助かります。
#実際のコード
import { GoogleReCaptchaProvider,GoogleReCaptcha } from 'react-google-recaptcha-v3'; function TestReCaptcha(){ return( <GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]" language="[optional_language]" > <MyApp /> </GoogleReCaptchaProvider> ) } function MyApp(){ const handleVerify = (token:string) =>{ console.log(token) // このあとトークンチェックなど処理が必要? } return( <form> <GoogleReCaptcha onVerify={handleVerify} /> </form> ) }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。