PDA

View Full Version : آموزش: یک Captcha کاربر پسند



spranza804
شنبه 21 اسفند 1389, 22:09 عصر
چندی پیش یک کپچای جالب و خلاقانه در Jquery دیدم که بر اساس PHP کار می کرد. امروز فرصتی شد و ورژن Asp.net و فارسی آن را آماده کردم. امیدوارم بدرد دوستان بخورد.

برای استفاده کافی است دیو زیر را در فرم بگذارید:

<div class="ajax-fc-container">You must enable javascript to see captcha here!</div>

و ID فرم را در اسکریپت موجود در صفحه ست کنید.

67414

mehdi-ghafari
یک شنبه 22 اسفند 1389, 00:40 صبح
سلام دوست عزیز
خیلی ممنون خیلی وقت بود دنبال یه captcha جالب می گشتم
شما این رو با دات نت ۳.۵ نوشتید درسته؟
اگر من بخوام از اون تو دات نت ۲ استفاده کنم باید چکار کنم؟ اصلاً امکان داره؟

بازم ممنون از زحمت شما:قلب:

spranza804
یک شنبه 22 اسفند 1389, 01:26 صبح
بله. ورژن دات نت من 3.5 هست. قسمت عمده پردازش این کپچا توسط جاوا اسکریپت (Jquery) انجام می شود.
نباید در ورژن 2 مشکلی داشته باشد. چون در سمت سرور فقط از سشن و پارامتر های فرم استفاده شده است.

mehdi-ghafari
یک شنبه 22 اسفند 1389, 03:35 صبح
این توی تمام مرورگرها یه جور نشون میده؟
من ۴تا بیشتر نتونستم تست کنم.

jaykob
یک شنبه 22 اسفند 1389, 10:06 صبح
سلام دوست عزیز

ممنون از این captcha زیبا بود فقط شما داخل web.config هم تنظیماتی گذاشتید ؟لطفا اون تگ هایی را اضافه کردید بزارید چون من همچیز رو به همون شکل در یک پروژه دیگه گذاشتم اما خطا می ده .

با تشکر

spranza804
یک شنبه 22 اسفند 1389, 17:22 عصر
نه jakob خان،
تغییری در وب کانفیگ ندادم.
مراحل کار این کپچا به صورت زیر است:
کپچا به وسیله اجکس، مقدار یک عدد تصادفی را از سرور می گیرد ( فایلی که این عدد را تولید می کند و در سشن قرار می دهد، در همان فولدر کپچا قرار دارد ) سپس اگر یوزر عملیات درگ کردن را درست انجام دهد، این مقدار خوانده شده را در یک hidden field می ریزد و هنگام پست بک به همراه سایر پارامتر ها سابمیت می شود.

دقت کنید که id فرمی که این کپچا در آن قرار دارد را در جاوا اسکریپت موجود در صفحه وارد کنید.

jaykob
دوشنبه 23 اسفند 1389, 12:36 عصر
نه jakob خان،
تغییری در وب کانفیگ ندادم.
مراحل کار این کپچا به صورت زیر است:
کپچا به وسیله اجکس، مقدار یک عدد تصادفی را از سرور می گیرد ( فایلی که این عدد را تولید می کند و در سشن قرار می دهد، در همان فولدر کپچا قرار دارد ) سپس اگر یوزر عملیات درگ کردن را درست انجام دهد، این مقدار خوانده شده را در یک hidden field می ریزد و هنگام پست بک به همراه سایر پارامتر ها سابمیت می شود.

دقت کنید که id فرمی که این کپچا در آن قرار دارد را در جاوا اسکریپت موجود در صفحه وارد کنید.

ممنون دوست عزیز

من پروژه ای دارم که می خوام از این captcha استفاده کنم . من تمامی مراحل را انجام می دم . اما captcha لود نمی شه زمانی که یک فایل می سازم به یک اسم دیگر و تمامی سورس default.aspx شما را داخلش کپی می کنم به درستی کار می کنه اما زمانی در داخل سورس های html خودم قرار می دم فقط
You must enable javascript to see captcha here! را می نویسید

ممنون می شم راهنمایی کنید که بتوانم از این captcha استفاده کنم

spranza804
دوشنبه 23 اسفند 1389, 16:10 عصر
ایا لینک به جی کوئری و جی کوئری یو آی و همچنین اسکریپت خود کپچا در صفحه تان فراموش نشده است؟

jaykob
دوشنبه 23 اسفند 1389, 16:15 عصر
ایا لینک به جی کوئری و جی کوئری یو آی و همچنین اسکریپت خود کپچا در صفحه تان فراموش نشده است؟


همرو بالای چند بار امتحان کردم اما مشکل مال اینا چون همرو تست کردم . من یک form1 بعد از body باز کردم و قبل از body هم بستم که کنترل های دیگر هم وجود دارند . مشکل ما جای این فرم نمی تونه باشه ؟ یا هر مشکلی دیگه ؟

