はじめに
以前に、「google reCAPTCHA v3を実装しようとして1週間くらい苦労した話」という精神論だけの記事を書いたところ、結構なこのブログへの流入がありました。
なので精神論だけでなく、具体的に実装しているソースがあればもっと役立つと考えて、この記事を書いています。
あと、地味にこの4連休ずっと実装に時間をかけてしまったので、未来の自分のために残しておきます。
記事の最後に色々載せてるので、必要な部分だけ見たい人は最後に飛んでください。
環境
※ フロントに関してはreactを使っていますが、ピュアJSで使ってもいいです。
ピュアJSだとサンプルページを作った際に、トークンのやり取りがめんどくさかったので、Reactで実装しました。
実装方法
Google reCAPTCHAのクライアント、サーバサイドのキーを生成する
公式ページからadmin consoleにログインする。
https://www.google.com/recaptcha/intro/v3.html
reCAPTCHA V3を選択して、設定する。
ドメインはreCAPTCHAのドメインを設定すればいいです。
私は動作検証のために、localhostとか、gitpodとかCodeSandboxのURLを突っ込んでます。
「送信」をクリックする。
そうすると、クライアントとサーバサイドのキーが生成できるので、これをメモしておきます。
とはいえ、メモせずとも後で見直すこともできます。
※ 画像のキーは既に破棄していますので大丈夫です。
画像にもある通り、「クライアント側の実装方法を表示」等をクリックすると公式ヘルプがあります。
正直、実装だけで言うと、公式ヘルプ見るだけで十分です。
フロント
認証用のJSを読み込んで、トークンを発行します。
ReactやVue.jsを使用している場合はラッパーライブラリが公開されているので、それを使えばいいと思います。
全部は調べてませんが、以下のライブラリで実装した経験はあります。
- @nuxtjs/recaptcha
- react-google-recaptcha-v3
発行したトークンの有効期間は2分間、認証は1回のみです。
サンプルページは画面ロードのタイミングだけしかトークン発行してないので、2回目以降はエラーで返却されます。
私のサーバサイドがガバガバなので、エラーでもHttpStatus200で返しています。
発行したトークンをサーバに転送します。
本来はサーバサイドで認証してもらい、Scoreを元にハンドリングする必要があるので、ハンドリングするまでは実装完了とは言えません。
なお、ドメインの登録が正常に行っているとreCAPTCHAはこのように表示されます。
この表示内容はあくまで、reCAPTHCAを使用してますよ、程度の内容でしかありません。
失敗していると、reCAPTCHAはこのように表示されます。
サーバサイド
ソースコードを見てください。
注意点はNode.jsを使って、Googleに認証をかけているので、ちゃんと同期とってフロントに返却することくらいですか。
ちょっと、ソースもNode.jsの経験が無い中で作成したので、だいぶ汚いです…。
GCPのプロジェクトを作成する。
https://console.cloud.google.com/projectcreate
プロジェクトを作成したら、Cloud Functionsのページに遷移する。
遷移後に関数を作成する。
私が作ったbackend.jsの中身を書き換えて、下記画像のインラインエディタに記載します。
// recaptcha v3のserverSecret const serverSecret = process.env.serverSecret;
これで、サーバサイドの実装を完了できます。
終わりに
この記事で、他の人が検索したときに、実装イメージがつけばといいなと考えてます。
クライアントだけで閉じるならわかりやすいのですが、サーバサイドを導入する必要がある実装って難しいですね…。
基本はサーバの人間ですが、がっつりサーバを構築するタイプしかしらないので、AWS LambdaやGCP Cloud Functionsを使うようなタイプの実装は苦手です。
そのうち、Azureの方でも素振りしないと…。
