Nuxt.jsにreCaptcha v3を導入してみる

2020/12/05

#Vue.js/Nuxt.js

Nuxt.jsにreCaptchaのv3を導入したのでメモ

nuxt.config.js(色々省略しています)

head:{
      {src:"https://www.google.com/recaptcha/api.js?render=サイトキー"}
}


index.vue

export default{
    data(){
        return {
            token:""
        }
    },
    mounted(){
        let re_this = this
       grecaptcha.ready(function() {
           grecaptcha.execute('サイトキー').then(function(token) {
                re_this.token = token
              });
         });
    }
}


サイト読み込み時にtokenにトークンが入ります。

methodsとajaxでバックエンドに送る処理を書けば検証するコードもかけます。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js