ممنون

spranza804
دوشنبه 23 اسفند 1389, 22:04 عصر
دیگه چیزی به نظرم نمی رسه. اگه براتون مقدوره، این قسمت از پروژتون رو بذارید. شاید اینجوری بشه حلش کرد.

Javad.Kashi
دوشنبه 23 اسفند 1389, 22:22 عصر
سلام
خیلی ممنون واقعا زحمت کشیدید . ولی به عنوان پیشنهاد : اگر کپچا به صورت عکس باشد بهتر نیست ؟ آخه همانطور که می دونید اگر کپچا به صورت عدد باشد این امکان برای برنامه نویس های مخرب است که عدد را تشخیص داده و کاری که نباید بکنند را انجام دهند.
البته در همین تالار در قسمت فیلم های آموزشی طریقه تبدیل کردن به عکس آموزش داده شده است.
با سپاس

یا علی

jaykob
سه شنبه 24 اسفند 1389, 08:20 صبح
دیگه چیزی به نظرم نمی رسه. اگه براتون مقدوره، این قسمت از پروژتون رو بذارید. شاید اینجوری بشه حلش کرد.

ممنون دوست عزیز من کد html را گذاشتم ممنون می شم این مشکل را حل کنید .



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="privacypolicy.aspx.cs" Inherits="TivaSafe.privacypolicy" %>

<!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 >
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">text</title>


<script src="script/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="script/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<script src="captcha/jquery.captcha.js" type="text/javascript"></script>

<link href="captcha/captcha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">

$(function() {

$(".ajax-fc-container").captcha({

borderColor: "silver",

text: "ثابت کنید که شما انسان هستید<br />لطفا <span>قیچی</span> را به سمت دایره بکشید.",
formId: "form1"

});

});

</script>


<link rel="stylesheet" type="text/css" href="./css/style.css" />

<script type="text/javascript" src="./js/jquery-1.3.js"></script>

<script type="text/javascript"src="./js/jquery.cycle.all.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});


</script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/screen.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});



</script>
<link rel="stylesheet" href="./menu.css" type="text/css" media="screen" />

<link href="./main.css" rel="stylesheet" type="text/css" />

<style type="text/css">
a:link {
text-decoration: #FFF;
color: #FFF;
}
a:visited {
text-decoration: #FFF;
color: #FFF;
}
a:hover {
text-decoration: #FFF;
color: #FFF;
}
a:active {
text-decoration: #FFF;
color: #FFF;
}
.style1
{
text-align: right;
}
</style>
</head>

<body background="img/bg/bg.gif" spry:repeat="x">
<body onload="load_animations()">
<div class="main">
<div class="righted">

</div>


</div>

<div class="center1">
<div id="rightmenu1">
<a href="./*"><div id="rihome">text</div></a>
<a href="./*"><div id="riwebdesign">text</div></a>
<a href="./*"><div id="risecnetwork">text</div></a>
<a href="./*"><div id="rinetworkdesign">textب</div></a>
<a href="./*"><div id="riseoservices">text</div></a>
<a href="./*"><div id="ritestnofoz">text</div></a>
<a href="./*"><div id="riabout">textا</div></a>
<a href="./*"><div id="ricontact">text</div></a>

</div>

<!-- slid -->
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="img/1slid-mini.jpg" alt="" />طراحی انواع پرتال های دولتی ، خبری ،شرکت ها </a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="img/2slid-mini.jpg" alt="" />طراحی حرفه ای وب سایت</a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="img/3slid-mini.jpg" alt="" />پرداخت های الکترونیکی</a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="img/4slid-mini.jpg" alt="" /><span>مجری طرح های امنیت شبکه</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="img/1slid.jpg" alt="" />

</div>

<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="img/2slid.jpg" alt="" />

</div>

<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="img/3slid.jpg" alt="" />

</div>

<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="img/4slid.jpg" alt="" />

</div>

</div>
<div id="ticker">
<p dir=rtl>
<font style="FONT-SIZE: 8pt" face=Tahoma color="#ffffff"><span id=theTicker></span></font>

<script type="text/javascript">

var theSummaries = new Array();
var theSiteLinks = new Array();
theSummaries[0]= "text";
theSiteLinks[0] = "./text";
theSummaries[1]= " text";
theSiteLinks[1] = "./text";
theSummaries[2]= "text";
theSiteLinks[2] = "./text";
theSummaries[3]= "text";
theSiteLinks[3] = "./text";

