- 進入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
}
- 若success為true代表驗證成功。
沒有留言:
張貼留言