如何在 vuetify 上添加 google recaptcha 3?

Posted

技术标签:

【中文标题】如何在 vuetify 上添加 google recaptcha 3?【英文标题】:How can I add google recaptcha 3 on vuetify? 【发布时间】:2020-02-19 11:26:39 【问题描述】:

我想在我的 vuetify 项目中添加 google recaptcha 3

这样的谷歌recaptcha 3:

我从这里得到参考:https://www.npmjs.com/package/vue-recaptcha-v3

首先:我运行npm install vue-recaptcha-v3

第二:我像这样修改我的 main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
import  VueReCaptcha  from 'vue-recaptcha-v3'

Vue.config.productionTip = false
Vue.use(VueReCaptcha, 
  siteKey: '<site key>',
  loaderOptions: 
    useRecaptchaNet: true
  
)

new Vue(
  router,
  store,
  vuetify,
  render: h => h(App),
  methods: 
    recaptcha() 
      this.$recaptcha('login').then((token) => 
        console.log(token) // Will print the token
      )
    
  ,
  template: '<button @click="recaptcha">Execute recaptcha</button>'
).$mount('#app')

我的问题是我很困惑从我的组件中调用它

我的 vue 组件是这样的:

<template>
  <v-container>
    ...
        <v-row>
          <v-col
            cols="6"
          >
            <v-form v-model="valid" ref="form" 
            >
              <v-text-field
              label="Full Name"
              outlined
              v-model="fullname"
              ></v-text-field>
              <v-text-field
              label="Email"
              outlined
              v-model="email"
              ></v-text-field>
              <v-text-field
              label="Phone"
              outlined
              v-model="phone"
              ></v-text-field>

              <v-row justify="center">
                <v-btn color="green accent-4" :dark="valid" @click="validate()" :disabled="!valid">Save
                  <v-icon dark right>mdi-checkbox-marked-circle</v-icon>
                </v-btn>
              </v-row>
            </v-form>
          </v-col>
        </v-row>
      ...
  </v-container>
</template>

<script>
  export default 
    data: () => (

    )
  
</script>

如何从我的组件调用 google recaptcha 3?

【问题讨论】:

【参考方案1】:

添加站点后,您会从管理控制台获得两个令牌。

在 Vue 应用程序中使用客户端密码,在后端使用服务器密码

在 main.js 中添加客户端密码

Vue.use(VueReCaptcha, 
  siteKey: '<site key>'

去掉main.js中的方法,只是为了演示目的

new Vue(,
  router,
  store,
  vuetify,
  render: h => h(App),
).$mount('#app')

在任何事件上添加验证码

在你的 Vue 组件中添加 recaptcha

<template>
 <button @click="recaptcha">Recaptcha</button>
</template>

<script>
  export default 
   ...
   methods: 
   ...
   recaptcha() 
      this.$recaptcha('login').then((token) => 
        console.log(token) // Will print the token
      )
    
   ,
   ....
  
</script>

它返回登录令牌,您可以使用它向recaptcha to verify the user发送post请求

【讨论】:

以上是关于如何在 vuetify 上添加 google recaptcha 3?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Nuxt/Vuetify 中从头部删除 Google 字体 Roboto?

如何在 datepicker vuetify 上添加描述?

如何在 vuetify 数据表上添加导出 csv、excel 按钮?

如何在 Vuetify 组件上应用自定义/覆盖 CSS?

如何在 vuetify 上实现 s-s-r?

router-link 与 vue 和 vuetify 混淆