MVC如何使用極驗(yàn)驗(yàn)證制作登錄驗(yàn)證碼

這篇文章主要介紹了MVC如何使用極驗(yàn)驗(yàn)證制作登錄驗(yàn)證碼，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

       在之前的項(xiàng)目中，如果有需要使用驗(yàn)證碼，基本都是自己用GDI+畫圖出來，簡(jiǎn)單好用，但是卻也存在了一些小問題，首先若較少干擾線，則安全性不是很高，驗(yàn)證碼容易被機(jī)器識(shí)別，若多畫太多干擾線條，機(jī)器人識(shí)別率下降的同時(shí)，人眼的識(shí)別率也同步下降（震驚哭）。更為重要的是，GDI+繪制的驗(yàn)證碼一般來說也不會(huì)很美觀，如果做一個(gè)炫酷的登陸界面卻配了這樣一個(gè)驗(yàn)證碼，畫風(fēng)詭異，丑到極致。

      再后來瀏覽網(wǎng)頁的過程中，發(fā)現(xiàn)很多很多網(wǎng)站項(xiàng)目中都使用了一種叫極驗(yàn)驗(yàn)證的驗(yàn)證碼，采用移動(dòng)滑塊的方式進(jìn)行驗(yàn)證，方便美觀。而一番搜索之后了解到，官方提供的免費(fèi)版也足以應(yīng)付我手頭的大多數(shù)項(xiàng)目了，不禁想把在MVC學(xué)習(xí)過程中試著使用極驗(yàn)驗(yàn)證來作為登錄的驗(yàn)證碼。

      極驗(yàn)官方提供了C#的SDK和Demo供開發(fā)者參考，不過是Webform版本的，可讀性不是很高，而現(xiàn)在使用Webform進(jìn)行網(wǎng)站開發(fā)的也基本消失了，我將在官方Webform代碼的基礎(chǔ)上，將其用在ASP.NET MVC程序中。

注冊(cè)極驗(yàn)

到極驗(yàn)官網(wǎng)注冊(cè)賬號(hào)之后進(jìn)入后臺(tái)管理界面，點(diǎn)擊添加驗(yàn)證

添加后我們可以得到ID和KEY

