کلیدستان

نسخه‌ی کامل: اضافه کردن reCAPTCHA No CAPTCHA در وب سایت
شما در حال مشاهده نسخه آرشیو هستید. برای مشاهده نسخه کامل کلیک کنید.
یکی از اصلی‌ترین مزاحمت‌ها برای یک صاحب سایت اینه که صبح از خواب بلند بشه، بره سراغ پنل مدیریت سایتش و ببینه 500 تا پیغام تماس با ما داره یا هر فرمی توی وب سایتش رو چندین بار پر کردن!!! و وقتی میره گزارش‌ها رو ببینه متوجه میشه که این پیغام‌ها به‌وسیله‌ی ربات‌ها برای اون گذاشته شده و فرم‌ها به‌وسیله‌ی انسان پر نشدن!!!
 


     شاید شما همین حالا صاحب یک سایت باشید و یا شاید به زودی قراره صاحب سایت بشید. اصلا شاید شما طراح سایت هستید و هر ماه تعدادی وب سایت طراحی می‌کنید. اگر در یکی از این دسته افراد قرار دارید، حتما این مقاله برای شما بسیار سودمند خواهد بود.

     یکی از اصلی‌ترین مزاحمت‌ها برای یک صاحب سایت اینه که صبح از خواب بلند بشه، بره سراغ پنل مدیریت سایتش و ببینه 500 تا پیغام تماس با ما داره یا هر فرمی توی وب سایتش رو چندین بار پر کردن!!! و وقتی میره گزارش‌ها رو ببینه متوجه میشه که این پیغام‌ها به‌وسیله‌ی ربات‌ها برای اون گذاشته شده و فرم‌ها به‌وسیله‌ی انسان پر نشدن. این عامل می‌تونه خیلی برای صاحب سایت مضر باشه چون هم حجم سرور رو اشغال می‌کنه و هم به علت پیغام‌های زیاد ممکنه پیغام کاربران اصلی وب سایت هم گم بشن. خوب راه حل این مشکل و رهایی از دست این ربات‌های مزاحم چیه؟ CAPTCHA



 
CAPTCHA مخفف Completely Automated Public Turing to tell Computers and Humans Apart و به معنای «آزمون عمومی کاملا خودکارشده تورینگ برای مجزا کردن انسان و کامپیوترها» است. CAPTCHA در اصل سامانه‌ای امنیتی برای جلوگیری از خرابکاری ربات‌های رایانه‌ای در وب سایت شما می‌باشد و کاربردهای گوناگونی دارد.

     برای مثال گاهی اوقات صاحبان وب سایت‌ها برای افزایش رتبه خود در جهت سئو، از نرم‌افزارهای انتشار نظرات اسپم استفاده می‌کنند. در حالی‌که اگر CAPTCHA را در وب سایت خود قرار دهید، امکان ثبت نظر فقط به وسیله انسان وجود دارد و حتی نیازی به مجبور کردن کاربر به ثبت نام در وب سایت شما نیست.

     به‌کارگیری صحیح و مناسب CAPTCHA تاثیر به‌سزایی در جلوگیری از هک و کاهش فرم‌ها، نظرات و سفارشات اسپم دارد. شایان ذکر است که استفاده از الگوهای دشوار و یا سوالات تصویری متعدد که حتی برای انسان هم دشوار هستند، باعث کاهش ux وب سایت و تعداد کاربران شما خواهد شد.
 
اضافه کردن reCAPTCHA No CAPTCHA  در وب سایت

ورودی‌های CAPTCHA متداول‌ترین تجربه خسته‌کننده در وب هستند. CAPTCHAها برای اکثر افراد خوشایند نیستند، مخصوصا افراد کم بینا و یا کسانی که از تجیزات کمکی (مانند نمایشگرهای سخنگو) برای دسترسی به وب استفاده می‌کنند. متاسفانه با این وجود، باز هم CAPTCHAها عنصری حیاتی در مبارزه با spam محسوب می‌شوند.



      در حالی خواندن CAPTCHAهای حالت داده شده (متن‌های دارای زاویه) برای کاربران انسانی مشکل است که هوش مصنوعی مدرن مشکل کمتری با خواندن این کدها دارد! گوگل نیز برای خواندن پلاک خانه‌ها و تابلوهای راهنمایی رانندگی در جهت مشخص کردن موقعیت خیابان‌ها از تکنولوژی یکسانی استفاده می‌کند.




همین موضوع باعث شده است از سال 2014 تاکنون گوگل بهترین راه حل موجود برای CAPTCHA را ارائه بدهد. No CAPTCHA reCAPTCHA تنها به یک ضربه انگشت، کلیک موس یا زدن spacebar نیاز دارد.




     در بیشتر موارد تنها همین کار کافی است اما اگر آنالیزگرهای خطر گوگل، احتمال انسان نبودن کاربر را بدهند، صفحه دیگری به صورت زیر نمایان خواهد شد.



