[技術誌]google reCAPTCHA v3

一年前為了專案研究了一下，最近公司的設計師妹妹又遇到，竟想不起來當初怎麼處理了~趕快來記錄一下。

服用參考:
1. 參考文件 ：developer
2. reCAPTCHA Console： reCAPTCHAadmin

reCAPTCHA Console

• 只有列有的網域才可使用註冊的該組reCAPTCHA
• 兩個金鑰 第一行(html用)後稱 金鑰F； 第二行(驗證用) 後稱 金鑰B

開始套用吧！

1. 先引用google js
   <script src=”https://www.google.com/recaptcha/api.js"></script>
2. 前端找個地方放
   <div class=”g-recaptcha” data-sitekey=”金鑰F”></div>

完成這兩個步驟後，頁面的右下角應該會出現

google reCAPTCHA

驗證時需呼叫驗證的API，但因為前端呼叫該驗證api時會出現跨網域(CORS)問題，所以寫個後端轉接去驗證~ (C#為例)

Model :建立接受與回應參數

Vaild:驗證token

• key：傳入金鑰Ｂ
• response：傳入token
  在後端可以取 Request.Form[“g-recaptcha-response”]
  在前端可以用getElementById(“g-recaptcha-response”)
• 前端button submit寫法
  <button class=”g-recaptcha” data-sitekey=”金鑰F” data-callback=’onSubmit’ data-action=’submit’>Submit</button>

<script>
function onSubmit(token)
{
console.log(token);
axios.post(‘https://xxxxx/api/googletest', {“response”: token,”secret”:”金鑰Ｂ”}) .then((res) => { console.table(res.data) }) .catch((error) => { console.error(error) }) }
</script>

Done~ 🙌