reCAPTCHA是Google使用方式如下如所示

vbcjnmkk發表於2024-09-01
APTGo

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標籤

然後再你需要顯示reCAPTCHA驗證框的地方新增

可以設定驗證框的主題預設主題為light，可以新增屬性：data-theme="dark" 變為暗色主題

方式一、自動將請求繫結到按鈕
1、載入JavaScript API

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

2、新增一個回撥函式來處理令牌
//程式碼效果參考：https://www.xx-ph.com/sitemap/post.html

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.

操作可能只包含字母數字字元、斜線和下劃線。

注意：

嘗試將執行呼叫掛鉤到有趣的動作，如註冊、密碼重置、購買或播放。

你可以使用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及其對應原因

相關文章