راه‌اندازی No CAPTCHA reCAPTCHA
  • مرحله اول:
ابتدا به یک کلید API نیاز داریم، لینک google.com/recaptcha/admin را دنبال کنید. برای دسترسی به این صفحه، باید به اکانت گوگل خود وارد شوید. سپس صفحه‌ای به صورت زیر باز خواهد شد که در آن وب سایت خود را ثبت کنید. نامی مناسب انتخاب و آدرس Domainهایی که هدف شما برای استفاده از reCAPTCHA هستند را وارد کنید. Subdomainهای شما به صورت خودکار به این اکانت اضافه خواهند شد.



  • مرحله دوم:
پس از انجام مرحله قبل، دو کد به عنوان Site key و Secret key به شما داده خواهد شد:


  • مرحله سوم:
در زیر کلیدها، کدهایی برای پیوست reCAPTCHA به وب سایت خود مشاهده خواهید کرد. اولین کد، کد جاوااسکریپت زیر است:


کد:
<script src=

کد:
"https://www.google.com/recaptcha/api.js"

کد:
></script>


هم‌چنین امکان انتخاب زبان مورد استفاده از بین 40 زبان پشتیبانی شده وجود دارد. به عنوان مثال در کد زیر .es برای استفاده از زبان اسپانیایی اضافه شده است:



کد:
<script src=

کد:
"https://www.google.com/recaptcha/api.js?hl=es"

کد:
></script>

دستور بالا را در انتهای کد خود یا زیر فرمی که در آن از reCAPTCHA استفاده خواهد شد، قرار دهید.
 
  • مرحله چهارم:
کد Site key داده شده را در تگ دربردارنده reCAPTCHA به عنوان data-sitekey وارد کنید.
 


صفت‌های دیگری نیز برای تغییر نحوه نمایش و عملکرد reCAPTCHA وجود دارد. برای مشاهده جزئیات و صفت‌های بیشتر به developers.google.com رجوع شود.

به عنوان مثال:
 "data-theme="dark  نحوه نمایش را به صورت زیر تغییر خواهد داد.


 
 
بررسی یک نمونه ساده
  • مرحله اول: قرار دادن تگ script و کلیدها در تگ هدف


 
در این مثال از دو تگ input برای name و email نیز استفاده شده است.


برای بررسی CAPTCHA کدهای server side مورد استفاده قرار می‌گیرند. در این مثال از php استفاده شده است. بنابراین فایل بالا را با پسوند .php مانند index.php ذخیره کنید.
 
  • مرحله دوم:
دقت کنید که نحوه ارسال فرم post در نظر گرفته شده است و در نتیجه زمانی‌که فرم ارسال می‌شود، اطلاعات به صورت آرایه‌ای از متغیرها به همین صفحه بازخواهند گشت. بنابراین با استفاده از یک حلقه foreach امکان چاپ متغیرها وجود دارد؛ کد زیر را در جایی از صفحه خود اضافه کنید:



این کد مقادیر آرایه $_POST را چاپ خواهد کرد. پس از اجرا خروجی زیر مشاهده خواهد شد:



همان‌طور که مشاهده می‌کنید علاوه بر مقادیر name و email، مقداری با نام g-recaptcha-response نیز وجود دارد. در صورتی‌که گزینه I’m not a robot را تیک نزده باشید، مقدار نمایش داده شده برای متغیر g-recaptcha-response خالی خواهد بود. در مرحله بعدی باید داده فوق برای بررسی به گوگل فرستاده شود.
 
  • مرحله سوم:
خوشبختانه گروه گوگل کار بررسی این داده را برای ما انجام داده‌اند.
کافی است کتابخانه recaptchalib.php را دانلود، به root پروژه خود اضافه و آن را در بالای فایل index.php فراخوانی کنید.


  • مرحله چهارم:
این کتابخانه شامل مجموعه‌ای از توابع برای ارسال g-recaptcha-response به گوگل با HTTP request است. برای استفاده از این توابع ابتدا باید چند متغیر را تعریف کنیم.



صحت کد secret key ما به وسیله reCaptcha() بررسی می‌شود. در صورت عدم وجود کد، پردازش متوقف خواهد شد و پیغامی برای راهنمایی ما به دریافت کد secret key نمایان می‌شود. بعد از تعریف متغیرهای بالا، کد زیر را اضافه کنید:


  • مرحله پنجم:
در صورتی‌که همه چیز درست پیش رفته باشد، response$ با مقدار success برگشت داده خواهد شد و ادامه مراحل پردازش فرم قابل انجام است. کد مرحله دوم که فقط برای نمایش اطلاعات به شما بود را پاک کنید و کد زیر را در بالای فرم قرار دهید:



و سپس تگ بستن php را بعد از فرم اضافه کنید:
در انتها پیغامی برای تشکر از ورود صحیح اطلاعات به کاربر نمایش داده خواهد شد. 

 



کد:
<!--?php } ?-->