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

راه جلوگیری از دریافت نظرات جعلی و پیام های اسپم

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

با استفاده از reCAPTCHA گوگل کاربران فقط با یک کلیک می توانند تایید کنند که ربات نیستند.

ریکپچا (reCAPTCHA) چیست؟

CAPTCHA مخفف عبارت Completely Automated Public Turing Test to Tell Computers and Humans Apart (آزمون عمومی کاملا خودکار تورینگ برای تشخیص انسان از ربات) است. ابزاری امنیتی برای جلوگیری از حملات و اسپم‌هایی که توسط ربات‌ها به سوی وب سایت ارسال می‌شوند. لایه‌های امنیتی که در قالب سوال در این ابزار وجود دارد، فقط توسط انسان قابل حل هستند. reCaptcha نیز یک سرویس آماده و رایگان است که توسط گوگل طراحی شده است.

انواع (نسخه های) reCAPTCHA گوگل

معروف ترین و مورد استفاده ترین نسخه های reCAPTCHA گوگل نسخه 2 و 3 آن است. درنسخه 2 نیاز است تا کربر تیک گزینه من یک ربات نیستم (i'm not a robot) را بزند تا به عنوان ربات شناسای نشود.

اما گوگل در نسخه 3 این عملیات را ساده تر کرده است. در reCAPTCHA V3 از یک حالت نا پیدا و تقریبا مخفی استفاده شده است که تنها در موارد مشکوک کاربر نیاز به انجام عملیات احراز هویت خود می باشد.

در ادامه این مقاله به نحوه پیاده سازی reCAPTCHA V3 در PHP می پردازیم.

برای پیاده سازی نسخه 2 مقاله زیر را مطالعه کنید

استفاده از Google reCAPTCHA نسخه 2 در PHP

طرز کار reCAPTCHA V3

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

1. کاربر یک صفحه وب را درخواست می دهد.
2. وب سایت یا سرور، صفحه درخواستی رو به همراه reCaptcha V3 به کاربر بازگشت می دهد.
3. اکنون کاربر فرم مربوطه را پر میکند و دکمه ارسال را می زند.
4. قبل از اینکه داده های موجود در فرم، به سمت سرور یا سایت ارسال شود، reCAPTCHA v3 در سمت کلاینت یا کاربر به صورت AJAX یک درخواست به سرور گوگل ارائه می دهد تا از طریق آن توکنی را دریافت کند. در این مرحله ی خاصیت به نام action در نظر می گیریم تا متوجه شویم این همان درخواست مربوطه می باشد.
5. توکن به دست آمده در مرحله قبل به همراه داده های فرم به سمت سرور یا وب سایت ارسال می شود. در این مرحله اغلب دومتغیر مخفی که شامل توکن و action می باشد را به فرم اضافه می کنیم.
6. در مرحله هنگامی که فرم به سرور یا وب سایت ما رسید باید عملیات اعتبار سنجی رو اجرا کنیم تا اطمینان حاصل کنیم که فرم رو یک انسان ارسال کرده. در این حالت به همراه یک درخواست توکن و رمز گوگل به سمت گوگل ارسال می شود تا بررسی شود.
7. درنهایت نتیجه را از سرور گوگل در قالب یک شیء JSON دریافت میکنیم تا ببینیم که فرم را یک انسان ارسال کرده است یا یک ربات. قالب نتیجه ای که دریافت می شود به صورت زیر است

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

برای اطمینان از اینکه داده های دریافتی امن هستند، سه مورد را بررسی می کنیم و پس از آن اطلاعات فرم را ثبت میکنیم.

• نمره (score) باید بالاتر از 0.5 باشد.
• مشخصه success باید true باشد.
• مقدار اکشن (action) باید با مقدار اکشنی که در فرم قرار داده بودیم یکسان باشد.

reCAPTCHA v3 بدون اینکه از کاربر عملیاتی را درخواست کند نمره ای را در نظر می گیرد. این نمره بر اساس تعامل کاربر با سایت به دست می آید که شامل فشردن کلید ها، حرت ماوس می باشد.  البته این نمره نیز بر اساس میزان درخواست هایی که از وب سایت شما می شود تنظیم می شود و به ترافیک وب سایت شما مرتبط است. بنابراین می توانید مقدار این نمره را بر اساس نیاز خود تنظیم کنید. (نمره بین 0.0 تا 1.0 داده می شود)

نحوه پیاده سازی reCAPTCHA v3 با PHP

1- برای پیاده سازی Google reCaptcha نیاز به کلید و رمز دارید که گوگل آن را در اختیار شما قرار می دهد. این کلید رو برای دامنه مورد نظرتون دریافت می کنید. برای همین منظور وارد پنل ادمین reCaptcha شوید.

برای ورود به پنل ادمین reCaptcha کلیک کنید.

2- پس از ورود به لینک زیر از شما درخواست میشه که با یک حساب جیمیل خود وارد شوید.

3- در صفحه جدید از شما اطلاعات مربوط به دامنه را درخواست می کند.

• label : در این قسمت یک عنوان برای reCaptcha خود بنویسید.
• reCaptcha type : در این قسمت نوع و یا نسخه reCaptcha را انتخاب کنید. ( در این آموزش گزینه reCaptcha v3 را انتخاب می کنیم)
• Domains : در این قسمت نام دامنه هایی که قصد استفاده از reCaptcha رو اون دارید وارد کنید. ( برای اینکه بتونید در پروژه های روی سیستم خودتون هم تست کنید localhost را نیز اضافه کنید)

در نهایت مشابه تصویر زیر خواهیم داشت.

4- در پایان کار تیک گزینه Accept the reCAPTCHA Terms of Service را فعال کرده و دکمه Submit را انتخاب می کنیم.

5- اکنون گوگل کلید و رمز مربوط به سایت شما رو تولید کرده و در اختیار شما قرار می دهد.

6- اکنون تمام اطلاعات لازم رو جهت پیاده سازی reCaptcha V3 در اختیار داریم و می توانیم با استفاه از کدهای PHP آن را پیاده سازی کنیم.

نکته: در صورتی که کلید و رمز رو فراموش کردید یا به هر دلیلی از دست دادید. مجددا میتونید وارد پنل شوید و اطلاعات لازم رو به دست آورید یا حذف کنید.

پیاده سازی reCaptcha V3 با کدهای PHP

اکنون نوبت پیاده سازی reCaptcha با کد نویسی است. برای پیاده سازی نیاز به دو صفحه داریم. یک صفحه مربوط به فرمی است که کاربر باید پر نماید و صفحه دیگر مسئول چک کردن reCaptcha و ثبت اطلاعات می باشد. دراینجا reCaptcha را با مثال فرم اشتراک در خبرنامه پیاده سازی میکنیم.

<script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>

با استفاده از قطعه کد بالا کتابخانه جاوا اسکریپت reCAPTCHA را به صفحه مورد نظر اضافه میکنیم. ( در بین تگ Head نوشته شود). همانطور که مشاهده می نید در مقابل عبارت render کدی نوشته شده است (6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y) که باید مقدار رشته site key مربوط به خودتون رو که در مرحله 5 بالا توضیح داده شد را جایگزین کنید.

توجه کنید به علت اینکه باید از دستورات جاوا اسکریپت استفاده کنیم باید کتابخانه Jquery را به پروژه اضافه کرده باشیم. ( می توانید لینک کلود یا آنلاین را هم به پروژه اضافه کنید)

دانلود کتابخانه Jquery

کد کامل صفحه تا اینجای کار به این صورت می شود.

<html>
  <head>
    <title>Subscribe to Newsletter</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
 
    <script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>
  </head>
  <body>
    <div>
      <b>Subscribe Newsletter</b>
    </div>
 
    <form id="newsletterForm" action="subscribe_newsletter_submit.php" method="post">
      <div>
          <div>
              <input type="email" id="email" name="email">
          </div>
          <div>
              <input type="submit" value="submit">
          </div>
      </div>
    </form>

  </body>
</html>

با اجرای صفحه مورد نظر خواهد دید که در قسمت پایین سمت راست صفحه reCaptcha نمایش داده می شود. همانطور که پیش تر توضیح داده شد قبل از ارسال داده های فرم نیاز به دریافت توکن و اتصال به سرور گوگل می باشد. برای همین منظور با استفاده از کد جاوا اسکریپت این عملیات را انجام می دهیم.

<script>
    $('#newsletterForm').submit(function(event) {
        event.preventDefault();
        var email = $('#email').val();
 
        grecaptcha.ready(function() {
            grecaptcha.execute('6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y', {action: 'subscribe_newsletter'}).then(function(token) {
                $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
                $('#newsletterForm').unbind('submit').submit();
            });;
        });
  });
  </script>

همانطور که می دانید وقتی کاربر دکمه ارسال را بزند، بلافاصله اطلاعات ارسال می شود، در حالی که ما قبل از ارسال اطلاعات نیاز به دریافت توکن داریم. برای همین از تابع ()event.preventDefault برای توقف ارسال اطلاعات فرم می کنیم.

سپس با استفاده از شی grecaptcha اقدام به دریافت توکن با استفاده از متد execute می کنیم. این عملیات به صورت AJAX انجام می شود. در این قسمت نیز باید به جای رشته "6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y" مقدار site key مربوط به خودتون رو که در مرحله 5 بالا توضیح داده شد را جایگزین کنید. همچنین یک نام را برای action خود در نظر میگیرد. در اینجا از عبارت subscribe_newsletter استفاده کرده ایم. با استفاده از نام اکشن علاوه بر توضیحاتی که پیش تر داده شد می توانیم تجزیه و تحلیل دقیقی از داده‌های در کنسول ادمین گوگل داشته باشیم.

پس از آنکه متد execute پاسخ توکن را دریافت می‌کند، می توانیم اطلاعات فرم را به همراه توکن و اکشن ارسال کنیم.در قطعه کد بالا با استفاده از تابع prepend توکن و اکشن را به فرم الحاق کردیم و در نهایت فرم را ارسال کردیم. شما می توانید از روش های دیگر نیز عملیات اطلاعات ارسال فرم را انجام دهید. مثالی از ارسال اطلاعات به صورت ای جکس (کد ها رو درون تابع execute به جای سه خط مربوطه قرار دهید ) :

$.ajax({
            type: 'POST',
            url: 'subscribe_newsletter_submit.php',
            data: {
                 email: email,
                 token: token,
                 action: 'subscribe_newsletter',
            },
            success: function (result) {

            },
            error: function (result) {

            }
            });

نتیجه رو در تابع success و error مدیریت کنید.

در نهایت کد کامل این صفحه به صورت زیر خواهد بود :

<html>
  <head>
    <title>Subscribe to Newsletter</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
 
    <script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>
  </head>
  <body>
    <div>
      <b>Subscribe Newsletter</b>
    </div>
 
    <form id="newsletterForm" action="subscribe_newsletter_submit.php" method="post">
      <div>
          <div>
              <input type="email" id="email" name="email">
          </div>
          <div>
              <input type="submit" value="submit">
          </div>
      </div>
    </form>
 
    <script>
    $('#newsletterForm').submit(function(event) {
        event.preventDefault();
        var email = $('#email').val();
 
        grecaptcha.ready(function() {
            grecaptcha.execute('6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y', {action: 'subscribe_newsletter'}).then(function(token) {
                $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
                $('#newsletterForm').unbind('submit').submit();
            });;
        });
  });
  </script>
  </body>
</html>

اکنون فرم تکمیل شد و اطلاعات را به صفحه دیگر جهت بررسی وضعیت کاربر ارسال میکنیم. ( در مثال بالا به صفحه subscribe_newsletter_submit.php )

<?php
$secretKey = "YOUR_SECRET_HERE";
 
if (isset($_POST['email']) && $_POST['email']) {
    $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
} else {
    // set error message and redirect back to form...
    header('location: subscribe_newsletter_form.php');
    exit;
}
 
$token = $_POST['token'];
$action = $_POST['action'];
 
// post request to server
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array('secret' => $secretKey, 'response' => $token);

$options = array(
    'http' => array(
        'header' => "Content-type: application/x-www-form-urlencoded\r\n",
        'method' => 'POST',
        'content' => http_build_query($data)
    )
);
$context = stream_context_create($options);
$response = file_get_contents($recaptcha_url, false, $context);
$responseKeys = json_decode($response, true);
 
// verify the response
if ($responseKeys["success"] && $responseKeys["score"] >= 0.5 && $responseKeys["action"] == $action) {
    // valid submission
    // go ahead and do necessary stuff
} else {
    // spam submission
    // show error message
}

دراینجا نیاز است تا اطلاعات ارسال شده همراه ا فرم را در سرور گوگل چک کنیم. به همین منظور توکن و مقدار secret key ( پیش تر در مرحله 5 توضیح داده شد)  را به آدرس https://www.google.com/recaptcha/api/siteverify ارسال می کنیم و نتیجه دریافتی را چک می کنیم.

توجه : به جای مقدار YOUR_SECRET_HERE مقدار secret key دریافتی در پنل ادمین reCaptcha را وارد کنید.

در نهایت نتیجه به صورت یک شی JSON دریافت می شود که درون متغیر $arrResponse قرار می دهیم. همان طور که قبلا نیز توضیح داده شد باید وضعیت سه مورد success ،action و score را بررسی کنیم تا مطمئن شویم که فرم را انسان ارسال کرده است یا یک ربات.

در صورتی که کاربر ربات نباشد دستورات درون if و در غیر این صورت دستورات else اجرا خواهد شد.

اگر سوال یا مشکلی در این زمینه داشتید در زیر همین پست مشکل یا سوالتون رومطرح کنید.