因為自動爬文的功能日益強大，所以要讓我們的網頁不會被機器人攻佔，我們就要作最基本驗證，你是不是機器人的驗證，google recaptch 就是最簡單好用的工具，以下就是基本範例。
一、上網註冊帳號
驗證的domain: 是你目前網站的domain
註冊成功後
取得一組密碼，分別是Site key 和 Secret key ，site key是用前端網頁用，secret
key 允許後端驗證
二、引用recaptcha.js
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>
<div id="captcha_container" class="google-cpatcha" ></div>
<div id="captcha_container_response"></div> <!--視情況是否需要->
三、如何取得前端的驗證碼
Google recaptcha 會先取得Site Key 進行到驗證後，取得一連串的回傳碼，那一串的回傳碼，如果這回傳碼要post 到server端，就需要先儲存下來，所以下面的就是將callback呼叫onSubmit的函式，將回傳值結果儲存在div。
var onloadCallback = function () {
var sitekey = "6LcHul0XXXXXXXXXXXXXM6NNUXf";
grecaptcha.render('captcha_container', {
'sitekey': sitekey,
'callback': onSubmit
});
};
//以下是作者後端需要驗證，所以會保留回傳值，一般的情況是可省略
function onSubmit(response) {
$("#captcha_container_response").val(response);
}
//以下是筆者先呼叫後端前，先驗證是否機器人，成功後才呼叫後端
$scope.SendChangePassword = function () {
var v = grecaptcha.getResponse();
var vertification = false;
if (v.length == 0) {
alert("驗證失敗!");
return;
}
//筆者以非同步呼叫後端，所以連後端也需要驗證
$scope.grecaptchaResponse=$("#
$http({
method: 'POST',
data:
{
oldPassword:
$scope.txtOldPassword,
newPassword: $scope.txtNewPassword,
newRePassword:
$scope.txtReNewPassword,
grecaptchaResponse:
$scope.txtReNewPassword
},
url: '/Web/Changepassword/SendChanegPassword',
cache: false
})
}
|
四、如何取得後端的驗證碼
[HttpPost]
public ActionResult SendChanegPassword(string oldPassword, string newPassword,
string newRePassword,string grecaptchaResponse)
{
var googleRecaptchResponse
= grecaptchaResponse;
GoogleRecaptchService googleRecaptchSvc
= new GoogleRecaptchService();
bool vertificationSucess
= googleRecaptchSvc.Verification(grecaptchaResponse);
if (vertificationSucess
== false)
return Json(new {
success = false, message = "後端驗證失敗!" });
PageResult result
= new PageResult();
BusinessLogic bi
= new BusinessLogic();
try
{
result
= bi.ChangePassword(oldPassword, newPassword);
}
catch (Exception ex)
{
result.isSuccess
= false;
result.alertMessage
= ex.Message;
return Json(new {
success = false, message = ex.Message });
}
return Json(new {
success = true, message = result });
}
public class GoogleRecaptchService
{
public bool Verification(string recaptchResponse)
{
try
{
var client
= new WebClient();
// 透過Google的API 來驗證回傳碼是正確的，
您需要輸入回傳碼和secret key，它會回傳是否驗證成功的訊息
var result
= client.DownloadString(string.
var obj
= JObject.Parse(result);
bool status
= (bool)obj.SelectToken("
return status;
}
catch (Exception ex)
{
throw;
}
}
}
|
PS: 如果表單是用submit 送到後端時，只需要 string Response =
Request["g-recaptcha-response"]，就會自動取得回傳的驗證碼囉~
五、結果
頁面下方多了一個我不是機器人圖示
勾選後，就會自動產生回傳碼(儲存頁面中)，驗證成功後，才呼叫後端
如果頁面放置太久，原本驗證成功的訊息，也會時間太久而失效，需要再點選驗證喔!
以上是筆者簡單的介紹喔!!! 是不是很好用…
