آموزش ساخت تصویر امنیتی ( کد کپتچا ) با php - وب سایت رضا احمدی

آموزش ساخت کدهای کپتچا در php

آموزش ساخت تصویر امنیتی ( کد کپتچا ) با php

در این آموزش با استفاده از زبان php یک تصویر امنیتی (CAPTCHA code – کد کپتچا ) تولید میکنیم سپس در یک صفحه html از این تصویر برای برسی اینکه یک درخواست کننده یک ربات نیست استفاده میکنیم.

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

این آموزش را بر پایه یک مثال توضحیم میدهیم ؛ یک فرم ساده طراحی میکنیم که شامل دو فیلد نام و کد امنیتی باشد سپس اگر کاربر کد امنیتی یا همان کد کپتچا را درست وارد کرد یک پیغام مناسب برای آن نمایش می دهیم.

طراحی فرم :

فرم تولید کد کپتچا
  1. <?php 
  2.     $msg="";
  3.     session_start();
  4.     if(isset($_POST['submit']) && isset($_POST['sec-code']) && isset($_POST['user-name']))
  5.     {
  6.         if($_POST['sec-code']==$_SESSION['captcha-code'])
  7.             $msg=$_POST['user-name'].'خوش آمدید .';
  8.         else
  9.             $msg='کد امنیتی اشتباه است.';
  10.     }
  11. ?>
  12. <!DOCTYPE html>
  13. <html dir="rtl">
  14.     <head>        
  15.         <title> create captcha example by MRZX.r</title>
  16.         <style>
  17.             body{background:#eee;text-align:center;font-size:14pt;}
  18.             form{padding:20px;margin:auto;width:400px;}
  19.             form input[type='text']{border:1px solid #0ec2ff;padding:5px;margin:5px auto;}
  20.             form input[type='submit']{border:1px solid #0e00ff;background:#0ec2ff;
  21.                 padding:4px;border-radius:5px;cursor:pointer;}
  22.             form input[type='submit']:hover{background:#0e00ff;}
  23.             #msg{font-size:16pt;font-weight:bold;margin:20px auto;}
  24.             .mrzx{color:#F0F;font-weight:bold;}
  25.         </style>
  26.     </head>
  27.     <body>        
  28.         <h3>فرم زیر را تکمیل کنید: </h3>
  29.         <form action="" method="post">
  30.             <input type="text" name="user-name" placeholder="نام"><br>
  31.             <img src="captcha.php"><br>
  32.             <input type="text" name="sec-code" placeholder="کد امنیتی"><br>
  33.             <input type="submit" name="submit" value="ثبت">
  34.         </form>
  35.         <div id="msg">
  36.             <?php echo $msg;?>
  37.         </div>
  38.         <div class="mrzx"> MRZX.ir </div>
  39.     </body>
  40. </html>

در این فرم هر گاه کاربر بر روی کلید ثبت کلیک کرد اگر همه فیلد های پر شده باشند مقدار session کد کپچا را با مقدار وارد شده توسط کاربر چک میکند اگر برابر بودند پیغام خوش آمدید و در غیر این صورت پیغام کد اشتباه است نمایش داده می شود. توجه نمایید این پیغام در متغییر $msg ذخیره و در خط 36 به کاربر اکو می شود.

همانطور که می بینید درخط 31 یک المنت تصویر ایجاد شده و آدرس کپتچا به آن داده شده است. و اما کد php کپتچا به شرح زیر است.

سورس تولید کد کپتچا :

  1. <?php   
  2.         header('Content-Type: image/png');
  3.         session_start();
  4.         $im = imagecreate(75, 40)or die("Cannot Initialize new GD image stream");
  5.         $background_color = imagecolorallocate($im, 250, 250, 100); 
  6.         $red = imagecolorallocate($im, 255, 100, 100);
  7.         $blue = imagecolorallocate($im,100,100,255);
  8.         $green = imagecolorallocate($im,100,255,100);
  9.         $white=imagecolorallocate($im,250,250,250);
  10.  
  11.         $num=rand(1001,9999);
  12.         $strnum=$num."";
  13.         $_SESSION["captcha-code"]=$num;
  14.  
  15.         for($i=0;$i<3;$i++){
  16.         imageline ($im,  rand(2,35),  rand(0,45), rand(40,73), rand(10,40), $red);
  17.         imageline ($im,  rand(2,35),  rand(0,45), rand(40,73), rand(10,40), $blue);        
  18.         imageline ($im,  rand(2,35),  rand(0,45), rand(40,73), rand(10,40), $green);
  19.         imagefilledellipse($im, rand(2,70),  rand(0,45), 10, 10, $white);
  20.         imagefilledellipse($im, rand(2,70),  rand(0,45), 5, 10, $green);
  21.         imagefilledellipse($im, rand(2,70),  rand(0,45), 5, 5, $blue);
  22.         imagefilledellipse($im, rand(2,70),  rand(0,45), 7, 12, $red);
  23.         }
  24.  
  25.         $ff=dirname(__FILE__) . '/font.ttf';  
  26.  
  27.         imagettftext($im, 22,0, 5,  rand(20,30),imagecolorallocate($im, rand(0,50), rand(0,100),rand(50,150)),$ff,$strnum[0] );
  28.         imagettftext($im, 22,0, 22,  rand(20,30),imagecolorallocate($im, rand(0,50), rand(0,100),rand(50,150)),$ff,$strnum[1] );
  29.         imagettftext($im, 22,0, 38,  rand(20,30),imagecolorallocate($im, rand(0,50), rand(0,100),rand(50,150)),$ff,$strnum[2] );
  30.         imagettftext($im, 22,0, 52,  rand(20,30),imagecolorallocate($im, rand(0,50), rand(0,100),rand(50,150)),$ff,$strnum[3] );
  31.  
  32.         imagepng($im);
  33.  
  34.         imagedestroy($im);     
  35.     ?>

شرح سورس :

بتدا نوع این فایل php یک فایل تصویری از نوع pnp تنظیم شده.سپس با دستور start_session() گفته شده که این فایل قرار است سشن ها را بخواند یا ایجاد کند.

برای کار با عکس توابع زیادی در php وجود دارد که در اینجا با چند تا از آن ها تصویر مورد نظر را ساخته ایم.

تابع imagecreate (w,h) یک عکس با طول و عرض مشخص ایجاد میکند.

تابع imagecolorallocate یک رنگ که قرار است در یک تصویر استفاده شود را ایجاد میکند.

تابع imageline ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color ) یک خط از نقطه x1,y1 تا نقطه x2,y2 با رنگ مشخص درون یک عکس قرار میدهد.

تابع imagefilledellipse ( resource $image , int $cx , int $cy , int $width , int $height , int $color ) یک شکل بیضی ایجاد میکند

تابع imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text ) برای قرار دادن یک مت یا کلمه با فونت و سایت مشخص در درون یک تصویر کاربرد دارد.

در اینجا ابتدا با استفاده از دستور rand(1001,9999) یک عدد تصادفی بین 1001 تا 9999 یعنی یک عدد چهار رقمی تولید می شود سپس این ارقام را درون یک رشته این رشته را درون سشن مورد نظر میرریزیم.

با استفاده از تابع imagettftext هر کدام از کاراکتر های این رشته را بر روی تصویر قرار می دهیم دلیل اینکه هر کدام از این رقم ها جدا گانه قرار داده ایم این است که مکان اعداد بر روی تصویر ثابت نباشد و هر بار که این تصویر فرا خوانده میشود هر کدام از این ارقام مقداری مکان x,y آن ها تغییر میکند.

در اخر این فایل تصویر را با استقاده از متد imagepng($im); تولید و به کاربر نمایش می دهیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دیدگاه های ثبت شده

    siavash | ۰۱ خرداد ۱۳۹۹

    آقا دمت گرم چرا ادامه نمیدی؟

      رضا احمدی | ۰۸ خرداد ۱۳۹۹

      قربونت.ادامه داره ولی فعلا وقت نوشتن ندارم….


    یونس اسیردار | ۱۷ بهمن ۱۴۰۱

    خوب