Mã nguồn ví dụ xác thực BotDetect ASP CAPTCHA

Ví dụ xác thực BotDetect ASP CAPTCHA chứa mã nguồn tối thiểu cần thiết để hiển thị CAPTCHA trên trang ASP và xác thực câu trả lời của người dùng, cho phép người dùng truy cập vào trang được bảo vệ chỉ khi việc xác thực thành công.

Bạn có thể bắt đầu từ ví dụ này nếu bạn lần đầu sử dụng BotDetect, và nó tương đương với kết quả bạn đạt được khi bạn làm theo hướng dẫn tại Hướng dẫn sử dụng BotDetect CAPTCHA để bảo vệ trang ASP.

Vị trí lưu dự án mẫu

Mặc định, ví dụ mẫu này được cài đặt tại thư mục
c:\Program Files\Lanapsoft\BotDetect\ASP\v2.0\Samples\CaptchaValidation\.

Bạn có thể chạy từ Start Menu:
Programs > Lanapsoft > BotDetect > ASP > v2.0 > Samples > CAPTCHA Validation Sample.

[lên đầu trang]

BotDetectFormDemo.asp

Mã nguồn đầy đủ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>BotDetect CAPTCHA ASP Form Demo - Input Page</title>
    <link type='text/css' rel='Stylesheet' href="FormStyle.css" />
    <script type="text/javascript" src="BotDetectScript.js"></script>
  </head>
  <body>
    <form name="SampleForm" id="SampleForm" method="post" 
      action="ProcessForm.asp">
    <fieldset id="SampleFields">
      <legend>Sample input form</legend>
      <div class="input">
        <label for="FirstName">First Name:</label>
        <input name="FirstName" id="FirstName" type="text" 
          class="textbox" value="<%=Request("FirstName") %>" />
      </div>
      <div class="input">
        <label for="LastName">Last Name:</label>
        <input name="LastName" type="text"  id="LastName" 
          class="textbox" value="<%= Request("LastName") %>" />
      </div>
    </fieldset>
    <fieldset id="CaptchaValidation">
      <legend>CAPTCHA Validation</legend>
      <div id="PromptDiv">Retype the code from the picture</div>
      <div id="CaptchaDiv">
        <div id="CaptchaImage">
          <img id="SampleForm_CaptchaImage" src="
            LanapBotDetectHandler.asp?Command=CreateImage&
            TextStyle=4&ImageWidth=238&imageHeight=50&
            CodeLength=5&CodeType=0" alt='CAPTCHA Code Image' />
        </div>
        <div id="CaptchaIcons">
          <a href="LanapBotDetectHandler.asp?Command=CreateSound" 
            onclick='LBD_LoadSound("SampleForm_SoundPlaceholder", 
            "LanapBotDetectHandler.asp?Command=CreateSound");
            return false;' title="Speak the code"><img src="
            speaker.gif" alt="Speak the code" /></a>
          <a href="#" onclick='LBD_ReloadImage(
            "SampleForm_CaptchaImage"); return false;' title="
            Change the code"><img src="reload.gif" alt="Change the 
            code" /></a>
          <div id='SampleForm_SoundPlaceholder' 
            class="placeholder">&nbsp;</div>
        </div>
      </div>
      <div class="input">
        <label for="CaptchaCode">Code:</label>
        <input name="CaptchaCode" id="CaptchaCode" type="text" 
          class="textbox" onkeyup="this.value = 
          this.value.toLowerCase();" />
      </div>
      <%
      If (Request("WrongCode")<>"") Then
        Response.Write("<div><span id='CodeIncorrectLabel'>
          Incorrect code</span></div>")
      End If
      %>
      </fieldset>
      <div id="ActionDiv">
        <input type="submit" name="ProcessForm" value="Process Form" 
          id="ProcessForm" />
      </div>
      <div id="Note">
        <span>NOTE: the Trial version will use "LANAP" instead of a 
          random code in 50% of CAPTCHA images.</span>
      </div>
    </form>
  </body>
</html>

Giải thích

Nhiều thẻ Html được sử dụng để sử dụng BotDetect CAPTCHA bảo vệ trang ASP của bạn:

  • Trong phần <head> của tài liệu, chúng tôi bao gồm stylesheet, để định nghĩa cách hiển thị của CAPTCHA (FormStyle.css), và file JavaScript bao gồm các hàm trợ giúp cho việc phát âm thanh CAPTCHA và tải lại hình ảnh CAPTCHA (BotDetectScript.js).
  • Chúng tôi bao gồm hình ảnh CAPTCHA trong thẻ <body> của trang nơi chúng ta muốn hiển thị nó, chỉ đường dẫn đến nguồn hình ảnh LanapBotDetectHandler.asp?Command=CreateImage, và truyền bất cứ thiết lập nào cho hình ảnh thông qua chuỗi truy vấn.
  • Bên cạnh hình ảnh CAPTCHA, chúng ta hiển thị hai biểu tượng cho phép người dùng phát âm thanh CAPTCHA nếu muốn, hoặc thay đổi hình ảnh CAPTCHA trong trường hợp không đọc được hình ảnh hiện tại. Hai biểu tượng này liên kết với các hàm trong JavaScript. Phát âm thanh trong JavaScript còn đòi hỏi phải có một placeholder trống <div>, nơi mà âm thanh <object>/<embed> sẽ được tạo ra khi click vào biểu tượng cái loa.
  • Hơn nữa, chú ý rằng âm thanh CAPTCHA thực thi lời gọi hàm JavaScript và bỏ qua đường dẫn nàylink (với return false;) – nếu người sử dụng không cho phép chạy JavaScript hay sử dụng trình duyệt không hỗ trợ nó, biểu tượng cái loa sẽ giống như đường dẫn bình thường và mở ra hộp thoại cho phép người sử dụng tải file âm thanh về máy sau đó có thể phát với bất cứ ứng dụng nào dùng để phát file .wav trên máy của họ.
  • Có thêm một đoạn mã JavaScript liên quan đến sự kiện onkeyup của ô nhập ký tự CAPTCHA, sẽ tự động đổi tất cả các ký tự khi người dùng nhập. Chức năng này không quá cần thiết với CAPTCHA, nhưng nó là giải pháp tốt để thông báo với người sử dụng là ký tự CAPTCHA không phân biệt chữ hoa hay thường. Vì rằng phải trả lời CAPTCHA làm người sử dụng cảm thấy rắc rối, nên chúng ta cần tìm nhiều cách có thể để làm cho việc sử dụng CAPTCHA được dễ dàng nhằm giảm thiểu những ảnh hưởng của CAPTCHA lên người sủ dụng.
  • Trang ví dụ còn chứa một vài trường nhập liệu khác bên cạnh CAPTCHA, đơn giản là để trình bày cách xử lý dữ liệu người dùng nhập vào nếu họ trả lời đúng CAPTCHA, và cách lưu giá trị người dùng đã nhập nhưng trả lời sai CAPTCHA.

[lên đầu trang]

ProcessForm.asp

Mã nguồn đầy đủ

<%
  'Captcha validation
  Dim result, codeKey, inputCode
  result = False
  codeKey = "LanapBotDetectCode"
  inputCode = Request("CaptchaCode")

  If (Session(codeKey)<>"") Then
    code = Session(codeKey)
    result = (0 = StrComp(inputCode, code, 1))
    'each Captcha code can only be validated once
    Session(codeKey) = ""
  End If

  If result = False Then
    first_name = Request("FirstName")
    last_name = Request("LastName")
    redirect_url = "BotDetectFormDemo.asp?FirstName=" + _
      first_name + "&LastName=" + last_name + "&WrongCode=WrongCode"
    Response.Redirect redirect_url
  End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>BotDetect CAPTCHA ASP Form Demo - Protected Page</title>
  <link type='text/css' rel='Stylesheet' href="FormStyle.css" />
</head>
<body>
  <form name="form1" method="post" id="form1" 
    action="ProcessForm.asp">
    <fieldset id="Properties">
      <legend>BotDetect CAPTCHA validation passed!</legend>
      <div class="input">
        <label for="FirstName">First Name:</label>
        <input name="FirstName" id="FirstName" type="text" 
          class="textbox" readonly="readonly" 
          value="<% =Request("FirstName") %>" />
      </div>
      <div class="input">
        <label for="LastName">Last Name:</label>
        <input name="LastName" id="LastName" type="text" 
          class="textbox" readonly="readonly" 
          value="<% =Request("LastName") %>" />
      </div>
    </fieldset>
    <div id="ActionDiv">
      <a href="BotDetectFormDemo.asp">Back to the sample form</a>
    </div>
  </form>
</body>
</html>

Giải thích

Khi người sử dụng điền thông tin và gửi đi, script này dùng để xử lý dữ liệu được nhập. Ngay phần bắt đầu của file, chúng ta xác thực CAPTCHA, so sánh câu trả lời của người dùng với giá trị lưu trong trạng thái Session. Nếu ký tự CAPTCHA không đúng, chúng ta chuyển người dùng quay trở lại trang nhập liệu. Để đơn giản, các giá trị của các trường khác ngoài CAPTCHA được lưu trong câu truy vấn. Vài điều cần chú ý về đoạn mã xác thực CAPTCHA này:

  • Luôn luôn xóa ký tự CAPTCHA được lưu trong trạng thái Session sau khi xác thực, bất kể xác thực thành công hay không. Hình ảnh CAPTCHA không để lưu lại hay dùng lại, và mỗi lần tải phải sử dụng ký tự CAPTCHA khác nhau. Nếu người sử dụng trả lời đúng CAPTCHA nhưng bạn phải trả họ về trang nhập liệu vì một trong những trường khác bị nhập sai, nhớ rằng người sử dụng đã trả lời đúng CAPTCHA và không nên hiển thị nó nữa. Có thể dễ dàng thực hiện việc này bằng cách dùng cờ (Session("IsHumanUser") = True) và kiểm tra cờ trước khi hiển thị CAPTCHA.
  • Vì ký tự CAPTCHA đúng được lưu trong trạng thái Session, bạn phải chắc chắn rằng trạng thái ASP Session được cho phép và hoạt động đúng trên ứng dụng ASP của bạn. Trạng thái ASP Session luôn luôn được lưu trong bộ nhớ tiến trình của IIS (có nghĩa rằng nó không thể được chia sẽ giữa các tiến trình háy các máy chủ, ví dụ trên web garden hay web farm), và cookie-based.
  • Trong ví dụ này, chỉ có một trang được bảo vệ bởi CAPTCHA, trang mà không thể được truy cập nếu chưa trả lời đúng CAPTCHA. Nếu bạn có một loạt các trang theo sau trang nhập liệu, và bạn muốn chúng được bảo vệ bởi cùng một CAPTCHA, bạn nên dùng cờ sau khi việc xác thực CAPTCHA thành công (Session("IsHumanUser") = True) và kiểm tra trên mỗi trang sau đó. Nếu không, bot có thể truy cập nó bằng cách dùng Url trực tiếp.
  • Người dùng với trình duyệt không cho phép cookies hoặc không hỗ trợ cookie sẽ luôn luôn có trạng thái Session trống, có nghĩa là họ sẽ không bao giờ trả lời đúng CAPTCHA, cho dù họ nhập đúng ký tự được hiển thị trên hình ảnh CAPTCHA. Nếu hầu hết người dùng của bạn không cho phép cookies, bạn phải tìm cách khác không dùng cookie để thay thế. Trong khi điều này ngăn chặn bot, nó cúng chặn một số bot hữu ích (ví dụ như Googlebot). Nhớ rằng mọi trang đằng sau sự bảo vệ của CAPTCHA sẽ không bao giờ được truy cập, nếu CAPTCHA được sử dụng đúng.
  • Mã nguồn xác thực CAPTCHA này giả định rằng bạn chỉ dùng CAPTCHA trên một trang trong ứng dụng ASP, vì nó sử dụng một khoá đơn của trạng thái Session để lưu ký tự CAPTCHA (Session("LanapBotDetectCode")). Nếu bạn dùng nhiều CAPTCHA trên nhiều trang của cùng một ứng dụng, bạn phải đặt tên khác nhau (ví dụ "Registration" và "Comment"), và nối tên đó vào khoá trạng thái của Session trong mã xác thực, như tất cả các chuỗi truy vấn trong LanapBotDetectHandler.asp (ví dụ LanapBotDetectHandler.asp?Command=CreateImage&CaptchaId=Registration). Điều này là cần thiết để ngăn các CAPTCHAs khác nhau ghi đè lên nhau khi chúng cùng được mở cùng một lúc (trên nhiều tabs của cùng một trình duyệt).

[lên đầu trang]

LanapBotDetectHandler.asp

Mã nguồn đầy đủ

<%
Dim code, codeKey, codeHash, codeHashKey, captchaId, comCaptcha, _ 
  index, appCodeKey, captchaSessionIdKey

'the Captcha code is kept in Session state with this key
codeKey = "LanapBotDetectCode"
codeHashKey = "LanapBotDetectCodeHash"
captchaSessionIdKey = "LanapBotDetectID"

Function createGuid()
  Set TypeLib = Server.CreateObject("Scriptlet.TypeLib")
  tg = TypeLib.Guid
  guid = Left(tg, len(tg)-2)
  set regEx = New RegExp
  regEx.IgnoreCase = False
  regEx.Global = True
  regEx.Pattern = "[{}-]"
  createGuid = regEx.Replace(guid, "")
  Set TypeLib = Nothing
End Function

Function getCaptchaSessionID()
  Dim captchaSessionID
  If (Session(captchaSessionIdKey) <> "") Then
    captchaSessionID = Session(captchaSessionIdKey)
  Else
    captchaSessionID = createGuid()
    Session(captchaSessionIdKey) = captchaSessionID
  End If
  getCaptchaSessionID = captchaSessionID
End Function

'if there are multiple Captchas on tn the site, a Captcha id is 
'required to distinguish between them; otherwise, it can be ignored
captchaId = Request("CaptchaId")
If(captchaId<>"") Then
  codeKey = codeKey & "_" & captchaId
End If

If (Request("Command")="CreateImage") Then
'Captcha image generation

  'create the Captcha component instance
  Set comCaptcha = CreateObject("Lanap.BotDetect")

  'process Captcha properties
  If (Request("TextStyle")<>"") Then 'set Captcha algorithm
    On Error Resume Next
    comCaptcha.TextStyle = CLng(Request("TextStyle"))
    Err.Clear
  End If
  If (Request("ImageWidth")<>"") Then  'set Captcha image width
    On Error Resume Next
    comCaptcha.ImageWidth = CLng(Request("ImageWidth"))
    Err.Clear
  End If
  If (Request("ImageHeight")<>"") Then  'set Captcha image height
    On Error Resume Next
    comCaptcha.ImageHeight = CLng(Request("ImageHeight"))
    Err.Clear
  End If
  If (Request("CodeLength")<>"") Then  'set Captcha code length
    On Error Resume Next
    comCaptcha.CodeLength = CLng(Request("CodeLength"))
    Err.Clear
  End If
  If (Request("CodeType")<>"") Then  'set Captcha code type
    On Error Resume Next
    comCaptcha.CodeType = CLng(Request("CodeType"))
    Err.Clear
  End If
  If (Request("Format")<>"") Then  'set Captcha image format
    On Error Resume Next
    comCaptcha.Format = Request("Format")
    Err.Clear
  End If

  'set Captcha image Http response headers
  Response.Buffer = True
  Response.CacheControl = "no-cache, no-store, must-revalidate"
  Response.AddHeader "Pragma", "no-cache"
  Response.Expires = -1
  If (comCaptcha.Format="JPEG") Then
    Response.ContentType = "image/jpeg"
  ElseIf (comCaptcha.Format="PNG") Then
    Response.ContentType = "image/png"
  ElseIf (comCaptcha.Format="GIF") Then
    Response.ContentType = "image/gif"
  ElseIf (comCaptcha.Format="BMP") Then
    Response.ContentType = "image/bmp"
  End If

  'generate the Captcha image binary data
  Dim varPicture
  varPicture = comCaptcha.CreateImage

  'save the Captcha code for sound generation and validation
  code = comCaptcha.GetValue
  Session(codeKey) = code
  'save the code hash for backward compatibility with older validation 
  'code
  codeHash = comCaptcha.GetHashValue
  Session(codeHashKey) = codeHash

  'Chrome workaround
  index = InStr(Request.ServerVariables("HTTP_USER_AGENT"), "Chrome")
  If (index > 0) Then
    appCodeKey = getCaptchaSessionID() & codeKey
    Application.Lock
    Application(appCodeKey) = code
    Application.UnLock
    Response.Cookies(captchaSessionIdKey) = getCaptchaSessionID()
    Response.Cookies(captchaSessionIdKey).Expires = DateAdd("H", 1, Now)
    Response.Cookies(captchaSessionIdKey).Path = "/"
  End If

  'send Captcha image binary data to the client
  Response.BinaryWrite varPicture
  Set comCaptcha = Nothing  'dispose of the Captcha component instance
  Response.End
'end Captcha image generation

ElseIf (Request("Command")="CreateSound") Then
'audio Captcha generation

  'create the Captcha component instance
  Set comCaptcha = CreateObject("Lanap.BotDetect")

  'set Http response headers
  If ((Request.ServerVariables("HTTPS")="off") Or Request("e")="") Then
    Response.CacheControl = "no-cache"
    Response.AddHeader "Pragma", "no-cache"
    Response.Expires = -1
  End If
  Response.Buffer = True
  Response.ContentType = "audio/x-wav"
  If (Request("d") = "") Then
  Response.AddHeader "content-disposition", _
    "attachment; filename=captcha.wav"
  End If
  Response.AddHeader "Content-Transfer-Encoding", "binary"
  Response.AddHeader "Connection", "Close"

  'generate the audio Captcha binary data from the saved code
  code = Session(codeKey)
  If (Request("s") <> "") Then  'Chrome workaround
    appCodeKey = Request("s") & codeKey
    code = Application(appCodeKey)
  End If
  varSound = comCaptcha.CreateSoundFromCode(code)

  'send audio Captcha binary data to the client
  Response.BinaryWrite varSound
  Set comCaptcha = Nothing 'dispose of the Captcha component instance
  Response.End
'end audio Captcha generation

ElseIf (Request("Command")="Validate") Then
'Ajax Captcha validation

  Dim result
  result = False

  If (Session(codeKey)<>"") Then
    Dim inputCode
    inputCode = Request("Code")
    code = Session(codeKey)
    result = (0 = StrComp(inputCode, code, 1))
    'Ajax validation shouldn't remove the code if successful, so both 
    'client- and server-side validation can be performed and pass
    If (Not result) Then
      Session(codeKey) = ""
    End If
  End If

  'Http response headers
  Response.Buffer = True
  Response.ContentType = "text/javascript"
  Response.CacheControl = "no-cache, no-store, must-revalidate"
  Response.AddHeader "Pragma", "no-cache"
  Response.Expires = -1
  Response.AddHeader "Connection", "Close"

  'send the JSON validation result to the client
  Response.Write "{ 'result': " & LCase(CStr(result)) & " }"
  Response.End

'end Ajax Captcha validation
End If

'If neither of the above conditions was met
Response.Status = "400 Bad Request"
Response.End
%>

Giải thích

File này là thành phần chính để truy cập các chức năng của CAPTCHA từ trang web của bạn. Nó cung cấp giao tiếp Http đơn giản cho Lanap.BotDetect COM component chịu trách nhiệm sinh hình ảnh và âm thanh CAPTCHA. Tất cả các thuộc tính được truyền thông qua tham số của chuỗi truy vấn. File LanapBotDetectHandler.asp còn cung cấp kết quả xác thực CAPTCHA dưới định dạng JSON đơn giản, để Ajax có thể sử dụng.

Vì các yêu cầu khác nhau cho âm thanh và hình ảnh gửi tới máy khách, các tiêu đề Http khác nhau được sử dụng. Đặc biệt, Http của âm thanh CAPTCHA kiểm tra truy cập SSL để sửa lỗi trong Internet Explorer (nơi mà tiêu đề no-cache ngăn không cho trình duyệt phát âm thanh). Việc kiểm tra SSL được thực hiện trên cả máy khách và máy chủ, để đảm bảo tiêu đề đúng được gửi cho các trang thực thi offloading SSL.

Chú ý rằng mã CAPTCHA được sinh ra và lưu trong Session state trong suốt quá trình tạo hình ảnh CAPTCHA, điều này có nghĩa rằng mã CAPTCHA sẽ không tồn tại trước khi yêu cầu hình ảnh CAPTCHA được xử lý. Ví dụ, không thể truy cập được âm thanh CAPTCHA trước hình ảnh CAPTCHA.

Hơn nữa, để khắc phục vấn đề trên Google Chrome (Windows Media Player gửi sai trạng thái ASP Session cookie khi yêu cầu âm thanh), một bản copy của ký tự CAPTCHA được lưu trong Application state, với khoá duy nhất cho mỗi Session.

Vì mọi ứng dụng ASP (mọi thư mục ảo của IIS như một ứng dụng, với file Global.asa của riêng nó) có Session state của riêng nó, và nhiều ứng dụng ASP không thể chia sẽ nội dung của Session state, bạn không thể sử dụng lại LanapBotDetectHandler.asp giữa các ứng dụng ASP – mọi ứng dụng phải có một bản copy của file này. Bạn có thể dùng file này chung cho các thư mục ảo khác nhau của IIS, khi các thư mục này được cấu hình chạy trong cùng một ứng dụng ASP.

[lên đầu trang]

BotDetectScript.js

Mã nguồn đầy đủ

function LBD_LoadSound(soundPlaceholderId, soundLink) {
  if(document.getElementById) {
    var i = soundLink.indexOf('&d=');
    if (-1 != i) {
      soundLink = soundLink.substring(0, i);
    }
    soundLink = soundLink + '&d=' + LBD_GetTimestamp();
		
    if ( (-1 == soundLink.indexOf('&e=')) && 
         (document.location.protocol == "https:")) {
      soundLink = soundLink + '&e=1';
    }

    cid = LBD_GetCookie("LanapBotDetectID");
    if (cid) {
      soundLink = soundLink + '&s=' + cid;
    }

    var placeholder = document.getElementById(soundPlaceholderId);
    var objectSrc = "<object id='captchaSound' 
      classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' 
      height='0' width='0' style='width:0; height:0;'><param 
      name='AutoStart' value='1' /><param name='Volume' value='0' 
      /><param name='PlayCount' value='1' /><param name='FileName' 
      value='" + soundLink + "' /><embed id='captchaSoundEmbed' 
      src='"+ soundLink + "' autoplay='true' hidden='true' 
      volume='100' type='"+ LBD_GetMimeType() +"' 
      style='display:inline;' /></object>";

    placeholder.innerHTML = "";
    placeholder.innerHTML = objectSrc;
  }
}

function LBD_GetTimestamp() {
  var d = new Date();
  var t = d.getTime() + (d.getTimezoneOffset() * 60000);
  return t;
}

function LBD_GetMimeType() {
  var mimeType = "audio/x-wav";
  return mimeType;
}

var LBD_ImgId = null;
var LBD_Img = null;
var LBD_NewImg = null;
var LBD_Parent = null;
var LBD_ImagePrompt = null;

function LBD_ReloadImage(imgId) {
  if(imgId) {
    LBD_ImgId = imgId;
    LBD_Img = document.getElementById(LBD_ImgId);
    var src = LBD_Img.src;

    var i = src.indexOf('&d=');
    if (-1 != i) {
      src = src.substring(0, i);
    }
    var newSrc = src + '&d=' + LBD_GetTimestamp();

    LBD_NewImg = document.createElement('img');
    LBD_NewImg.onload = LBD_ShowImage;
    LBD_NewImg.id = LBD_Img.id;
    LBD_NewImg.alt = LBD_Img.alt;
    LBD_NewImg.src = newSrc;

    LBD_ImagePrompt = document.createElement('span');
    LBD_ImagePrompt.appendChild(document.createTextNode('loading...'));

    LBD_Parent = LBD_Img.parentNode;
    LBD_Parent.removeChild(LBD_Img);
    LBD_Parent.appendChild(LBD_ImagePrompt);
  }
}

function LBD_ShowImage() {
  if(LBD_NewImg && LBD_Parent && LBD_ImagePrompt) {
    LBD_Parent.removeChild(LBD_ImagePrompt);
    LBD_Parent.appendChild(LBD_NewImg);
  }
}

function LBD_GetCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1, c.length);
    }
    if (c.indexOf(nameEQ) == 0) {
      return c.substring(nameEQ.length, c.length);
    }
  }
  return null;
}

