时间 2016-03-02 18:22:37 smallerpig
 

geetest开发体验,写一下快速搭建geetst的步骤(极简模式) 
首先,我们去geetest注册一个账号 ,拿到验证所需的captcha_id和private_key(不想注册的同学可以使用下面提供测试id和key)

captcha_id:b46d1900d0a894591916ea94ea91bd2c

private_key:36fc3fe98530eea08dfc6ce76e3d24c4

我们一般在做项目时为了保证提交的数据是真实用户数据而非机器人提交一般都会添加验证码操作来让用户在提交表单的同时填上服务端生成的验证码,这样在一定程度上能够防止暴力提交或者暴力破解。但是却在一定程度上增加了开发的成本。

现在的互联网上各种产品都能够独立开发使用,今天小猪就为大家介绍 极验验证 这个工具。

目前网络中已经可以发现大量使用该产品的应用,用户只需简单的滑动滑块来进行验证( 体验地址 ),一定程度上提高了用户体验。

极验官方提供了C#版本的服务端 SDK 。并且提供了一个简单的 DEMO 。可惜该DEMO是Web Form版本的。而目前大家使用的比较多的是ASP.NET MVC项目,所以今天小猪就在其官方DEMO的基础上改成了ASP.NET MVC项目。

  • 新建ASP.NET MVC项目,并在项目中引用C#版本的SDK。
  • 申请极验账号并添加验证。如图:
    成功添加后我们可以看到对应的ID和KEY。
  • 新建测试控制器 AccountController

  • 在控制器中随意添加一个Action,例如Login
  • 在对应的View里添加代码(例如Login.cshtml):
<div id="geetest-container">

    </div>
<script src="http://static.geetest.com/static/tools/gt.js"></script> <script>
window.addEventListener('load',processGeeTest); function processGeeTest() {
$.ajax({
// 获取id,challenge,success(是否启用failback)
url: "/Account/GeekTest",
type: "get",
dataType: "json", // 使用jsonp格式
success: function (data) {
// 使用initGeetest接口
// 参数1:配置参数,与创建Geetest实例时接受的参数一致
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "float", // 产品形式
offline: !data.success
}, handler);
}
});
} var handler = function (captchaObj) {
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#geetest-container"); captchaObj.onSuccess = function(e) {
console.log(e);
} };
</script>
    <divid="geetest-container">
 
    </div>
    <scriptsrc="http://static.geetest.com/static/tools/gt.js"></script>
 
    <script>
        window.addEventListener('load',processGeeTest);
 
        function processGeeTest() {
            $.ajax({
                // 获取id,challenge,success(是否启用failback)
                url: "/Account/GeekTest",
                type: "get",
                dataType: "json", // 使用jsonp格式
                success: function (data) {
                    // 使用initGeetest接口
                    // 参数1:配置参数,与创建Geetest实例时接受的参数一致
                    // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
                    initGeetest({
                        gt: data.gt,
                        challenge: data.challenge,
                        product: "float", // 产品形式
                        offline: !data.success
                    }, handler);
                }
            });
        }
 
        var handler = function (captchaObj) {
            // 将验证码加到id为captcha的元素里
            captchaObj.appendTo("#geetest-container");
 
            captchaObj.onSuccess = function(e) {
                console.log(e);
            }
 
        };
    </script>
 

上述代码中使用了JQuery库,需要同时引用。其中我们使用Ajax来动态请求后台AccountController的GeeTest方法,代码如下:

public ActionResult GeekTest()
{
string result = getCaptcha(); return Content(result, "application/json");
} private String getCaptcha()
{
GeetestLib geetest = new GeetestLib(geetest_publicKey, geetest_privateKey);
Byte gtServerStatus = geetest.preProcess();
Session[GeetestLib.gtServerStatusSessionKey] = gtServerStatus;
return geetest.getResponseStr();
}
public ActionResultGeekTest()
{
    string result = getCaptcha();
 
    return Content(result, "application/json");
}
 
 
private String getCaptcha()
{
    GeetestLibgeetest = new GeetestLib(geetest_publicKey, geetest_privateKey);
    Byte gtServerStatus = geetest.preProcess();
    Session[GeetestLib.gtServerStatusSessionKey] = gtServerStatus;
    return geetest.getResponseStr();
}
 

上述代码中的 geetest_publicKeygeetest_privateKey 分别对应极验后台申请到的ID和KEY。

这样我们就可以运行程序看到效果。接下来的工作就是确认用户在提交对应的表单的时候有没有通过极验的验证了。

在接受表单提交的POST地址里面输入代码,例如:

//
// POST: /Account/Login
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
if (!CheckGeeTestResult())
{
ModelState.AddModelError("", "请先完成验证操作。");
return View(model);
}
if (!ModelState.IsValid)
{
return View(model);
} //其他验证逻辑
...
}
} private bool CheckGeeTestResult()
{
GeetestLib geetest = new GeetestLib(geetest_publicKey, geetest_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);
if (gt_server_status_code == 1) result = geetest.enhencedValidateRequest(challenge, validate, seccode, userID);
else result = geetest.failbackValidateRequest(challenge, validate, seccode);
if (result != 1) return false; return true;
}
//
// POST: /Account/Login
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModelmodel, string returnUrl)
{
    if (!CheckGeeTestResult())
    {
        ModelState.AddModelError("", "请先完成验证操作。");
        return View(model);
    }
    if (!ModelState.IsValid)
    {
        return View(model);
    }
 
    //其他验证逻辑
    ...
    }
}
 
