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

コード 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でバックエンドに送る処理を書けば検証するコードもかけます。

コメント

タイトルとURLをコピーしました