گوگل مدعی است روش سادهتری برای شناسایی روباتهای نرمافزاری در فضای اینترنت یافته که بکارگیری کَپچا (CAPTCHA) را در فرمهای ورود از بین برده است. غول جستجو یک چک باکس ساده را جایگزین کپچا کرده است.گوگل از دیروز استفاده از یک چک باکس را جایگزین کپچا کرده است. کپچا کادری است که حروف و اعداد بصورت نامنظم در کنار یکدیگر قرار گرفتهاند و کاربر باید آنها را به ترتیب نوشته شده در کادر دیگری وارد کند. این پروسه به دلیل شناسایی کاربران واقعی از روباتهای نرمافزاری صورت میگیرد. گوگل استفاده از چک باکس ساده را در دستور کار قرار داده است. برای استفاده از روش جدید کافی است کادری را که در جلوی عبارت «I'm not a robot» قرار گرفته، کلیک کرد. با ما در ادامه مطلب همراه شوید .
گوگل متد جدید شناسایی روباتهای نرمافزاری را «No Captcha reCapthcha» نام گذاری کرده است. شاید بسیاری سیاست گوگل را یک قدم رو به عقب بدانند. این کمپانی اخیرا موفق به توسعهی هوشمصنوعی شده که از طریق آن قادر است بدون نیاز به دخالت عامل انسانی، تمامی کپچاها را بصورت نرمافزاری تشخیص دهد.
واینی شِت، مدیر پروژهی reCaptcha با انتشار پستی در وبلاگ خود در مورد روش جدید گوگل چنین اظهار نظر کرده است:
شاید API روش جدید که reCaptcha نام دارد بسیار ساده به نظر برسد، اما پشت پرده شرایط بگونهی دیگر و پیچیده است.
در روش جدید، رفتار کاربر قبل، بعد و در زمان نمایش چکباکس reCaptcha تحت نظر قرار میگیرد. در گجتهای موبایل نیز روش جدید بصورت تصویری نمایش داده میشود که کاربر باید از مجموع تصاویر نمایش داده شده در قسمت زیر، تصویر مشابه را یافته و روی آن کلیک کند.
وی در ادامه گفت:
سرویسهایی چون اسنپچت، وُردپرس، هامبل باندل و شماری دیگر که این روش را جایگزین روش کپچا کردهاند، خبر از نتایج امیدوار کنندهای دارند. برای مثال در هفتهی گذشته بیش از ۶۰ درصد از ترافیک وردپرس و ۸۰ درصد از ترافیک هامبل باندل، از روش جدید استفاده کردهاند که نتیجهی آن ورود سریعتر به حساب کاربری است.
آموزش راه اندازی و نصب :
ابتدا به آدرس google.com/recaptcha رفته و برای دامین خود لایسنس ثبت کنید . بعد از ثبت لایسنس ۲ تا کلید با عنوان های Site key
و Secret key
برای شما صادر می شود حال به سایت خود بیایید وکد زیر را در هدر سایت قرار دهید :
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async defer></script>همچنین شما می توانید از تارگت های زیر در ادامه لینک این فایل js استفاده کنید :
onload : Optional. The callback function that gets called when all the dependencies have loaded. render : { value : explicit , onload } Optional. Whether to render the widget explicitly. Defaults to onload, which will render the widget in the first g-recaptcha tag it finds. hl : {See {a href="https://developers.google.com/recaptcha/docs/language"} language codes} Optional. Forces the widget to render in a specific language. Auto-detects the user's language if unspecified.
نام پارامتر | مقدار | توضیحات |
---|---|---|
onload | - | اختیاری / به کمک این تارگت می توانید نام تابع جاوا اسکریپت مد نظر خود را قرار دهید تا با بارگذاری کامل ویجت آن تابع اجرا شود. |
render | explicit : غیر خودکار onload : خودکار |
اختیاری / این تارگت از شما می پرسد تا ویجت به صورت خودکار راه اندازی شود یا خیر که اگر از گزینه خیر استفاده کنید باید با استفاده از تارگت onload نام تابعی را وارد کنید تا ویجت با تنظیمات موردنظرتان فعال شود و به طور نرمال سیستم بر روی بارگذاری خودکار تنظیم شده است. |
hl | نمایش کد زبان ها | اختیاری / با استفاده از این تارگت می توانید زبان ویجت را تعیین کنید هرچند اگر از این ترگت استفاده نکنید گوگل گفته است این ویجت به طور خودکار زبان سایت شما را تشخیص می دهد. |
حال در مکانی که می خواهید این کد امنیتی هوشمند نمایش داده شود از کد زیر استفاده کنید :
توجه داشته باشید که در کد بالا به جای your_site_key کلیدی که با همین نام برای لایسنس شما صادر شده را قرار دهید . حال در تگ بالا از المنتهای زیر هم می توانید استفاده کنید :
data-sitekey : { grecaptcha.render parameter : 'sitekey' } Your sitekey. data-theme : { grecaptcha.render parameter : 'theme' } { value : dark,light } { default : light } Optional. The color theme of the widget. data-type : { grecaptcha.render parameter : 'type' } { value : audio,image } { default : image } Optional. The type of CAPTCHA to serve. data-callback: { grecaptcha.render parameter : 'callback' } Optional. Your callback function that's executed when the user submits a successful CAPTCHA response. The user's response, g-recaptcha-response, will be the input for your callback function.
نام المنتهای روی تگ g-recaptcha |
نام پارامتر grecaptcha.render |
مقدار | پیشفرض | توضیحات |
---|---|---|---|---|
data-sitekey | sitekey | - | - |
Site key دامین مورد نظر . |
data-theme | theme | dark light |
light | اختیاری / انتخاب رنگبندی ویجت . |
data-type | type | audio image |
image | اختیاری / نوع کد امنیتی . |
data-callback | callback | - | - | اختیاری / تابع callback شما زمانی اجرا می شود که ویجت صحت اطلاعات را تایید کند و پاسخ کاربر به صورت input با نشانه g-recaptcha-response برگردانده می شود. |
تاکنون مجموعه توضیحات ما در مثال زیر خلاصه می شود .
<html> <head> <title>reCAPTCHA demo: Simple page</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <form action="?" method="POST"> <div class="g-recaptcha" data-sitekey="your_site_key"></div> <br/> <input type="submit" value="Submit"> </form> </body> </html>خوب تا اینجا شما ید گرفتید که چطوری این کد را فراخوانی کنید و با المنت ها و تارگت های مختلف هم آشنا شدید و در اینجا به معرفی واسط برنامه نویسی این سیستم به زبان جاوااسکریپت می پردازیم (به دلیل تخصصی بودن ترجمه نشده است) . اکنون به ۲ مثال کاربردی و پیشرفته زیر که در آن ها از همه ویژگی ها استفاده شده است خوب دقت کنید تا بهتر متوجه عملکرد این گزینه ها باشید .
<html> <head> <title>reCAPTCHA demo: Explicit render after an onload callback</title> <script type="text/javascript"> var onloadCallback = function() { grecaptcha.render('html_element', { 'sitekey' : 'your_site_key' }); }; </script> </head> <body> <form action="?" method="POST"> <div id="html_element"></div> <br> <input type="submit" value="Submit"> </form> <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> </body> </html>مثال دوم :استفاده همزمان چند ویجت تشخیص کد امنیتی با تنظیمات مختلف .
<html> <head> <title>reCAPTCHA demo: Explicit render for multiple widgets</title> <script type="text/javascript"> var verifyCallback = function(response) { alert(response); }; var widgetId1; var widgetId2; var onloadCallback = function() { // Renders the HTML element with id 'example1' as a reCAPTCHA widget. // The id of the reCAPTCHA widget is assigned to 'widgetId1'. widgetId1 = grecaptcha.render('example1', { 'sitekey' : 'your_site_key', 'theme' : 'light' }); widgetId2 = grecaptcha.render(document.getElementById('example2'), { 'sitekey' : 'your_site_key' }); grecaptcha.render('example3', { 'sitekey' : 'your_site_key', 'callback' : verifyCallback, 'theme' : 'dark' }); }; </script> </head> <body> <!-- The g-recaptcha-response string displays in an alert message upon submit. --> <form action="javascript:alert(grecaptcha.getResponse(widgetId1));"> <div id="example1"></div> <br> <input type="submit" value="getResponse"> </form> <br> <!-- Resets reCAPTCHA widgetId2 upon submit. --> <form action="javascript:grecaptcha.reset(widgetId2);"> <div id="example2"></div> <br> <input type="submit" value="reset"> </form> <br> <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. --> <form action="?" method="POST"> <div id="example3"></div> <br> <input type="submit" value="Submit"> </form> <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> </body> </html>خوب تا اینجا آموختیم که به چه شکل سیستم را فراخوانی کنیم ، حال به مرحله بعدی می رویم که چگونه صحت کد امنیتی را چک کنیم که ایا تایید شده است یا نه تا در صورت تایید نشدن فرم ما ارسال نشود . وقتی که کاربر کد امنیتی را وارد کرد فیلد جدیدی (g-recaptcha-response) در HTML صفحه ایجاد می شود و شما با استفاده از یکی از سه راه زیر می توانید صحت اطلاعات را بررسی کنید .
URL: https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address
نام پارامتر | توضیحات |
---|---|
secret | اجباری / Secret key دامین مورد نظر |
response | اجباری / توکن مورد نیاز برای ارسال به سرور گوگل که صحت اطلاعات را تایید کند و این توکن از 3 راه بالا که توضیح داده شد بدست میاید . |
remoteip | اختیاری / آی پی آدرس کاربر . |
{ "success": true|false, "error-codes": [...] // optional }
کد خطاهایی که ممکنه رخ بدهد :
کد خطا | توضیحات |
---|---|
missing-input-secret | پارامتر Secret key دامین شما یافت نشد . |
invalid-input-secret | پارامتر Secret key دامین شما ناقص و یا اشتباه است . |
missing-input-response | پارامتر response یافت نشد . |
invalid-input-response | پارامتر response ناقص و یا اشتباه است . |
// Code By Seyed Amirhossein Tavousi. define("RECAPTCHA_VERIFY_SERVER", "https://www.google.com/recaptcha/api/siteverify"); class recaptcha { public function show_code($recaptcha_public_key) { return '<div class="g-recaptcha" data-sitekey="'.$recaptcha_public_key.'"></div>'; } public function getCurlData($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_TIMEOUT, 10); curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16"); $curlData = curl_exec($curl); curl_close($curl); return $curlData; } public function isValid($recaptcha_private_key) { $reLIB = $_POST['g-recaptcha-response']; if (!empty($reLIB)) { $ip = $_SERVER['REMOTE_ADDR']; $url = RECAPTCHA_VERIFY_SERVER . "?secret=" . $recaptcha_private_key . "&response=" . $reLIB . "&remoteip=" . $ip; $res = $this->getCurlData($url); $res = json_decode($res, true); if (!$res['success']) { return false; } } else { return false; } return true; } }در آخر اگر سوالی در مورد این ویجت و اجرا نشدن آن داشتید ابتدا به وبسایت رسمی ویجت مراجعه کنید در صورتی که پاسخ خود را نیافتید در دیدگاه ها بیان کنید تا پاسخ داده شود . [صفحه سوالات متداول ویجت reCaptcha گوگل]