gpt4 book ai didi

javascript - Vue.js 谷歌验证码回调

转载 作者:可可西里 更新时间:2023-11-01 01:45:59 27 4
gpt4 key购买 nike

我正在尝试让 recaptcha 回调在组件中与 vue.js 一起使用。验证码本身确实有效,但我在 data-callback 属性中定义的回调无效。

我已经尝试了所有我能想到的方法,但我仍然遇到 ReCAPTCHA 找不到用户提供的函数:dothisthat 错误。

这是组件

<script>
function dothisthat (){
alert(312);
}
</script>

<template>
<div class="well main-well">
<h4>Captcha</h4>
<p class="small">You must complete the captcha to finish your booking.</p>
<div id="captcha-wrapper">
<div class="g-recaptcha" :data-sitekey="captchaKey" data-callback="dothisthat"></div>
</div>
</div>
</template>
<script>
function dothisthat (){
alert(123);
}
import * as filters from '../../../filters';
import Translation from '../../../Translation';

export default {
name: 'Captcha',
props: {
},
computed: {
captchaKey: function() {
return this.$store.getters.captcha;
}
},
methods: {
dothisthat: function(){
return function() {
console.log("123");
};
}
},
mounted(){

function dothisthat() {
alert(123);
}
$(function() {
function dothisthat() {
alert(123);
}
});
}
}
</script>

没有一个 dothisthat 函数被调用。我做错了什么?

最佳答案

我也遇到了这个问题,花了我2​​天的时间才解决。

所以我将在这里提供一个从头开始逐步将 recaptcha 与 vue.js 集成的一般答案,以作为将来遇到相同情况的人的简单指南(我假设使用 vue-cli在这里)。

Note: I am using here the invisible recaptcha but the process is pretty similar to the normal one

第 1 步:

将 recaptcha javascript api 添加到您的 index.html

index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

第 2 步:

制作一个名为 Recaptcha 的组件或任何您想调用的组件(制作一个组件将使您的代码更易于阅读,更易于维护,并且如果需要,更容易将 recaptcha 添加到多个页面)

Recaptcha.vue

<template>
<div
id="g-recaptcha"
class="g-recaptcha"
:data-sitekey="sitekey">
</div>
</template>

<script>
export default {
data () {
return {
sitekey: '6LfAEj0UAAAAAFTGLqGozrRD8ayOy*********',
widgetId: 0
}
},
methods: {
execute () {
window.grecaptcha.execute(this.widgetId)
},
reset () {
window.grecaptcha.reset(this.widgetId)
},
render () {
if (window.grecaptcha) {
this.widgetId = window.grecaptcha.render('g-recaptcha', {
sitekey: this.sitekey,
size: 'invisible',
// the callback executed when the user solve the recaptcha
callback: (response) => {
// emit an event called verify with the response as payload
this.$emit('verify', response)
// reset the recaptcha widget so you can execute it again
this.reset()
}
})
}
}
},
mounted () {
// render the recaptcha widget when the component is mounted
this.render()
}
}
</script>

第 3 步:

导入 recaptcha 组件并将其添加到您的页面(父组件)。

page.vue

<template>
<div>
<h1>Parent component (your page)</h1>
<button @click="executeRecaptcha">execute recaptcha</button>
<!-- listen to verify event emited by the recaptcha component -->
<recaptcha ref="recaptcha" @verify="submit"></recaptcha>
</div>
</template>

<script>
import Recaptcha from 'recaptcha'
export default {
components: {
Recaptcha
},
methods: {
// send your recaptcha token to the server to verify it
submit (response) {
console.log(response)
},
// execute the recaptcha widget
executeRecaptcha () {
this.$refs.recaptcha.execute()
}
}
}
</script>

关于javascript - Vue.js 谷歌验证码回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43890035/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com