MVC使用极验验证制作登录验证码学习笔记7

       在之前的项目中，如果有需要使用验证码，基本都是自己用gdi+画图出来，简单好用，但是却也存在了一些小问题，首先若较少干扰线，则安全性不是很高，验证码容易被机器识别，若多画太多干扰线条，机器人识别率下降的同时，人眼的识别率也同步下降（震惊哭）。更为重要的是，gdi+绘制的验证码一般来说也不会很美观，如果做一个炫酷的登陆界面却配了这样一个验证码，画风诡异，丑到极致。

      再后来浏览网页的过程中，发现很多很多网站项目中都使用了一种叫极验验证的验证码，采用移动滑块的方式进行验证，方便美观。而一番搜索之后了解到，官方提供的免费版也足以应付我手头的大多数项目了，不禁想把在mvc学习过程中试着使用极验验证来作为登录的验证码。

      极验官方提供了c#的sdk和demo供开发者参考，不过是webform版本的，可读性不是很高，而现在使用webform进行网站开发的也基本消失了，我将在官方webform代码的基础上，将其用在asp.net mvc程序中。

注册极验

到极验官网注册账号之后进入后台管理界面，点击添加验证

添加后我们可以得到id和key

完成验证逻辑

1. 首先我们需要引入官方的geetestlib类

using system;
using system.collections;
using system.collections.generic;
using system.linq;
using system.text;
using system.security.cryptography;
using system.net;
using system.io;

namespace pms.webapp.models
{
 /// <summary>
 /// geetestlib 极验验证c# sdk基本库
 /// </summary>
 public class geetestlib
 {
  /// <summary>
  /// sdk版本号
  /// </summary>
  public const string version = "3.2.0";
  /// <summary>
  /// sdk开发语言
  /// </summary>
  public const string sdklang = "csharp";
  /// <summary>
  /// 极验验证api url
  /// </summary>
  protected const string apiurl = "http://api.geetest.com";
  /// <summary>
  /// register url
  /// </summary>
  protected const string registerurl = "/register.php";
  /// <summary>
  /// validate url
  /// </summary>
  protected const string validateurl = "/validate.php";
  /// <summary>
  /// 极验验证api服务状态session key
  /// </summary>
  public const string gtserverstatussessionkey = "gt_server_status";
  /// <summary>
  /// 极验验证二次验证表单数据 chllenge
  /// </summary>
  public const string fngeetestchallenge = "geetest_challenge";
  /// <summary>
  /// 极验验证二次验证表单数据 validate
  /// </summary>
  public const string fngeetestvalidate = "geetest_validate";
  /// <summary>
  /// 极验验证二次验证表单数据 seccode
  /// </summary>
  public const string fngeetestseccode = "geetest_seccode";
  private string userid = "";
  private string responsestr = "";
  private string captchaid = "";
  private string privatekey = "";

  /// <summary>
  /// 验证成功结果字符串
  /// </summary>
  public const int successresult = 1;
  /// <summary>
  /// 证结失败验果字符串
  /// </summary>
  public const int failresult = 0;
  /// <summary>
  /// 判定为机器人结果字符串
  /// </summary>
  public const string forbiddenresult = "forbidden";

  /// <summary>
  /// geetestlib构造函数
  /// </summary>
  /// <param name="publickey">极验验证公钥</param>
  /// <param name="privatekey">极验验证私钥</param>
  public geetestlib(string publickey, string privatekey)
  {
   this.privatekey = privatekey;
   this.captchaid = publickey;
  }
  private int getrandomnum()
  {
   random rand =new random();
   int randres = rand.next(100);
   return randres;
  }

