reCAPTCHA

Google 提供了 reCAPTCHA（v3 和 v2）和 reCAPTCHA Enterprise，幫助您保護網(wǎng)站免受欺詐活動、垃圾內(nèi)容和濫用行為的侵?jǐn)_

?reCAPTCHA v3

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

reCAPTCHA 使用流程

注冊 reCAPTCHA ? 拿到網(wǎng)站密鑰?? ? 密鑰放進 reCAPTCHA 程式碼 ? 取得驗證 token 回傳給後端

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 = () => {
      // 過期後執(zhí)行動作
    }

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

    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官網(wǎng)網(wǎng)站為:https://developers.google.com/recaptcha/(需要翻墻)
2.在國內(nèi)使用的話,需要將demo中所有的www.google.com替換成www.recaptcha.net不然無法使用reCAPTCHA
3.使用reCaptcha需要去注冊google賬號,并且去https://www.google.com/recaptcha/admin#list里面去創(chuàng)建秘鑰對()稍等我會標(biāo)注出來)文章來源地址http://www.zghlxwxcb.cn/news/detail-707882.html

到了這里，關(guān)于Vue中使用Google的reCAPTCHA v3人機校驗-demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！