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

کپچا یکی از پرکاربردترین موارد در ایجاد وب سایت هاست. کپچا به خودی خود به اندازه کافی برای کاربران آزاردهنده است. حال فرض کنید که خوانایی کافی را هم نداشته باشد. اما متاسفانه این راه بهترین راه برای جلوگیری از اسپم هاست.

نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایتخیلی از متن ها و شماره ها با اینکه خواندنشان حتی برای انسان ها هم سخت است، هوش مصنوعی مدرن مشکل زیادی در حل آنها ندارد. حتی گوگل هم برای خواندن پلاک ها و علائم رانندگی در Google Street View اینکار را انجام می دهد.

نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایتاما نکته قابل توجه اینه که توسعه دهنگان گوگل بهترین کد کپچا No CAPTCHA reCaptcha را در سال 2014 تولید کردند که نیاز به خواندن هیچ متن پیچیده ای ندارد و تنها کاری که باید انجام دهید یک کلیک و یا زدن کلید Space است.

نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایتدر اکثر مواقع انجام همین کار کافی است اما اگر ربات گوگل بازهم از انسان بودن شما مطمئن نشود یک متن برای تایپ به شما نشان خواهد داد.

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

اما اگر دستگاه کاربر موبایل یا تبلت باشد کپچا مخصوص این دستگاه ها به آنها نمایش داده میشود. این کپچا به این صورت است که کاربر باید عکس های مرتبط با عکس انتخاب شده را انتخاب کند که برای کاربران موبایل بسیار مناسبتر است.

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

دریافت No CAPTCHA reCAPTCHA

قدم اول:

در ابتدا ما به یک API Key نیاز داریم. برای گرفتن API Key به این آدرس بروید.

پس از وارد شدن به این آدرس ابتدا باید وارد حساب گوگلتان شوید. بعد از این از شما می خواهد که سایتی که می خواهید در آن از No CAPTCHA استفاده کنید را ثبت کنید. یک نام دلخواه در فیلدی بالایی و آدرس سایتتان را در فیلد پایینی وارد کنید. توجه کنید که ساب دامین ها بطور خودکار اضافه خواهند شد.

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

قدم دوم:

بعد از انجام اینکار شما یک Site key و یک Secret key دریافت خواهید کرد.

نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایتقدم سوم:

در ابتدا جاوا اسکریپت No CAPTCHA reCAPTCHA را فراخوانی کنید.

همچنین برای افزودن زبان پارسی باید از کد زیر به جای کد بالا استفاده کنید:
این تگ را در پایین سایتتان قبل از تگ </body> بگذارید.
قدم چهارم:
در این مرحله باید کد زیر را هر جایی که میخواهید کپچا نمایش داده شود وارد کنید:
<div class="g-recaptcha"data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>
توجه کنید که data-sitekey کدی است که در قدم دوم دریافت کردید.
مشخصه هایی هم وجود دارد که شما بتوانید کدی را که اضافه کردید شخصی سازی کنید. بطور مثال اضافه کردن مشخصه data-theme="dark" تم کد کپچا را تیره می کند.
نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایت

استفاده از کد کپچا

قدم اول:

یک فرم ساده ایجاد می کنیم:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>
  <body>
    <form action="" method="post">
      <label for="name">Name:</label>
      <input name="name" required><br />
      <label for="email">Email:</label>
      <input name="email" type="email" required><br />
      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> 
      <input type="submit" value="Submit" />
    </form>
    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </body>
</html>
نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایت
سپس فایل را با نام index.php ذخیره کنید.
قدم دوم:
کد زیر را به قسمتی از فایلی که ذخیره کردید اضافه کنید.
<?php
  foreach ($_POST as $key => $value) {
    echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
  }
?>
توضیح کار کد: این کد مقدارهای دریافت شده را بصورت آرایه به صفحه ارسال می کند. ما آن را در یک حلقه قرار دادیم تا تمام مقدارهای آرایه را دریافت کنیم.
اگر صفحه را باز کنید بعد از پر کردن فرم و انتخاب گزینه I’m not a robot چیزی شبیه به تصویر زیر خواهید دید:
نحوه استفاده از No CAPTCHA reCAPTCHA در وب سایتقدم سوم:
خوشبختانه تیم گوگل قسمت سخت کار را برای ما انجام داده اند و تنها کاری که در این قسمت باید انجام دهیم ذخیره صفحه PHP زیر، قرار دادن آن در محل اصلی سایت (Root) و فراخوانی آن در فایل صفحه اصلی مان است.
بعد از ذخیره کردن فایل توسط کد زیر آن را در فرمی که ایجاد کردیم فراخوانی کنید:
<?php
    // grab recaptcha library
    require_once"recaptchalib.php";
?>
قدم چهارم:
کد زیر را قبل از تگ PHP بسته (?>) قرار دهید:
// your secret key
$secret= "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response= null;

// check secret key
$reCaptcha= newReCaptcha($secret);

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}
توجه کنید که در اینجا مقدار $secret باید برابر با مقداری باشد که در مراحل قبل از گوگل دریافت کردید.
قدم پنجم:
آخرین کاری که باید انجام دهید تغییر دادن کدی است که در قدم دوم نوشتیم. کد را بصورت زیر تغییر دهید و آن را قبل از فرم قرار دهید:
<?php
  if ($response != null && $response->success) {
    echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
  } else {
?>
 و در نهایت بعد از فرم کد زیر را قرار دهید:
<?php } ?>
امیدواریم که تمام مراحل با موفقیت انجام شده باشد و از این آموزش لذت برده باشید.

تا کنون دیدگاهی برای این مطلب ارسال نشده است. اولین نفری باشید که دیدگاه خود را بیان می کند


دیدگاه خود را بیان کنید

به منظور بیان دیدگاه خود لطفا ابتدا وارد سایت شوید