recaptcha vue_适用于Vue.js的Google ReCAPTCHA组件

recaptcha vue

验证码 (vue-recaptcha)

Google ReCAPTCHA component for vue.

适用于vue的Google ReCAPTCHA组件。

安装 (Install)

NPM (NPM)

$ npm install --save vue-recaptcha

CDN (CDN)

<script src="https://unpkg.com/[email protected]/dist/vue-recaptcha.js"></script>
<!-- Minify -->
<script src="https://unpkg.com/[email protected]/dist/vue-recaptcha.min.js"></script>

用法 (Usage)

开始吧 (Get started)

Place this in head to load reCAPTCHA:

将其放在头部以加载reCAPTCHA：

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>

这里需要说明一下，在中国请用 www.recaptcha.net 替换 www.google.com ：

<script src="https://www.recaptcha.net/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>

With `onload` callback, it will notify us when the api is ready for use.

Then include vue-recaptcha in your app.

然后在您的应用程序中包含vue-recaptcha 。

<template>
  <vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>

<script>
  import VueRecaptcha from 'vue-recaptcha';
  export default {
    ...
    components: { VueRecaptcha }
  };
</script>

将挑战绑定到按钮 (Bind Challenge to Button)

<template>
  <vue-recaptcha sitekey="Your key here">
    <button>Click me</button>
  </vue-recaptcha>
</template>

<script>
  import VueRecaptcha from 'vue-recaptcha';
  export default {
    ...
    components: { VueRecaptcha }
  };
</script>

Notice: You could only place one element as vue-recaptcha child.

注意：您只能放置一个元素作为vue-recaptcha子级。

For more information, please reference to example

有关更多信息，请参考示例

API (API)

道具 (Props)

sitekey (required)

sitekey(必填)

ReCAPTCHA site key
ReCAPTCHA网站密钥
theme (optional)

主题(可选)

The color theme for reCAPTCHA
reCAPTCHA的颜色主题
type (optional)

类型(可选)

The type of reCAPTCHA
reCAPTCHA的类型
size (optional)

大小(可选)

The size of reCAPTCHA
reCAPTCHA的大小
tabindex (optional)

tabindex(可选)

The tabindex of reCAPTCHA
reCAPTCHA的tabindex
badge (optional) (Invisible ReCAPTCHA only)

徽章(可选)(仅不可见的ReCAPTCHA)

Position of the reCAPTCHA badge
reCAPTCHA徽章的位置

方法 (Methods)

reset

重启

Reset reCAPTCHA instance
重置reCAPTCHA实例
execute

执行

Invoke reCAPTCHA challenge
调用reCAPTCHA挑战

大事记 (Events)

verify(response)

验证(响应)

Emit on reCAPTCHA verified
通过reCAPTCHA验证

response is the successful reCAPTCHA response

response是成功的reCAPTCHA响应
expired()

expired()

Emit on reCAPTCHA expired
reCAPTCHA上的发射已过期
render(id)

渲染(id)

Emit on reCAPTCHA mounted on DOM
在安装在DOM上的reCAPTCHA上发射

id is the widget id of the component

id是组件的小部件ID

翻译自: https://vuejsexamples.com/google-recaptcha-component-for-vue-js/