如何在 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?