vue.js

「vue-recaptcha」で「Google reCAPTCHA」コンポーネントを実装する

「vue-recaptcha」で「Google reCAPTCHA」コンポーネントを実装する 8

vue-recaptchaとは

 

「vue-recaptcha」で「Google reCAPTCHA」コンポーネントを実装する 8

 

vue-recaptchaは、Google reCAPTCHA V2用のコンポーネントライブラリです。

 

Google reCAPTCHA の初期設定は以下の記事を参考にしてください。

[PHP]Google reCAPTCHAを実装する(V2・V3両対応)

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install --save vue-recaptcha

CDN

<script src="https://unpkg.com/[email protected]/dist/vue-recaptcha.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/DanSnow/vue-recaptcha

 

導入手順

Google reCAPTCHAを実装します。

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import VueRecaptcha from 'vue-recaptcha';

(2)WEBページの場合

const VueRecaptcha = window.VueRecaptcha;

2.メソッドを設定

new Vue({
    el: "#app",
    components: { 
      'vue-recaptcha': VueRecaptcha
    }
});

3. <vue-recaptcha>テンプレートを準備

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>

<div id="app">
  <vue-recaptcha 
    sitekey="[YOUR KEY]" 
    ref="invisibleRecaptcha"
  ></vue-recaptcha>
</div>

 

さいごに

Google reCAPTCHA V2 用のコンポーネントライブラリでした。

V3は未対応らしいので、V3を使うなら別のライブラリや直接の実装が必要になります。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, ,