Giải thích

File JavaScript này chứa các hàm dể phát âm thanh CAPTCHA và tải lại hình ảnh CAPTCHA. Cả hai hàm này đều không bắt buộc, nhưng sử dụng nó để tăng tính dễ dàng sử dụng cho trang web.

Âm thanh CAPTCHA có thể được phát mà không cần dùng JavaScript (bằng cách tài về file âm thanh rồi phát với ứng dụng khác), nhưng hàm LBD_LoadSound cho phép phát âm thanh trực tiếp trên trình duyệt khi hình ảnh CAPTCHA đang đuợc hiển thị, sử dụng plug-in cho trình duyệt đó. Dĩ nhiên, người dùng phải có sound plug-in được cài đặt và cấu hình đúng. Hình ảnh CAPTCHA có thể được thay đổi bằng cách tải lại toàn bộ trang, nhưng sử dụng hàm LBD_ReloadImage để thay đổi nó làm tăng tính sử dụng cho người dùng.

Cả hai hàm sử dụng DOM để thêm các thẻ động. Để phát âm thanh CAPTCHA, chúng ta thêm thẻ <object> và thêm placeholder <div>. Một thẻ <embed> được đặt ở trong để tương thích với các trình duyệt khác nhau, cho dù nếu nó không được chấp nhận bởi chuẩn W3C. Khi tải lại hình ảnh CAPTCHA, chúng ta thay hình cũ bằng câu thông báo khi hình đang được tải, và hiển thị hình mới khi nó đã được tải xong.

