GoogleReCPTCHAの登録#

下記の記事を参考にGoogleReCPTCHAの登録を行ってください。

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

途中V3かV2を選ぶところがあるので、そこではV2を選んでください。

パッケージのインストール#

次に、V2用のパッケージのインストールを行います。

npm i --save vue-recaptcha
OR
yarn add vue-recaptcha

ReCPTCHAの実装#

スクリプトファイルの読み込み###

そしたら、実装していきます。

まず、スクリプトファイルを読み込んでいきます。

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

リキャプチャキーの設定###

先ほど登録した画面からサイトキーをコピーして、環境変数として設定します。

環境変数は非常に便利なので、分からない方は下記の記事に詳しく説明しているのでぜひご覧ください。

初心者必見！固定値（キー、URLなど）は.envファイルに書いて再利用しよう！！

/.env

VUE_APP_RECAPTCHA_SITE_KEY_V2 = '6LeBtDIaAAAAAHidiiieieHuiiwuwen'

ローカルサーバーを立ち上げている人は一旦止めて、もう一度サーバーを立ち上げて下さい。

でないと環境変数の値が更新されません。

コンポーネントの表示###

先ほどインストールしたパッケージをコンポーネントとして使っていきます。

App.vue

<template>
  <div>
         <VueRecaptcha
            :sitekey="recaptchaKey"
            ref="recaptcha"
          ></VueRecaptcha>
  </div>
</template>

<script>
import VueRecaptcha from 'vue-recaptcha'
export default {
  components: {
    VueRecaptcha
  },
  data() {
    return {
      recaptchaKey: process.env.VUE_APP_RECAPTCHA_SITE_KEY_V2,
    }
  },
}
</script>

少しインデントはずれていますがご了承ください。

これで「ロボットではありません」を表示することができます。

ここからさらにボタンの制御を行っていきます。

関数の設定###

最後に認証が通った時、通らなかった時の処理を行っていきます。

結論から言うと、認証が通った時は@verify、認証が通らなかった時は@expiredとしてイベントを発火することができます。

そして、認証が通ったとき、通らなかったときに分けてbuttonのdisabledを操作していきます。

App.vue

<template>
  <div>
         <VueRecaptcha
            :sitekey="recaptchaKey"
            @verify="onVerify"
            @expired="onExpired"
            ref="recaptcha"
          ></VueRecaptcha>
         <button :disabled="isDisabled">
          送信
        </button>
  </div>
</template>

<script>
import VueRecaptcha from 'vue-recaptcha'
export default {
  components: {
    VueRecaptcha
  },
  data() {
    return {
      isDisabled: true,
      recaptchaKey: process.env.VUE_APP_RECAPTCHA_SITE_KEY_V2,
    }
  },
  methods: {
    onVerify(response) {
      if(response !== '') {
        this.isDisabled = false
      } else {
        return false
      }
    },
    onExpired() {
      this.resetRecaptcha()
    },
    resetRecaptcha() {
      this.$refs.recaptcha.reset()
      this.isDisabled = true
    },
    }
  },
}
</script>

this.$refs.recaptcha.reset()で一度行った認証をリセットすることができます。

onVerifyの引数のresponseは認証を行った際のトークンの値を取得しています。

@verify、@expired使うことでボタンの制御であったり、ページの制御を行うことができます。

いかがだったでしょうか？

V2はそこまで難しくはないと思います。

あらかじめパッケージが用意されているので。

ただ、V3は結構難しいので取り組む方はぜひ頑張ってください！

以上、「初心向け！Vue.jsでReCPTCHAを使ってボタンの制御を行おう！（V2）」でした！

良ければ、LGTM、コメントお願いします。

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

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

Thank you for reading