private bool CheckGeeTestResult()
{
    GeetestLibgeetest = new GeetestLib(geetest_publicKey, geetest_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);
    if (gt_server_status_code == 1) result = geetest.enhencedValidateRequest(challenge, validate, seccode, userID);
    else result = geetest.failbackValidateRequest(challenge, validate, seccode);
    if (result != 1) return false;
 
    return true;
}
 
 

上述代码中大部分引用了极验官方DEMO的代码。这样我们在前台view中可以使用

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
 

来提示用户首先需要通过滑块验证才能继续操作。

这样我们就完成了将极验验证集成到我们的ASP.NET MVC项目中。并且可以在极验的后台中查看具体的数据报表:

整个产品的使用我们并没有编写太多的代码,而且将复杂的验证过程交给了第三方,而我们自己只需要关心自己的业务逻辑

在ASP.NET MVC项目中使用极验验证(geetest)的更多相关文章

  1. 在 ASP.NET MVC 项目中使用 WebForm、 HTML

    原文地址:http://www.cnblogs.com/snowdream/archive/2009/04/17/winforms-in-mvc.html ASP.NET MVC和WebForm各有各 ...

  2. 在已有的Asp.net MVC项目中引入Taurus.MVC

    Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...

  3. ASP.NET MVC项目中App_Code目录在程序应用

    学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...

  4. 在ASP.NET MVC项目中使用React

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前 ...

  5. 在ASP.NET MVC 项目中 使用 echarts 画统计图

    echarts 官方地址:http://echarts.baidu.com/ 一.根据图中的数据怎么从数据库中获取并组装成对应格式: 从数据库中获取对应数据,然后在项目中引用Newtonsoft.Js ...

  6. 如何在node和vue前后端分离的项目中使用极客验证,用node的方式

    1.用express的脚手架和vue-cli的脚手架搭建的项目目录如下图 2.在vue-client的src/component新建一个login.vue文件,作为登录页面,代码如下 <temp ...

  7. ASP.NET MVC项目中EntityFramework"代码优先方法"的使用步骤

    EF提供了三种方式来实现项目,分别是: (1)代码优先方法: (2)模型优先方法: (3)数据库优先方法: 本篇主要记录在Vs2010环境下使用代码优先的方式实现数据库和后端代码数据交互,语言为C#, ...

  8. nginx在asp.net mvc项目中 配置 初步快速入门

    nginx 官方下载地址 http://nginx.org/en/download.html 一般.net项目要运行在IIS环境下,自然选择windows版下载 我这里下载了nginx/Windows ...

  9. ASP.NET MVC 项目中 一般处理程序ashx 获取Session

    1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和aaa=Session["xxx"].ToString( ...

随机推荐

  1. 【052-week 预习周】学习总结

    目录 学习手册 学习理念 学员精选 课前准备 概览 数据结构思维导图 算法思维导图 学习手册 学习理念 让优秀的人一起学习 师傅领进门,修行靠个人 学员精选 稻盛和夫"六项精进" ...

  2. 内存块是一种数据结构,内核对象&句柄

    内核对象&句柄 目录 1 内核对象的概念 2 内核对象的使用计数 3 句柄 4 句柄表   项目工程代码中设计句柄的使用,一时不知句柄是何物,通过查阅自学之后,对句柄及其使用有一个初步的了解. ...

  3. Angular ViewChild & ViewChildren

    基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...

  4. Capacity To Ship Packages Within D Days

    A conveyor belt has packages that must be shipped from one port to another within D days. The i-th p ...

  5. winform中使用TextBox滚动显示日志信息

    代码如下: private void ShowInfo(string msg) { this.BeginInvoke((Action)(() => { textBox1.AppendText(s ...

  6. 【计数】Simple Addition Expression

    [来源] 2008年哈尔滨区域赛 [题目链接]: http://acm.hdu.edu.cn/showproblem.php?pid=2451 [参考博客]: HDU 2451 Simple Addi ...

  7. 安装consul-client+registrator

    安装registrator 下载镜像这里必须要注意:registrator的lastest版本已经2年没更新了,他的最新主板本是master,一定要注意,因为旧的版本无法发现跟自己不是同一个网络的容器 ...

  8. k8s之configmap和secret

    1.configmap configmap和secret是两种特殊的存储卷,它们不是给pod提供存储空间用的,而是给管理员或者用户提供了从外部向pod内部注入信息的方式. configmap:把配置文 ...

  9. 【原创】大叔经验分享(59)kudu查看table size

    kudu并没有命令可以直接查看每个table占用的空间,可以从cloudera manager上间接查看 CM is scrapping and aggregating the /metrics pa ...

  10. 搭建自己的框架WedeNet(四)

    WedeNet2018.Web-UI层:结构如下: 首先,在Controller中定义BaseController,以便加入统一处理逻辑,如下: using log4net; using System ...