Vue中使用Google的reCAPTCHA v3人机校验-demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中使用Google的reCAPTCHA v3人机校验-demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

reCAPTCHA

Google 提供了 reCAPTCHA（v3 和 v2）和 reCAPTCHA Enterprise，帮助您保护网站免受欺诈活动、垃圾内容和滥用行为的侵扰

Vue中使用Google的reCAPTCHA v3人机校验-demo,Vue,JavaScript,vue.js,前端,javascript

reCAPTCHA v3

「所有的頁面都會有 reCaptcha 的追蹤功能」
不需做任何事，v3會針對使用者行為，判定安全性分數，1.0 代表操作自然很像真人，0.0 意味極有可能是機器人，如安全性太低，網站才會要求人機驗證。
如使用 v3，右下角會出現 reCAPTCHA 的圖示，可用 css 隱藏

reCAPTCHA 使用流程

注册 reCAPTCHA ➝ 拿到网站密钥🔑 ➝ 密钥放進 reCAPTCHA 程式碼 ➝ 取得驗證 token 回傳給後端

Vue中使用Google的reCAPTCHA v3人机校验-demo,Vue,JavaScript,vue.js,前端,javascript

reCAPTCHA v2 使用

使用 vue3-recaptcha2 套件，可以快速使用 v2

npm install vue3-recaptcha2

<vue-recaptcha
  :sitekey="v2Sitekey"
  size="normal"
  theme="light"
  hl="zh-TW"
  @verify="recaptchaVerified"
  @expire="recaptchaExpired"
  @fail="recaptchaFailed"
  ref="vueRecaptcha">
</vue-recaptcha>


import vueRecaptcha from 'vue3-recaptcha2';

export default {
   components: {
	  vueRecaptcha
  },
  setup() {
    // 帶入你的 siteKey
    const v2Sitekey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI';

    // 回傳一組 token，並把 token 傳給後端驗證
    const recaptchaVerified = (res) => {
      console.log(res)
	  }

    const recaptchaExpired = () => {
      // 過期後執行動作
    }

    const recaptchaFailed = () => {
      // 失敗執行動作
    }

    return {
      v2Sitekey, recaptchaVerified, recaptchaExpired, recaptchaFailed
    }
  }
}

reCAPTCHA v3 使用

使用 vue-recaptcha-v3 套件，可以快速使用 v3

npm install vue-recaptcha-v3

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'

const app = createApp(App);
 // 帶入你的 siteKey
app.use(VueReCaptcha, { siteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' });
app.mount('#app')

<form class="row g-3">
  <div class="col-md-4 position-relative">
    <label class="form-label">帳號</label>
    <input type="text" class="form-control" value="" required>

  </div>
  <div class="col-md-4 position-relative">
    <label class="form-label">密碼</label>
    <input type="password" class="form-control" value="" required>
  </div>
  <div class="col-12">
    <button class="btn btn-warning" type="button" @click="recaptcha">Submit form</button>
  </div>
</form>



import { useReCaptcha } from 'vue-recaptcha-v3'

export default {
  setup() {
    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

    // submit 回傳一組 token，並把 token 傳給後端驗證
    const recaptcha = async () => {
      await recaptchaLoaded()
      const token = await executeRecaptcha('login')
      console.log(token)
    }

    return {
      recaptcha
    }
  }
}

使用前需注意:
1.reCaptcha官网网站为:https://developers.google.com/recaptcha/(需要翻墙)
2.在国内使用的话,需要将demo中所有的www.google.com替换成www.recaptcha.net不然无法使用reCAPTCHA
3.使用reCaptcha需要去注册google账号,并且去https://www.google.com/recaptcha/admin#list里面去创建秘钥对()稍等我会标注出来)文章来源地址https://www.toymoban.com/news/detail-707882.html

到了这里，关于Vue中使用Google的reCAPTCHA v3人机校验-demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！