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