用vue來實作reCAPTCHA筆記

網頁中常常在進去到真正內容之前，會先跳出一個「我不是機器人」的區塊，像是這樣：

可能是要驗證目前是不是真人在使用，只要勾選完後就可以正常前往，比較進階一點的可能會出現一個九宮格，問裡面哪一些圖裡面有車，答對了就可以進去，亂選就進不去。

專案中會用到，原本以為蠻複雜的但其實文件寫得很清楚。

接下來紀錄我在實作這個需求的脈絡。

確認需求

reCAPTCHA 其實是有分版本的，v2 以及 v3，v3 是目前最新的。
差別在於說 v3 是採取分數的方式，所以使用者不用點擊按鈕了，不然的話 v2 時，還是要點擊一個「我不是機器人」的按鈕，取而代之的是運行在後台，從後台來判斷是不是機器人。

v3 等於說 google 會自動判斷你這個人進到這個網站會給你多少分，然後後台可以去控制幾分才能進到這個網頁裡面。

v2 是用問題來驗證要求。
v3 是用分數來驗證要求。

假如說需求是會希望看到「我不是機器人」的選項可以選擇 v2，想要更方便讓使用者不要有負擔的話可以選擇 v3，這邊我是選擇 reCAPTCHA v2。

註冊 reCAPTCHA

確認好需求好在寫程式之前，要先去 reCAPTCHA 的官網去註冊，https://www.google.com/recaptcha/about/

進到連結後，點選右上角的「Admin Console」，就會出現一系列相關註冊表單，會問說要選擇 v2、v3 哪一種類型，新增在哪一個網域上面，這邊的話正式的網域名我還不知道，所以最終是等後端去申請，目前只能我自己申請的只是測試用的，所以我填了目前本機 localhost 的網域。

註冊成功之後，會拿到一串金鑰及密鑰，可以理解成金鑰是前端頁面使用，密鑰是後端在 server 使用，前端這邊主要會用到金鑰。

拿到了相對應的金鑰之後，就可以繼續往下一步。

vue3-recaptcha2

因為我用 vue3，然後實作的是 reCAPTCHA v2，所以先試著去找有沒有別人已經寫好的套件，後來找到了標題這款。

vue3-recaptcha2 - npm

有了套件之後做起來就方便許多。

在創建好 vue 環境之後，安裝這個套件。

npm install vue3-recaptcha2

確認安裝好之後，在要使用到 reCAPTCHA 的那個頁面引入套件後，宣告這個變數，我是宣告在登入這頁：

import vueRecaptcha from 'vue3-recaptcha2';
const instance_vueRecaptchaV2 = reactive({
  data_v2SiteKey: import.meta.env.VITE_APP_DATA_V25ITEKEY,
  recaptchaVerified: response_token => {
    RecaptchaToken.value = response_token
  },
})

data_v2SiteKey就是註冊時的金鑰。
recaptchaVerified是給後端驗證後的動作。

文件中其實還有提到另外兩個。

recaptchaExpired是處理驗證過期後的動作。
recaptchaError是處理驗證碼錯誤後的動作。

這些變數都會用到待會寫在 vue template 實際上元件的 props 中。

寫起來會像是這樣：

<VueRecaptcha
  class="d-flex justify-center mb-4"
  :sitekey="instance_vueRecaptchaV2.data_v2SiteKey"
  size="normal"
  theme="light"
  @verify="instance_vueRecaptchaV2.recaptchaVerified"
/>

再看畫面上有沒有需要調整 css 的部分，也可以直接改在VueRecaptcha的 tag 上面，這樣功能就完成了。

結論

v3 版本要設定的東西會比較多，但 v2 大致上這些東西就能設定完成，要注意的是如何依照跟後端的溝通進行驗證，在登入頁中算是一個蠻常見的需求。