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/

recaptcha vue