Để tránh các rắc rối về bộ đệm và đảm bảo hình / âm thanh mới của CAPTCHA được tải từ máy chủ khi người sử dụng click vào biểu tượng tương ứng, chúng ta thêm biến thời gian vào yêu cầu (bằng mili giây) như là thông số thêm. Vài dòng thêm vào được sử dụng để kiểm tra giá trị thời gian cũ và thay thế chúng (ví dụ, khi người sử dụng click nút Reload nhiều lần).

Chuỗi truy vấn âm thanh CAPTCHA được thay đổi để bao gồm thông số đặc biệt được gửi khi trang được truy cập qua SSL (điều này là cần thiết để giải quyết vấn đề IE gặp phải khi sử dụng SSL offloading proxies). Thông số khác trong chuỗi truy vấn được thêm vào cho Google Chrome, chứa khoá trạng thái của Application sử dụng để thay thế cho Session.

[lên đầu trang]

FormStyle.css

Mã nguồn đầy đủ

body {
  background-color: #EEEEFF;
  font-family: Verdana, Arial;
  font-size: 0.9em;
}

fieldset {
  padding: 0 10px 10px 10px;
  margin: 11px;
  width: 300px;
  display: block;
}

div.input {
  margin: 7px 0;
}

legend {
  padding: 5px;
  color: #999999;
}

