資研社

進入recaptcha網站以gmail帳號登入後，點選”Get reCAPTCHA” 即可進入下圖的畫面，輸入label 名稱及欲使用網站的domain name，會在個人的reCAPTCHA sites中產生一筆記錄如下圖步驟3所示。

點選上圖步驟3後，即可進入你設定的site reCAPTCHA內容畫面，如下圖所示。其中步驟1為client端的設定方式(即登入畫面)，步驟2為server端的驗證方法。

以下為Login畫面的程式其中”your_site_key”可放入上圖data-sitekey內容。

<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var onloadCallback = function() {
widgetId1 = grecaptcha.render('html_element', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
};
function checkHumanLogin(){
strMessage=grecaptcha.getResponse(widgetId1);
if (strMessage.trim()==""){
alert("請點選　［我不是機器人］　選項");
return false;
}
}
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit" onClick="return checkHumanLogin();">
</form>
<script src="https://www.google.com/recaptcha/api.js onload=onloadCallback&render=explicit" async defer>
</script>
</body>
</html>

server端為防止駭客攻繫，請務必進行驗證，無證以get或post的方式傳送若成功送出，在server端會取得一個g-recaptcha-response的變數，server 端可以此變數內容加上secret的key內容至api網址https://www.google.com/recaptcha/api/siteverify?secret=XXX&response=XXX
secret變數值為secret key的內容，response變數值為g-recaptcha-response的回傳內容。讀取回傳的json資料，其格式如下

API Response

The response is a JSON object:

{

"success": true|false,

"error-codes": [...] // optional

}

可參考https://developers.google.com/recaptcha/docs/verify
若success為true代表驗證成功。

reCaptcha設定方法

API Response