今回のゴール

VueアプリケーションにreCAPTCHA v2を導入し機能させること。

reCAPTCHAとは

Googleが提供している、自動化されたbotやスパムからサイトを保護するセキュリティサービスです。
決済画面などでよく見かける、9枚の画像の中から条件に一致する画像を選択させられるものですね。

reCAPTCHA 導入手順

reCAPTCHAを導入するサイト登録
vue-recaptchaのインストールと有効化
イベント処理実装

1. reCAPTCHAを導入するサイト登録

Google reCAPTCHAにアクセスして導入するサイトの登録を行います。

reCAPTCHA タイプ
- チャレンジ(v2) を選択
ドメイン
- サイトのドメインは複数登録可能なので、すべて環境のドメインを登録します。開発に使用するngrokなどのドメインも登録可能です。

上記の設定の送信が完了したら、サイトキーが表示されます。サイトキーをコピペしたら完了です。

2.Vue3にvue-recaptchaをインストール

reCAPTCHAの導入にあたって、今回はvue-recaptcha というライブラリを使用します。

Vue用のreCAPTCHAライブラリは他にも存在しますが、こちらのライブラリは導入もスムーズで継続的に開発が進められているため採用しています。

今回はチェックボックス有りのv2を使用するため、リポジトリのmasterブランチを参照しています(2024/01/20時点)
開発者によると現在v3を開発中なので、参照する際は適切なブランチを選択してください。

プロジェクトにvue-recaptchaのインストールを行います。

yarn add vue-recaptcha

インストールが完了したら、main.tsにてvue-recaptchaの有効化を行います。
下記のように記述することで、Vueインスタンス作成時にVueRecaptchaプラグイン渡すことでvue-recaptchaが利用可能となります。

<script>
import { createApp } from 'vue'
import App from '@/App.vue'
import { VueRecaptcha } from 'vue-recaptcha'

const app = createApp(App)
app
  .use(router)
  .component('vue-recaptcha', VueRecaptcha)
  .mount('#app')
</script>

次にvue-recaptchaコンポーネントの読み込みを行います

<script>
import {ref} from 'vue'
import { VueRecaptcha } from 'vue-recaptcha'
const reCAPTCHA_SITE_KEY = import.meta.env.VITE_reCAPTCHA_SITE_KEY
...
</script>

3. vue-recaptcha イベント処理実装

vue-recaptchaイベント処理の実装を行います。

下記はvue-recapthcaで提供されているカスタムイベント一覧です。

verify(response) – Emit on reCAPTCHA verified response is the successful reCAPTCH response

expired() – Emit on reCAPTCHA expired

render(id) – Emit on reCAPTCHA mounted on DOM id is the widget id of the component

error() – Emit when reCAPTCHA encounters an error

今回はverifyとexpiredイベントを使用して、reCAPCHAのチャレンジに成功したらボタン活性化させるように実装します。

expiredイベントは、reCAPTCHAのトークンが期限切れになったときに発火します。
Google reCAPTCHAの仕様上、ユーザーがチェックボックスをクリックしてからトークンが期限切れになるまでの時間は通常約2分ほどとされています。
verifyイベントは、ユーザーがreCAPTCHAチャレンジに正常に回答し、そしてその回答がGoogleのサーバーによって検証されたときに発火するイベントです。
今回では、ユーザーが人間であることを確認した後の追加のアクションをトリガーとして使用しています。

<script setup lang="ts">
import { ref } from 'vue'

const isVerify = ref<boolean>(false)
const verified = (response: string) => {
  //検証に成功した場合にreCAPTCHAトークンが返却される
  if (response) {
    isVerify.value = true
  } else {
    isVerify.value = false
  }
}

const expired = () => {
  isVerify.value = false
}
</script>

<template>
  <vue-recaptcha
    :sitekey="RECAPTCHA_SITE_KEY"
    @verify="verified"
    @expired="expired"
  ></vue-recaptcha>
</template>

最後にスタイルやイベント処理の修正を行ったら完了です。

完成画面
有効期限が切れた場合

あとがき

reCAPTCHAの導入は一見複雑に見えるかもしれませんが、vue-recaptchaの活用によりVueアプリケーションへスムーズに組み込むことが可能になります。
今回はreCAPTCHA v2を紹介しましたが、GoogleはreCAPTCHAはv2だけでなく、v3も提供しています。
v3はユーザーの行動をバックグラウンドで分析し、スコア形式でbotを検出するため、チェックボックスや画像認証チャレンジを要求せずにセキュリティチェックが可能です。このため、ユーザー体験に影響を与えることなく、セキュリティチェックを行える点で、v3は特に優れていると言えます。
今後は、v3の実装検証や他のCAPTHCAサービスとの比較検討を進めていく予定です。
最後までお読みいただき、ありがとうございました。