label {
  display: block;
  width: 85px;
  float: left;
  text-align: right;
  padding-right: 5px;
}

input.textbox {
  width: 170px;
}

input.textboxSmall {
  width: 40px;
}

#CodeIncorrectLabel {
  color: Red;
}

#CodeCorrectLabel {
  color: Green;
}

#Note {
  padding: 0;
  margin: 11px;
  margin-bottom: -7px;
  width: 320px;
  font-size: 0.8em;
  color: Red;
}

#PromptDiv {
  padding: 0;
  margin: 0;
  margin-bottom: 8px;
}

#ActionDiv {
  padding: 0 0 10px 10px;
  margin: 11px;
  margin-right: 0;
  width: 314px;
  text-align:right;
}

fieldset #ActionDiv{
  padding: 0;
  margin: 0;
  width: auto;
  text-align:right;
}

#CaptchaDiv {
  margin: 0;
  padding: 0;
  width:265px;
  height:50px;
  padding-bottom: 5px;
}

#CaptchaImage {
  float: left;
  margin: 0;
  padding: 0;
  width:240px;
  height:50px;
}

#CaptchaIcons {
  width: 22px;
  height: 50px;
  float: right;
  text-align: left;
  margin: 0;
  padding: 0;
}

#CaptchaIcons img {
  border: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 3px;
}