  /// <summary>
  /// 验证初始化预处理
  /// </summary>
  /// <returns>初始化结果</returns>
  public byte preprocess()
  {
   if (this.captchaid == null)
   {
    console.writeline("publickey is null!");
   }
   else
   {
    string challenge = this.registerchallenge();
    if (challenge.length == 32)
    {
     this.getsuccesspreprocessres(challenge);
     return 1;
    }
    else
    {
     this.getfailpreprocessres();
     console.writeline("server regist challenge failed!");
    }
   }

   return 0;

  }
  public byte preprocess(string userid)
  {
   if (this.captchaid == null)
   {
    console.writeline("publickey is null!");
   }
   else
   {
    this.userid = userid;
    string challenge = this.registerchallenge();
    if (challenge.length == 32)
    {
     this.getsuccesspreprocessres(challenge);
     return 1;
    }
    else
    {
     this.getfailpreprocessres();
     console.writeline("server regist challenge failed!");
    }
   }

   return 0;

  }
  public string getresponsestr()
  {
   return this.responsestr;
  }
  /// <summary>
  /// 预处理失败后的返回格式串
  /// </summary>
  private void getfailpreprocessres()
  {
   int rand1 = this.getrandomnum();
   int rand2 = this.getrandomnum();
   string md5str1 = this.md5encode(rand1 + "");
   string md5str2 = this.md5encode(rand2 + "");
   string challenge = md5str1 + md5str2.substring(0, 2);
   this.responsestr = "{" + string.format(
     "\"success\":{0},\"gt\":\"{1}\",\"challenge\":\"{2}\"", 0,
    this.captchaid, challenge) + "}";
  }
  /// <summary>
  /// 预处理成功后的标准串
  /// </summary>
  private void getsuccesspreprocessres(string challenge)
  {
   challenge = this.md5encode(challenge + this.privatekey);
   this.responsestr ="{" + string.format(
    "\"success\":{0},\"gt\":\"{1}\",\"challenge\":\"{2}\"", 1, 
    this.captchaid, challenge) + "}";
  }
  /// <summary>
  /// failback模式的验证方式
  /// </summary>
  /// <param name="challenge">failback模式下用于与validate一起解码答案， 判断验证是否正确</param>
  /// <param name="validate">failback模式下用于与challenge一起解码答案， 判断验证是否正确</param>
  /// <param name="seccode">failback模式下，其实是个没用的参数</param>
  /// <returns>验证结果</returns>
  public int failbackvalidaterequest(string challenge, string validate, string seccode)
  {
   if (!this.requestislegal(challenge, validate, seccode)) return geetestlib.failresult;
   string[] validatestr = validate.split('_');
   string encodeans = validatestr[0];
   string encodefullbgimgindex = validatestr[1];
   string encodeimggrpindex = validatestr[2];
   int decodeans = this.decoderesponse(challenge, encodeans);
   int decodefullbgimgindex = this.decoderesponse(challenge, encodefullbgimgindex);
   int decodeimggrpindex = this.decoderesponse(challenge, encodeimggrpindex);
   int validateresult = this.validatefailimage(decodeans, decodefullbgimgindex, decodeimggrpindex);
   return validateresult;
  }
  private int validatefailimage(int ans, int full_bg_index, int img_grp_index)
  {
   const int thread = 3;
   string full_bg_name = this.md5encode(full_bg_index + "").substring(0, 10);
   string bg_name = md5encode(img_grp_index + "").substring(10, 10);
   string answer_decode = "";
   for (int i = 0;i < 9; i++)
   {
    if (i % 2 == 0) answer_decode += full_bg_name.elementat(i);
    else if (i % 2 == 1) answer_decode += bg_name.elementat(i);
   }
   string x_decode = answer_decode.substring(4);
   int x_int = convert.toint32(x_decode, 16);
   int result = x_int % 200;
   if (result < 40) result = 40;
   if (math.abs(ans - result) < thread) return geetestlib.successresult;
   else return geetestlib.failresult;
  }
  private boolean requestislegal(string challenge, string validate, string seccode)
  {
   if (challenge.equals(string.empty) || validate.equals(string.empty) || seccode.equals(string.empty)) return false;
   return true;
  }

