keycloak~Googl的reCAPTCHA驗證
reCAPTCHA是Google公司推出的一項驗證服務,使用十分方便快捷,在國外許多網站上均有使用。它與許多其他的人機驗證方式不同,它極少需要用戶進行各種識圖驗證。
它的使用方式如下如所示,只需勾選復選框即可通過人機驗證。

雖然簡單但效果很好,因為Google會收集一些瀏覽器信息,網絡信息,鼠標軌跡等信息,最后通過神經網絡判斷是否為機器人。而且reCAPTCHA還可以記錄并分析使用該人機驗證的請求次數,并對可以的請求進行統計和監管。
一些準備工作:
需要一個谷歌賬號沒有的先去注冊一個
- reCAPTCHA官網:https://developers.google.com/recaptcha/(需要kexue上網)
- 使用reCAPTCHA需要創建密匙對,創建密匙:https://www.google.com/recaptcha/admin
首先先創建密匙
進入 https://www.google.com/recaptcha/admin

創建成功后會產生一對密匙

前端部署
在你需要添加reCAPTCHA的界面添加script標簽
<script src="https://www.recaptcha.net/recaptcha/api.js"></script>
然后再你需要顯示reCAPTCHA驗證框的地方添加
<div class="g-recaptcha" data-sitekey="你的網站密匙"></div>
可以設置驗證框的主題默認主題為light,可以添加屬性:data-theme="dark" 變為暗色主題
方式一、自動將請求綁定到按鈕
1、加載JavaScript API
<script src="https://www.google.com/recaptcha/api.js"></script>
2、添加一個回調函數來處理令牌
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
3、向 html 按鈕添加屬性
<button class="g-recaptcha"
data-sitekey="reCAPTCHA_site_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
方式二、以編程方式調用

為了大家方面理解,如上圖,可以先看看我做的一個demo:recaptcha
1、用 sitekey(站點秘鑰) 加載 JavaScript API
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
2、添加一個回調函數來處理令牌
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
3、在你需要進行人機驗證的操作上調用 grecaptcha.execute 方法
reCAPTCHA v3 引入了一個新概念——動作如:( action: ‘submit / login’ )。當你在每一個執行 reCAPTCHA 的地方指定一個動作名稱時,你啟用了以下新特性:
1、管理控制臺中前10個操作的詳細數據分解
2、Adaptive risk analysis based on the context of the action, because abusive behavior can vary.
操作可能只包含字母數字字符、斜線和下劃線。
<script>
function onClick(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
// Add your logic to submit to your backend server here.
});
});
}
</script>
注意:
嘗試將執行調用掛鉤到有趣的動作,如注冊、密碼重置、購買或播放。
你可以使用ajax提交,也可以把 token 插入到 HTML 的 input hidden 隱藏框,一起提交到后端進行校驗。
4、將令牌(token)立即發送到網站后端,并發送要驗證的請求。
后端部署
在每次驗證完成后會生成一個g-recaptcha-response驗證碼,需要將這個驗證碼和你的密匙一起發送至:https://www.recaptcha.net/recaptcha/api/siteverify (使用GET方式傳參)
傳參的格式:secret=xxxxxx&response=xxxxxxx
下圖為需要傳遞的參數及其含義
接口返回的數據是json格式
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
驗證通過后success返回的值為“true”,如果驗證失敗則會返回error-code,下面為error-code及其對應原因

浙公網安備 33010602011771號