👁️
recaptcha-v2をReactのカスタムフックとして使用出来るnpmパッケージを公開した
これがReact環境で簡単に実装出来ます。
作った背景
・既存のnpm packageが古い & Next.jsでうまく動かなかった
・たまに出てくる時に都度、実装がめんどくさい
・v2もまだ需要あるかな？
工夫した箇所
- 最新のReactではStrictModeがtrueの時、２回レンダリングが走り、これが色んなもののエラーを引き起こす。一度recaptchaがレンダーされた後に、すぐレンダーが起こるので、エラーが起こっていた。これを１度だけrenderされるように対応。
- Next.jsでページ遷移して戻ってきても、再表示されるように対応。普通のページ遷移と違って、裏で色々やってるっぽいので。SPAでも大丈夫。
- 大元のAPIのソースは１度だけしか読み込まないように設定。
- tokenの管理など、ある程度は使用者側で実装するようにしてあるので、逆に言えば実装の自由度は高め。
npm
github
examples
２パターンをNext.jsのモックとして作ってます。
index.tsx => RECAPTCHA_V2 checkbox sample
index2.tsx => RECAPTCHA_V2 invisible sample
Discussion