افزونه reCAPTCHA No CAPTCHA در وب سایت

افزونه reCAPTCHA No CAPTCHA در وب سایت
آکادمی آی تی
آکادمی آی تی
dots

افزونه reCAPTCHA No CAPTCHA در وب سایت

زمان مورد نیاز برای مطالعه 5 دقیقه

افزونه reCAPTCHA No CAPTCHA چیست؟ چگونه می توان آن ها را در وب سایت ها اضافه کرد؟ این کدها چه تفاوتی با کدهای معمولی دارند؟

دپارتمان ‌ها: آموزش طراحی سایت
1398/08/01
8,544 بازدید

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 به وب سایت خود مشاهده خواهید کرد. اولین کد، کد جاوااسکریپت زیر است. هم‌چنین امکان انتخاب زبان مورد استفاده از بین 40 زبان پشتیبانی شده وجود دارد. به عنوان مثال در کد زیر، es برای استفاده از زبان اسپانیایی اضافه شده است. دستور بالا را در انتهای کد خود یا زیر فرمی که در آن از 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 را بعد از فرم اضافه کنید: در انتها پیغامی برای تشکر از ورود صحیح اطلاعات به کاربر نمایش داده خواهد شد.