vue3中如何使用reCAPTCHA v3 使用教程

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

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

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
    }
  }
}