Vue中使用Google的reCAPTCHA v3人机校验-demo

reCAPTCHA

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

 reCAPTCHA v3

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

reCAPTCHA 使用流程

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

reCAPTCHA v2 使用

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

npm install vue3-recaptcha2

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')

  

    帳號
    

  
  

    密碼
    
  
  

    Submit 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里面去创建秘钥对()稍等我会标注出来)