var theCharacterTimeout = 100;
var theStoryTimeout = 5000;
var theWidgetOne = "_";
var theWidgetTwo = "-";
var theWidgetNone = "";
var theItemCount = theSummaries.length;
var NS6=(document.getElementById && !document.all) ? true : false;
function startTicker(){
theCurrentStory = -1;
theCurrentLength = 0;
if (document.getElementById){
runTheTicker();
}
else{
document.write("<style>.ticki{display:none;}.ticko{border:0px; padding:0px;}</style>");
return true;
}
}
function runTheTicker(){
var myTimeout;
if(theCurrentLength == 0){
theCurrentStory++;
theCurrentStory = theCurrentStory % theItemCount;
theStorySummary = theSummaries[theCurrentStory];
theTargetLink = theSiteLinks[theCurrentStory];
}
var textTitle = theStorySummary.substring(0,theCurrentLength) + whatWidget();
if (theTargetLink ){
if (NS6){
document.getElementById("theTicker").innerHTML = '<a target="_blank" href='+theTargetLink+'>'+textTitle+'</a>';
}
else{
document.all.theTicker.innerHTML = '<a target="_blank" href='+theTargetLink+'>'+'<font face="Tahoma" style="font-size: 8pt"><span style="text-decoration: none">'+textTitle+'</span></font>'+'</a>';
}
}
else {
if (NS6){
document.getElementById("theTicker").innerHTML = '<a target="_blank" href='+theTargetLink+'>'+'<span class="tickertext">'+textTitle+'</span>'+'</a>';
}
else{
document.all.theTicker.innerHTML = '<a target="_blank" href='+theTargetLink+'>'+'<span class="tickertext">'+textTitle+'</span>'+'</a>';

}
}
if(theCurrentLength != theStorySummary.length){
theCurrentLength++;
myTimeout = theCharacterTimeout;
}
else{
theCurrentLength = 0;
myTimeout = theStoryTimeout;
}
setTimeout("runTheTicker()", myTimeout);
}
function whatWidget(){
if(theCurrentLength == theStorySummary.length){
return theWidgetNone;
}
if((theCurrentLength % 2) == 1){
return theWidgetOne;
}
else{
return theWidgetTwo;
}
}
startTicker();
</script>
</p>




</div>
</div>


<!-- Ticker -->

</div>
<div class="cent2">
<div id="menuunderright">
<a href="./onlinesupport.html"><div id="onlinsuport"></div></a>
<a href="./aboutus/freeconsultation.html"><div id="moshavereh"></div></a>
<a href="./profile/login.html"><div id="userlogin"></div></a>
<a href="./customer/login.html"><div id="customerslogin"></div></a>
<div class="cwebdesign"></div>

</div>




<div id="maintext">
<div id="title">text</div>
<div id="intext">
<p dir="rtl" class="style1">text</p>

<div>

<div class="ajax-fc-container">You must enable javascript to see captcha here!</div>

</div>
</div>
</div>
</div>

<div id="footer">


<div id="myslides">

<img src="img/slid-foter-1.jpg" />
<img src="img/slid-foter-2.jpg" />
<img src="img/slid-foter-3.jpg" />
</div>

<div id="textfooter"><a href="./text">text</a> &nbsp; <a href="./text">text</a> &nbsp; <a href="./text">اtext</a></div>
<div id="copyright">text</div>
</div>

</body>

</html>

spranza804
سه شنبه 24 اسفند 1389, 13:59 عصر
jakob خان،
من که هیچ فرمی توی صفحه ات نمی بینم. باید حتما صفحه تگ فرم داشته باشد و به آن یک id بدهی و سپس آن id را در اسکریپت مشخص کنی. در ضمن لینک به جی کوئری و جی کوئری یو آی، 2 بار تکرار شده.
یک نکته دیگه: همانطور که javad.kashi گفته، این کپچا امنیت کمتری نسبت به کپچا های تصویری دارد و بهتر است برای مقاصد خیلی جدی استفاده نشود.

asp2.net
سه شنبه 30 فروردین 1390, 17:30 عصر
دست شما درد نکنه جالب بود.
ولی صفحاتی که وابسته به مسترپج هستند مشکل دارند. چیکار باید کرد تا رفع شود؟

asp2.net
چهارشنبه 31 فروردین 1390, 07:25 صبح
دستت درد نکنه عالی بود ولی صفحاتی که وابسته به مستر پچ هستند کار نمیکنه

MJVMJV
جمعه 02 اردیبهشت 1390, 17:55 عصر
نه دوست عزيز من تست كردم هيچ اشكالي ندا شت
مشكلتون كجاست؟

asp2.net
شنبه 03 اردیبهشت 1390, 15:20 عصر
باسلام اگه امکان داره یک نمونه از صفحات که وابسته به مسترپچ هستن اینجا بزار ،
چون من هر کاری کردم نشد

EnKamran
یک شنبه 27 فروردین 1391, 11:25 صبح
دوستان یکی کمک کنه، روی لوکال خیلی عالی ج.اب میده اما الان که آپلود کردم همه عکس ها رو عکس کتاب نمایش میده یعنی اون قیچش و اینا نمی اد فقط 5 تا عکس کتاب میاد.

arash63
پنج شنبه 21 اردیبهشت 1391, 14:26 عصر
دمت گرم رفیق ، خیلی جالب بود . با اجازت تو یکی از پروژه هام ازش استفاده می کنم .