使用 reCAPTCHA v3 做表單送出驗證

分享:

相信大家在看到使用者填資料時,都有看過出現要你輸入驗證碼,或是勾選「我不是機器人」這樣選項的東西,這個 google 本身有提供一個服務叫做 reCAPTCHA 就可以簡單做到,而現在最新的 v3 版甚至不用去勾選「我不是機器人」就可以幫你驗證了。

使用方法也很簡單,首先先到 reCAPTCHA v3 Admin 這邊設定。

按下 + 的按鈕在設定網站就好了。

設定完後會看到一個這樣的內容,把網站金鑰複製起來。

接著照以下步驟:

1. 讀入  javascript API

 <script src="https://www.google.com/recaptcha/api.js"></script>

 

2. 設定  callback function

function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }

 

這裡的 demo-form 要換成你的表單 id

 

3. 把送出的按鈕改成這樣:

<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

這邊就是把 reCAPTCHA_site_key 換成你的網站金鑰。

這樣就完成了,成功完成時會在右下角看到一個 reCAPTCHA 的 icon,在你送出時 reCAPTCHA 就會幫你檢查了。

更多設定可以看官方文件說明

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。