界面http://localhost:你的伺服器/Code/index 實現步驟: 註冊賬號https://www.geetest.com 新增驗證 下載demo (url:http://docs.geetest.com/install/server/csharp/) 找到C#的SDK .dll g ...
界面http://localhost:你的伺服器/Code/index
實現步驟:
新增驗證
下載demo (url:http://docs.geetest.com/install/server/csharp/)
找到C#的SDK .dll
gt3-dotnet-sdk-master\gt3-dotnet-sdk-master\src\GeetestSDK\GeetestSDK\bin\Debug\GeetestSDK.dll
新建mvc項目
在自己的mvc項目中新建一個文件夾,複製到自己的mvc項目中,添加引用。
配置公鑰和秘鑰 創建一個類
類名字都要相同
對應關係
publicKey ---ID
privateKey --- KEY
創建 controller
創建index視圖 (裡面有些代碼是從 demo(gt3-dotnet-sdk-master\gt3-dotnet-sdk-master\demo\index.aspx)中copy出來的)
CODE:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
body {
margin: 50px 0;
text-align: center;
}
.inp {
border: 1px solid gray;
padding: 0 10px;
width: 200px;
height: 30px;
font-size: 18px;
}
.btn {
border: 1px solid gray;
width: 100px;
height: 30px;
font-size: 18px;
cursor: pointer;
}
#embed-captcha {
width: 300px;
margin: 0 auto;
}
.show {
display: block;
}
.hide {
display: none;
}
#notice {
color: red;
}
#submitBtn {
margin-top: 30px;
}
#sb {
position: absolute;
color: green;
top: 670px;
left: 50%;
transform: translateX(-50%);
}
/* 以下遮罩層為demo.用戶可自行設計實現 */
#mask {
display: none;
position: fixed;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;
}
/* 可自行設計實現captcha的位置大小 */
.popup-mobile {
position: relative;
}
#popup-captcha-mobile {
position: fixed;
display: none;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 9999;
}
</style>
</head>
<body>
<h1 class="h1">極驗驗證SDKDemo</h1>
<!-- 為使用方便,直接使用jquery.js庫,如您代碼中不需要,可以去掉 -->
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- 引入封裝了failback的介面--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<!-- 若是https,使用以下介面 -->
<!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> -->
<!-- <script src="https://static.geetest.com/static/tools/gt.js"></script> -->
<div>
<br><br>
<form id="form2" action="/Code/submitBtn_ClickMethod" method="post" style="margin-top:100px;">
<h2>Demo,使用ajax形式提交二次驗證所需的驗證結果值</h2>
<br>
<p>
<label for="username2">用戶名:</label>
<input class="inp " id="username2" name="userName" type="text" value="極驗驗證">
</p>
<br>
<p>
<label for="password2">密 碼:</label>
<input class="inp" name="password" id="password2" type="password" value="123456">
</p>
<div id="embed-captcha"></div>
<p id="wait" class="show">正在載入驗證碼......</p>
<p id="notice" class="hide">請先拖動驗證碼到相應位置</p>
<div class="row">
<input type="button" class="btn btn-primary" id="submitBtn" onclick="submitBtn_Click()" value="登 錄" />
</div>
</form>
</div>
<script>
var handlerEmbed = function (captchaObj) {
$("#embed-submit").click(function (e) {
var validate = captchaObj.getValidate();
if (!validate) {
$("#notice")[0].className = "show";
setTimeout(function () {
$("#notice")[0].className = "hide";
}, 2000);
e.preventDefault();
}
});
// 將驗證碼加到id為captcha的元素里,同時會有三個input的值:geetest_challenge, geetest_validate, geetest_seccode
captchaObj.appendTo("#embed-captcha");
captchaObj.onReady(function () {
$("#wait")[0].className = "hide";
});
// 更多介面參考:http://www.geetest.com/install/sections/idx-client-sdk.html
};
/*點擊登錄時ajax請求控制器,把相關數據發送到伺服器*/
var submitBtn_Click = function () {
$.ajax({
// 獲取id,challenge,success(是否啟用failback)
// url: "/getcaptcha.aspx?t=" + (new Date()).getTime(), // 加隨機數防止緩存
url: "/Code/submitBtn_ClickMethod",
type: "post",
data: $("#form2").serialize(),
dataType: "json",
success: function (data) { alert(data);},
error: function (data) {
alert(data);
}
});
};
$.ajax({
// 獲取id,challenge,success(是否啟用failback)
// url: "/getcaptcha.aspx?t=" + (new Date()).getTime(), // 加隨機數防止緩存
url:"/Code/GetCaptcha",
type: "post",
dataType: "json",
success: function (data) {
// 使用initGeetest介面
// 參數1:配置參數
// 參數2:回調,回調的第一個參數驗證碼對象,之後可以使用它做appendTo之類的事件
data = eval('(' + data + ')');
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "embed", // 產品形式,包括:float,embed,popup。註意只對PC版驗證碼有效
offline: !data.success, // 表示用戶後臺檢測極驗伺服器是否宕機,一般不需要關註
new_captcha: data.new_captcha
// 更多配置參數請參見:http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerEmbed);
}
});
</script>
</body>
</html>
controller裡面action方法(gt3-dotnet-sdk-master\gt3-dotnet-sdk-master\demo裡面尋找的 進行修改)
public class CodeController : Controller
{
// GET: Code
public ActionResult Index()
{
return View();
}
/// <summary>
/// 獲取到驗證碼,把驗證碼存到Session中
/// </summary>
/// <returns></returns>
public ActionResult GetCaptcha()
{
GeetestLib geetest = new GeetestLib(GeetestConfig.publicKey, GeetestConfig.privateKey);
String userID = "haiyiTest";//CommonHelper.CalcMD5("haiyiTest")
Byte gtServerStatus = geetest.preProcess(userID, "web", "127.0.0.1");
Session[GeetestLib.gtServerStatusSessionKey] = gtServerStatus;
Session["userID"] = userID;
string captChaString = geetest.getResponseStr();
return Json((object)captChaString);
}
public ActionResult submitBtn_ClickMethod(string userName,string password,string geetest_challenge,string geetest_validate,string geetest_seccode)
{
GeetestLib geetest = new GeetestLib(GeetestConfig.publicKey, GeetestConfig.privateKey);
Byte gt_server_status_code = (Byte)Session[GeetestLib.gtServerStatusSessionKey];
String userID = (String)Session["userID"];
int result = 0;
//String challenge = Request.Form.Get(GeetestLib.fnGeetestChallenge);
//String validate = Request.Form.Get(GeetestLib.fnGeetestValidate);
//String seccode = Request.Form.Get(GeetestLib.fnGeetestSeccode);
String challenge = geetest_challenge;
String validate = geetest_validate;
String seccode = geetest_seccode;
if (gt_server_status_code == 1)
{
result =
geetest.enhencedValidateRequest(challenge, validate, seccode, userID);
}
else {
result =
geetest.failbackValidateRequest(challenge, validate, seccode);
}
if (result == 1) {
// return Content("<div id='sb'><h1>success<h1></div>");
//Response.Write("<div id='sb'>success</div>");
return Json("登錄成功");
}
else {
// return Content(" ");
//Response.Write(" ");
return Json("登錄失敗");
}
}
}