*html #CaptchaIcons img {
  margin-bottom: -2px;
}

.placeholder {
  visibility: hidden;
  width:0 !important;
  height:0 !important;
}

*html .placeholder {
  display: none !important;
}

#CaptchaPreviewDiv {
  margin: 0;
  padding: 0;
  padding-bottom: 5px;
}

div.FeaturesInput {
  margin: 7px 0;
}

div.FeaturesInput label {
  width: 110px;
}

Giải thích

Stylesheet này định nghĩa hình thức của toàn trang ví dụ, và không chỉ cho các thành phần của CAPTCHA – bạn có thể chỉ copy phần được tô đậm cho mục đích này.

Chúng tôi đã sửa sự sắp xếp của các thành phần của CAPTCHA để biểu tượng speaker và reload được xếp dọc bên phải hình ảnh CAPTCHA. Nếu bạn sử dụng kích thước ảnh CAPTCHA nhỏ hơn và muốn các biểu tượng được xếp ngang dưới hình ảnh CAPTCHA, chỉ việc điều chỉnh chiều rộng của #CaptchaIcons <div>. Hình ảnh CAPTCHA và <div> có kích thước được định nghĩa để tránh sự thay đổi cách sắp xếp khi sử dụng nút Reload (khi hình ảnh CAPTCHA được thay thế tạm với thẻ <span> với kích thước khác).

Placeholder <div> được sử dụng để chứa thành phần âm thanh trong suốt quá trình phát, vì chúng ta muốn âm thanh CAPTCHA phát mà không thay đổi gì về mặt hiển thị của trang web. Vì IE 6.0 thể hiện khác với các trình duyệt khác với thành tố âm thanh, một khai báo chi cho IE 6.0 (bắt đầu với *html để lọc các trình duyệt khác) đã được sử dụng.

[lên đầu trang]

Phiên bản hiện tại của BotDetect

Xin lưu ý

Trang này là bản dịch tiếng Việt không chính thức của trang gốc tiếng Anh: BotDetect CAPTCHA Validation ASP Code Sample và có thể không chính xác, không đầy đủ hoặc không cập nhật.

Cập nhật ngày 2009-11-30. Áp dụng cho BotDetect ASP.NET CAPTCHA v2.0.15 và BotDetect ASP CAPTCHA v2.0.9.

language: English Español Tiếng Việt

© Bản quyền thuộc công ty Lanapsoft, Inc. 2004-2009.

BotDetect, BotDetect CAPTCHA, Lanap, Lanap CAPTCHA, Lanap BotDetect, Lanap BotDetect CAPTCHA, Lanapsoft, Lanapsoft CAPTCHA, Lanapsoft BotDetect, Lanapsoft BotDetect CAPTCHA và Lanap Software là những thương hiệu của Lanapsoft, Inc. Tất cả những sản phẩm, nhãn hiệu và tên công ty khác được đề cập chỉ với mục đích định danh và được đăng ký thương hiệu bởi chủ nhân tương ứng của chúng.