完成驗(yàn)證邏輯

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 極驗(yàn)驗(yàn)證C# SDK基本庫(kù)
 /// </summary>
 public class GeetestLib
 {
  /// <summary>
  /// SDK版本號(hào)
  /// </summary>
  public const String version = "3.2.0";
  /// <summary>
  /// SDK開發(fā)語言
  /// </summary>
  public const String sdkLang = "csharp";
  /// <summary>
  /// 極驗(yàn)驗(yàn)證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>
  /// 極驗(yàn)驗(yàn)證API服務(wù)狀態(tài)Session Key
  /// </summary>
  public const String gtServerStatusSessionKey = "gt_server_status";
  /// <summary>
  /// 極驗(yàn)驗(yàn)證二次驗(yàn)證表單數(shù)據(jù) Chllenge
  /// </summary>
  public const String fnGeetestChallenge = "geetest_challenge";
  /// <summary>
  /// 極驗(yàn)驗(yàn)證二次驗(yàn)證表單數(shù)據(jù) Validate
  /// </summary>
  public const String fnGeetestValidate = "geetest_validate";
  /// <summary>
  /// 極驗(yàn)驗(yàn)證二次驗(yàn)證表單數(shù)據(jù) Seccode
  /// </summary>
  public const String fnGeetestSeccode = "geetest_seccode";
  private String userID = "";
  private String responseStr = "";
  private String captchaID = "";
  private String privateKey = "";

  /// <summary>
  /// 驗(yàn)證成功結(jié)果字符串
  /// </summary>
  public const int successResult = 1;
  /// <summary>
  /// 證結(jié)失敗驗(yàn)果字符串
  /// </summary>
  public const int failResult = 0;
  /// <summary>
  /// 判定為機(jī)器人結(jié)果字符串
  /// </summary>
  public const String forbiddenResult = "forbidden";

  /// <summary>
  /// GeetestLib構(gòu)造函數(shù)
  /// </summary>
  /// <param name="publicKey">極驗(yàn)驗(yàn)證公鑰</param>
  /// <param name="privateKey">極驗(yàn)驗(yàn)證私鑰</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>
  /// 驗(yàn)證初始化預(yù)處理
  /// </summary>
  /// <returns>初始化結(jié)果</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>
  /// 預(yù)處理失敗后的返回格式串
  /// </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>
  /// 預(yù)處理成功后的標(biāo)準(zhǔn)串
  /// </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模式的驗(yàn)證方式
  /// </summary>
  /// <param name="challenge">failback模式下用于與validate一起解碼答案， 判斷驗(yàn)證是否正確</param>
  /// <param name="validate">failback模式下用于與challenge一起解碼答案， 判斷驗(yàn)證是否正確</param>
  /// <param name="seccode">failback模式下，其實(shí)是個(gè)沒用的參數(shù)</param>
  /// <returns>驗(yàn)證結(jié)果</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進(jìn)行二次驗(yàn)證
  /// </summary>
  /// <param name="challenge">本次驗(yàn)證會(huì)話的唯一標(biāo)識(shí)</param>
  /// <param name="validate">拖動(dòng)完成后server端返回的驗(yàn)證結(jié)果標(biāo)識(shí)字符串</param>
  /// <param name="seccode">驗(yàn)證結(jié)果的校驗(yàn)碼，如果gt-server返回的不與這個(gè)值相等則表明驗(yàn)證失敗</param>
  /// <returns>二次驗(yàn)證結(jié)果</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);
   // 發(fā)送數(shù)據(jù)
   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. 獲取驗(yàn)證碼

引入Jquery庫(kù)

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

添加用于放置驗(yàn)證碼的div（需要放到form表單中）

<div id="geetest-container">

</div>
添加JS代碼用于獲取驗(yàn)證碼

<script>
 window.addEventListener('load', processGeeTest);

 function processGeeTest() {
  $.ajax({
   // 獲取id，challenge，success（是否啟用failback）
   url: "/Login/GeekTest",
   type: "get",
   dataType: "json", // 使用jsonp格式
   success: function (data) {
    // 使用initGeetest接口
    // 參數(shù)1：配置參數(shù)，與創(chuàng)建Geetest實(shí)例時(shí)接受的參數(shù)一致
    // 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象，之后可以使用它做appendTo之類的事件
    initGeetest({
     gt: data.gt,
     challenge: data.challenge,
     product: "float", // 產(chǎn)品形式
     offline: !data.success
    },
     handler);
   }
  });
 }

 var handler = function (captchaObj) {
  // 將驗(yàn)證碼加到id為captcha的元素里
  captchaObj.appendTo("#geetest-container");

  captchaObj.onSuccess = function (e) {
   console.log(e);
  }

 };
</script>

processGeeTest方法中我們異步請(qǐng)求的地址“/Login/GeekTest”就是獲取驗(yàn)證碼是后臺(tái)需要執(zhí)行的方法

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. 校驗(yàn)驗(yàn)證碼

注意，當(dāng)提交form表單時(shí)，會(huì)將三個(gè)和極驗(yàn)有關(guān)的參數(shù)傳到后臺(tái)方法（geetest_challenge、geetest_validate、geetest_seccode），若驗(yàn)證碼未驗(yàn)證成功，則參數(shù)為空值。

后臺(tái)驗(yàn)證方法為：

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;
}

我們可以在表單中判斷驗(yàn)證碼是否成功校驗(yàn)：

public ActionResult Login()
{
 if (!CheckGeeTestResult())
  return Content("no:請(qǐng)先完成驗(yàn)證操作。");
 ....
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“MVC如何使用極驗(yàn)驗(yàn)證制作登錄驗(yàn)證碼”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!