چگونه با جاوااسکریپت کپچا بسازیم؟ حتماً خیلی از مواقع دیدید که موقع ثبت نام در سایتی یک تصویر امنیتی دیده میشه یا مثلاً در سایت یاهو چند بار که اشتباه پسورد یا یوزر را تایپ کنید تصویر امنیتی ظاهر میشه و از شما میخواد این تصویر رو دقیقاً وارد کنید ، شاید برای شما این سوال باشه که اصلاً این تصویر چی هست و به چه دردی میخوره؟این کد ها و این تصایر به علت اینکه تصویر هست و یه موقع هایی خیلی ناانا نیست فقط یک انسان میتونه بخونه این تصاویر رو و ربات های اسپم ساز نمی تونن این متن رو بخونن به خاطر همین موضوع سایت مطمئن میشود که یک انسان پشت سیستم هست و هیچ ویروس یا تروجانی در کار نیست.
اما اگر یک سایتی یه همچین چیزی نداشته باشه ، ممکنه یک ربات برنامه ریزی شده در یک لحظه هزاران یوزر ثبت کنه و یا هزارارن بار به سایت وارد شه و سایت رو دچار افت کیفیت سرعت کنه و علاوه بر ضیعف شدن سرور ضرر های دیگه ای هم به سایت وارد میشه.برای اینکه یه تمرینی داشته باشیم برای ایجاد یه همچین داستانی برای وب سایت خودمون میتونید از کد های زیر استفاده کنید.در صفحه Html کد های زیر رو تایپ کنید و یا Copy و Pase کنید:
<html>
<body dir="rtl">
<form id="form1" runat="server">
<div>
<div id="header">
<div id="header-container">
<a href="https://tosinso.com/">
<img id="header-title" alt="انجمن تخصصی فناوری اطلاعات ایران" class="pull-right" src="https://tosinso.com/Content/Images/header-title.png" /> </a>
</div>
</div>
<h2> </h2>
<input type="text" id="txt1" runat="server"
style="border-style: none; border-color: initial; border-width: thin; background-color:navy; color:white; font-family: 'Curlz MT'; font-size: x-large; font-weight: bold; font-variant: normal; letter-spacing: 10pt; width: 120px; background-image: url('glitter_background_b4.gif');"
value="5AbD" />
<input type="button" onclick="show()" value="New" style="width: 48px" />
</div>
<asp:TextBox ID="txtverification" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Check"
onclick="Button1_Click" />
<asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
</form>
</body>
</html>
با استفاده از کد های زیر تصویر را میسازیم:
<script language="javascript">
var a = 49, b = 65;
var c = 100;
var d = 70;
function show() {
if (a == 57) {
a = 49;
}
var main = document.getElementById('txt1');
var a1 = String.fromCharCode(a);
var b1 = String.fromCharCode(b);
var c1 = String.fromCharCode(c);
var d1 = String.fromCharCode(d);
main.value = a1 + b1 + c1 + d1;
a = a + 1;
b = b + 1;
c = c + 1;
d = d + 1;
}
</script>
<style type="text/css">
#form1
{
height: 100px;
}
</style>
برای چک کردن صحت از تصویر مورد نظر از کد زیر استفاده میکنیم
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CaptchaJavascript
{
public partial class Default : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
if (txtverification.Text == txt1.Value)
{
lblmsg.Text = "صحیح است";
}
else
{
lblmsg.Text = "صحیح نیست ، حروف بزرگ و کوچک را رعایت کنید";
}
}
}
}
به این تکنیک ها Captcha میگویند و در انواع مختلف مورد استفاده قرار گرفته شده است.بهتر است به مطلب مهندس نصیری مراجعه کنید تا از این موضوع درک بیشتری پیدا کنید
به امید ایرانی سربلند و پر افتخار.