ログインフォームや会員登録を行うフォームにて、色々対策したいなと思い調べていると、Googleが提供しているreCaptchaというものを使うことで対策が出来るらしい。

誰しもが１回は見たことのある、「私はロボットではありません」てきなやつ。

ただ、画像をクリックしたりあの分かりづらい文字列を入力したり色々と面倒。。。

そこで、GoogleはこれらをやらなくてもユーザーがBotやスパムではないと判断する最新「v3」を今提供している。

イメージとしてはこんな感じ

ページの右下にこのようなマークが表示され常にユーザーが人間らしい動きをしているかを確認している。

流石Googleさん！

今回はこのreCaptchaの簡単な使い方を説明していこうと思います！！

調べてみてわかったことが、割とドキュメントが少なく初めての人にとって分かりやすい記事がまりなあったので、書いてみようと思いました。

初めての人に向けて、書いていくのであまり詳しい説明は致しません。（詳しいことは分からない）

なので、reCaptchaを搭載したいという方はぜひ見て下さい！

それでは、一緒に説明を見ていきましょう！！！

Google reCaptchaの登録#

まずは、「Google reCaptcha」に登録します。

詳しいやり方は、他の方が説明しているのでそちらを参考にして頂くと良いかと。

ちなみに僕は下記の記事を参考にして登録を行いました。

Google reCAPTCHAのWEBサイト登録とAPIキーの取得方法

jsファイルの読み込み#

次に、サイトキーをコピーして、headタグに以下のスクリプトファイルの読み込みを行ってください。

※注意 bodyタグではなくheadタグです！！！間違えないように！

<script src="https://www.google.com/recaptcha/api.js?render={SITE_KEY}" async defer></script>

{SITE_KEY}にコピーしたサイトキーをペーストしてください。

トークンの呼び出し#

最後に、認証を行いたいページにてTokenの発行を行います。

トークンの有効時間は２分であるため、入力フォームで多くの入力事項を記載する際は、ページに訪れた時ではなく、例えば「次へ」のボタンを押したときなどにトークンを発行してください。

トークンを呼び出す関数は以下のようになります。

index.js

     window.grecaptcha.ready(() => {
        window.grecaptcha.execute(process.env.VUE_APP_SITE_KEY, { action: '/signup' }).then(async (token) => {
          console.log('token')
        })
      })

このようにして、Tokenを発行することができます！

ロゴの消去（番外編）#

ページ右下の認証ロゴって結構邪魔ですよね。

なので、ロゴを消去したいページでは以下のようなCSSを設定してあげてください。

.grecaptcha-badge {
  display: none
}

また、ページによってロゴを消したり表示する場合はこちらの記事にVueRouterで動的にpathを取得（検知）する方法詳しく書いてあるので、ぜひ興味のある方はご覧ください。

今回はこの辺で終わりにしたいと思います。

reCaptchaはまだこれで終わりではないです。

ここで発行したトークンが本当に正しいのかの判断を行わなければいけません。

そして、例えばトークンが正しかったらログインを実行し、正しくなければエラーメッセージを表示するといった形になります。

ただ、これを一気にやってしまうと頭がパンクしてしまうので、まずはこのトークンがちゃんと発行できているかを確認してから次の段階に進んでください。

近々、Laravelでトークンの認証を行う記事を書くのでぜひそちらもご覧ください。

以上、「さて、驚くほど簡単にreCapthca認証でBOT、スパム対策を行おう！！」でした！

良かったら、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading