Google reCAPTCHA 是一個智慧驗證工具，可以幫助網站阻擋機器人，或任何形式的自動攻擊，既簡單又安全，不用再輸入難以辨識的驗證英文數字圖了😆

reCAPTCHA 介紹

reCAPTCHA 有三種版本，分別為 reCAPTCHA v2、reCAPTCHA v3、Enterprise

reCAPTCHA v2 以問題驗證要求
「追蹤在網站登入單一頁面」
v2 會依用戶點擊驗證框「我不是機器人」之前、當時和之後的行為，從而來判斷是否是人為操作，如果你被誤判為機器人，網站會要求人機驗證，如從九宮格圖片中選出指定的圖案

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

Enterprise 企業版
多了更多進階功能，v2/v3 有每個月一百萬次的使用上限，若用量大於一百萬，可選擇 Enterprise

接下來會使用 VUE 來做 reCAPTCHA v2、reCAPTCHA v3 的前端操作
在這之前先來輕鬆一下～你找得出哪些是蝴蝶犬嗎😆

回到正題～

reCAPTCHA 使用流程

註冊 reCAPTCHA ➝ 拿到網站金鑰🔑 ➝ 金鑰放進 reCAPTCHA 程式碼 ➝ 取得驗證 token 回傳給後端

📝reCAPTCHA 註冊

註冊 reCAPTCHA 很簡單又快速
先登入 Google 帳號，接著進到 reCAPTCHA 的頁面，點選 v3 Admin Console

會進入下面的表單

標籤
取一個可以輕鬆分辨哪個網站使用的標籤

reCAPTCHA 類型
依需求選擇 reCAPTCHA v3 或 reCAPTCHA v2，其中 reCAPTCHA v2 會多三個選項
🔸「我不是機器人」核取方塊: 勾選「我不是機器人」核取方塊來驗證要求
🔸隱形 reCAPTCHA 標記: 在背景中驗證要求，提交即驗證
🔸reCAPTCHA Android: 驗證 Android 應用程式中的要求

網域
白名單的意思，輸入要應用的網址(方便本機測試可加 localhost)

接受服務條款
同意遵守 reCAPTCHA 服務條款

提交後將會出現傳說中兩把鑰匙🔑

🔑金鑰是給前端頁面使用的，🔑密鑰是後端在 server 使用的
不用擔心 key 忘記，reCAPTCHA 後台都可以看到

reCAPTCHA v2

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

安裝 vue3-recaptcha2

1	npm install vue3-recaptcha2

程式碼
recaptcha-v2.vue

<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

安裝 vue-recaptcha-v3

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

recaptcha-v3.vue

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

結語

不管使用 recaptcha v2 或 recaptcha v3，都是多了一層保護機制，設定上也不困難，一起讓網站更安全吧👊🏽👊🏽👊🏽

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

用 VUE 來做 recaptcha v2 / recaptcha v3 非機器人驗證