Google驗證碼reCAPTCHA

1.前言

之前在搜java生成驗證碼時遇見的一個好玩的東西,在此分享給大家。

想要了解Java生成驗證碼的可以看這篇博客Java生成驗證碼並傳輸至前端

我們在開發一個普通的網站時候爲了防止“機器人”惡意登錄浪費系統開銷,經常選擇驗證碼功能來識別人-機,比如隨機的英文數字加電腦隨機生成的輔助線來干擾機器,早期的AI是無法識別這種圖片的從而達到攔截的效果。而後隨着AI的進步,人們又發明了純圖像識別的驗證碼如12306的各種稀奇古怪的圖像認證;但隨着大數據的火熱,人工智能機械學習的進步似乎這種方式也無法阻攔AI的"滲透",於是乎你可以看到現在一些直播網站上面拼圖的驗證方式或者一些漢字成語順序的選擇驗證模塊,雖然驗證碼的技術越來越先進但同時也變得愈加繁瑣,而這時谷歌的reCAPTCHA應運而生,僅僅點擊按鈕的方式給用戶驗證碼輸入的體驗有了很大的提升。我在網上查了一些資料,其原理大概描述一下就是:分析用戶使用電腦的習慣來區分人機,比如你是一個機器那麼你在網頁上操作點擊一個註冊按鈕時鼠標所通過的路徑無論幾百萬次都是可以保持一致的,但是人類是無法達到這種精度的便可以通過驗證。

2.國內使用reCAPTCHA

使用reCAPTCHA我們需要註冊一個site key

http://www.google.com/recaptcha/admin 需要科學上網,但是一次註冊即可永久使用,具體流程大家可以在網上查找資料,本文不在此多做介紹

本地開發我們可以使用它的測試site key:6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

下面上代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>reCAPTCHA</title>
	</head>
	<body>
		<form action="?" method="POST">
			<div class="g-recaptcha" data-callback="robotVerified" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
		</form>
	</body>
	
	<script>
        //驗證成功回調函數,函數名可在上方data-callback自定義
		function robotVerified(){
			console.log('Verified:not bot');
		}
	</script>
	
	<script src="https://www.recaptcha.net/recaptcha/api.js?hl=zh-CN" async defer></script>
</html>

引入相關的js <script src="https://www.recaptcha.net/recaptcha/api.js?hl=zh-CN" async defer></script>

 www.recaptcha.net使用的是谷歌官方的反向代理,後面的hl參數可以設置使用的語言,我這裏選擇的是簡體中文。

簡單介紹reCAPTCHA的兩個鉤子:

data-callback 驗證成功回調函數:即驗證成功後你要進行的操作

data-expired-callback 驗證失敗回調函數:提醒用戶重新驗證

更多相關的資料大家可以自行去看它的官方文檔或網上資源

3.效果圖

reCAPTCHA效果圖​​​​​​​

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章