  /// <summary>
  /// 向gt-server进行二次验证
  /// </summary>
  /// <param name="challenge">本次验证会话的唯一标识</param>
  /// <param name="validate">拖动完成后server端返回的验证结果标识字符串</param>
  /// <param name="seccode">验证结果的校验码，如果gt-server返回的不与这个值相等则表明验证失败</param>
  /// <returns>二次验证结果</returns>
  public int enhencedvalidaterequest(string challenge, string validate, string seccode)
  {
   if (!this.requestislegal(challenge, validate, seccode)) return geetestlib.failresult;
   if (validate.length > 0 && checkresultbyprivate(challenge, validate))
   {
    string query = "seccode=" + seccode + "&sdk=csharp_" + geetestlib.version;
    string response = "";
    try
    {
     response = postvalidate(query);
    }
    catch (exception e)
    {
     console.writeline(e);
    }
    if (response.equals(md5encode(seccode)))
    {
     return geetestlib.successresult;
    }
   }
   return geetestlib.failresult;
  }
  public int enhencedvalidaterequest(string challenge, string validate, string seccode, string userid)
  {
   if (!this.requestislegal(challenge, validate, seccode)) return geetestlib.failresult;
   if (validate.length > 0 && checkresultbyprivate(challenge, validate))
   {
    string query = "seccode=" + seccode + "&user_id=" + userid + "&sdk=csharp_" + geetestlib.version;
    string response = "";
    try
    {
     response = postvalidate(query);
    }
    catch (exception e)
    {
     console.writeline(e);
    }
    if (response.equals(md5encode(seccode)))
    {
     return geetestlib.successresult;
    }
   }
   return geetestlib.failresult;
  }
  private string readcontentfromget(string url)
  {
   try
   {
    httpwebrequest request = (httpwebrequest)webrequest.create(url);
    request.timeout = 20000;
    httpwebresponse response = (httpwebresponse)request.getresponse();
    stream myresponsestream = response.getresponsestream();
    streamreader mystreamreader = new streamreader(myresponsestream, encoding.getencoding("utf-8"));
    string retstring = mystreamreader.readtoend();
    mystreamreader.close();
    myresponsestream.close();
    return retstring;
   }
   catch
   {
    return "";  
   }

  }
  private string registerchallenge()
  {
   string url = "";
   if (string.empty.equals(this.userid))
   {
    url = string.format("{0}{1}?gt={2}", geetestlib.apiurl, geetestlib.registerurl, this.captchaid);
   }
   else
   {
    url = string.format("{0}{1}?gt={2}&user_id={3}", geetestlib.apiurl, geetestlib.registerurl, this.captchaid, this.userid);
   }
   string retstring = this.readcontentfromget(url);
   return retstring;
  }
  private boolean checkresultbyprivate(string origin, string validate)
  {
   string encodestr = md5encode(privatekey + "geetest" + origin);
   return validate.equals(encodestr);
  }
  private string postvalidate(string data)
  {
   string url = string.format("{0}{1}", geetestlib.apiurl, geetestlib.validateurl);
   httpwebrequest request = (httpwebrequest)webrequest.create(url);
   request.method = "post";
   request.contenttype = "application/x-www-form-urlencoded";
   request.contentlength = encoding.utf8.getbytecount(data);
   // 发送数据
   stream myrequeststream = request.getrequeststream();
   byte[] requestbytes = system.text.encoding.ascii.getbytes(data);
   myrequeststream.write(requestbytes, 0, requestbytes.length);
   myrequeststream.close();

   httpwebresponse response = (httpwebresponse)request.getresponse();
   // 读取返回信息
   stream myresponsestream = response.getresponsestream();
   streamreader mystreamreader = new streamreader(myresponsestream, encoding.getencoding("utf-8"));
   string retstring = mystreamreader.readtoend();
   mystreamreader.close();
   myresponsestream.close();

   return retstring;

  }
  private int decoderandbase(string challenge)
  {
   string basestr = challenge.substring(32, 2);
   list<int> templist = new list<int>();
   for(int i = 0; i < basestr.length; i++)
   {
    int tempascii = (int)basestr[i];
    templist.add((tempascii > 57) ? (tempascii - 87)
     : (tempascii - 48));
   }
   int result = templist.elementat(0) * 36 + templist.elementat(1);
   return result;
  }
  private int decoderesponse(string challenge, string str)
  {
   if (str.length>100) return 0;
   int[] shuzi = new int[] { 1, 2, 5, 10, 50};
   string chongfu = "";
   hashtable key = new hashtable();
   int count = 0;
   for (int i=0;i<challenge.length;i++)
   {
    string item = challenge.elementat(i) + "";
    if (chongfu.contains(item)) continue;
    else
    {
     int value = shuzi[count % 5];
     chongfu += item;
     count++;
     key.add(item, value);
    }
   }
   int res = 0;
   for (int i = 0; i < str.length; i++) res += (int)key[str[i]+""];
   res = res - this.decoderandbase(challenge);
   return res;
  }
  private string md5encode(string plaintext)
  {
   md5cryptoserviceprovider md5 = new md5cryptoserviceprovider();
   string t2 = bitconverter.tostring(md5.computehash(utf8encoding.default.getbytes(plaintext)));
   t2 = t2.replace("-", "");
   t2 = t2.tolower();
   return t2;
  }

 }
}

2. 获取验证码

引入jquery库

<script src="~/content/plugins/jquery/jquery-1.8.2.min.js"></script>

添加用于放置验证码的div（需要放到form表单中）

<div id="geetest-container">

</div>
添加js代码用于获取验证码

<script>
 window.addeventlistener('load', processgeetest);

 function processgeetest() {
  $.ajax({
   // 获取id，challenge，success（是否启用failback）
   url: "/login/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>

processgeetest方法中我们异步请求的地址“/login/geektest”就是获取验证码是后台需要执行的方法

public actionresult geektest()
{
 return content(getcaptcha(),"application/json");
}

private string getcaptcha()
{
 var geetest = new geetestlib("3594e0d834df77cedc7351a02b5b06a4", "b961c8081ce88af7e32a3f45d00dff84");
 var gtserverstatus = geetest.preprocess();
 session[geetestlib.gtserverstatussessionkey] = gtserverstatus;
 return geetest.getresponsestr();
}

3. 校验验证码

注意，当提交form表单时，会将三个和极验有关的参数传到后台方法（geetest_challenge、geetest_validate、geetest_seccode），若验证码未验证成功，则参数为空值。

后台验证方法为：

private bool checkgeetestresult()
{
 var geetest = new geetestlib("3594e0d834df77cedc7351a02b5b06a4", "b961c8081ce88af7e32a3f45d00dff84 ");
 var gtserverstatuscode = (byte)session[geetestlib.gtserverstatussessionkey];
 var userid = (string)session["userid"];

 var challenge = request.form.get(geetestlib.fngeetestchallenge);
 var validate = request.form.get(geetestlib.fngeetestvalidate);
 var seccode = request.form.get(geetestlib.fngeetestseccode);
 var result = gtserverstatuscode == 1 ? geetest.enhencedvalidaterequest(challenge, validate, seccode, userid) : geetest.failbackvalidaterequest(challenge, validate, seccode);
 return result == 1;
}

我们可以在表单中判断验证码是否成功校验：

public actionresult login()
{
 if (!checkgeetestresult())
  return content("no:请先完成验证操作。");
 ....
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。