آموزش ساخت تصویر تصادفی امنیتی در php

فکر کنم بدانید که تصاویر تصادفی امنیتی (captcha) چه کاربردی دارد و چیست! اما با این حال توضیح می دهم. در سایت هایی که در آن ها فرم وارد کردن اطلاعات وجود دارد ، یک سری موارد باید رعایت شود. این موارد به امنیت این فرم ها و امنیت سایت کمک می کند و از حمله ی نفوذی هکر ها جلوگیری می کند. یکی از روش های معمول ایجاد این امنیت ، تصاویر امنیتی است که کاربر در هر بار استفاده از یک فرم باید حروف یا اعداد داخل یک تصویر (که به صورت تصادفی نمایش داده می شود) را همراه با اطلاعات فرم ارسالی وارد کند. بعد از این که ، مقدار وارد شده توسط کاربر به سمت سرور ارسال شد ، در آن جا این مقدار بررسی می شود و اگر درست بود ، ادامه ی عملیات انجام می شود.

یک نمونه تصویر امنیتی:

برای این که بهتر متوجه شوید می توانید صفحه را یک بار رفرش کنید. خواهید دید که تصویر بالا تغییر کرده است. اما چرا این تصاویر باعث می شوند که امنیت فرم ها بالا برود؟

خب! دلیل کاملا واضح است. اعداد یا حروفی که داخل این تصاویر امنیتی نمایش داده می شوند ، توسط ماشین ها (همان برنامه های هک) قابل شناسایی نیست (این موضوع باعث می شود که برای ارسال یک فرم ، به یک انسان نیاز باشد و سرعت وارد کرد اطلاعات از سوی انسان بسیار پایین تر از ماشین است). البته نمی گویم که به هیچ وجه نمی توان با استفاده از یک برنامه ، نوشته ی درون این تصاویر را خواند. اما ایجاد چنین چیزی بسیار وقت گیر است و هیچ کس برای سایت های کوچکی مثل سایت های ما ، چنین کاری را انجام نمی دهد.

نکته: اگر می خواهید این مطلب را متوجه شوید باید با php آشنایی داشته باشید. برای آشنایی با این زبان برنامه نویسی اینجا کلیک کنید.

آموزش ایجاد تصویر تصادفی کپچا با استفاده از php

برای شروع ابتدا کد های زیر را در فایلی به نام captcha.php کپی کنید و آن ها را اجرا کنید:

<<<code>>>

<?php

    session_start(); // شروع یک نشست

    $number = rand(100,999999); // ایجاد یک عدد تصادفی

    $_SESSION['captcha'] = $number; // ذخیره عدد در نشست

    $img = imagecreate(150,30); // ایجاد یک تصویر 30×150

    imagecolorallocate($img,255,255,255); // ایجاد رنگ پس زمینه

    $color=imagecolorallocate($img,0,0,0); // ساخت یک رنگ

    imagettftext($img,30,0,0,26,$color,"bmehr.ttf",$number); // وارد کردن عدد تصادفی در تصویر

    header("content-type: image/png"); // تعیین نوع فایل خروجی

    imagepng($img); // نمایش تصویر

?>

<<</code>>>

توجه کنید که اگر هم اکنون این کد را اجرا کنید ، خطا در خط 8 دریافت خواهید کرد. این خطا مربوط به این موضوع است که فایل فونت bmehr.ttf یافت نمی شود. برای رفع این مشکل شما می توانید این فونت را از اینجا دانلود کنید. بعد از دانلود آن را درون پوشه ی فایل بالا قرار دهید تا مشکل رفع شود.

قسمت قرمز رنگ: در این قسمت ما نشست (session) را شروع می کنیم. نشست در php مربوط به یک سری اطلاعات است که به صورت کد شده در مرورگر کاربر ذخیره می شود و شما با استفاده از این قسمت می توانید یک نشست جدید را شروع کنید.

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

در خط بعدی من مقدار عدد تصادفی را در نشست ذخیره کرده ام. برای ذخیره ی اطلاعات در Session باید اینطور عمل کرد:

<<<code>>>

$_SESSION['name'] = value ;

<<</code>>>

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

قسمت بنفش رنگ: اندازه ی طول و عرض تصویر.

قسمت سبز رنگ: این قسمت که در تابع imagecolorallocate قرار دارد ، به ترتیب نشان دهنده ی مقادیر رنگ های قرمز ، سبز و آبی است. مقدار هر یک از این رنگ ها می تواند بین 0 تا 255 باشد. در خط بعدی با استفاده از همین تابع من یک رنگ برای متن ایجاد کرده ام.

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

<<<code>>>

imagettftext( image , size , angle , x , y , color , font-file , text );

<<</code>>>

قسمت های قرمز رنگ مربوط به یک سری مقادیر است که به ترتیب نشان دهنده ی تصویر (نتیجه ی تابع imagecreate) ، اندازه ی متن ، زاویه ی متن ، محل X ، محل Y ، رنگ متن ، فایل مربوط به فونت متن ، خود متن است.

توضیح درباره ی header در php

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

در نهایت تابع imagepng ، تصویر ما را کامل می کند و به نمایش می گذارد.

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

<<<code>>>

if( $_SESSION['captcha'] == $_POST['cap'] )

   echo "it is true";

else

   echo "it is false";

<<</code>>>

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

سوالات:

• چگونه می توان دو تصویر کپچا در یک صفحه و با استفاده از یک فایل ایجاد کرد ، به گونه ای که هر دو به درستی کار کنند و بتوان مقادیر آن ها را بررسی کرد؟
• چگونه می توان برای متن تصویر تصادفی ، رنگ تصادفی ایجاد کرد؟
• چگونه می توان خواندن تصویر تصادفی را با استفاده از خط ها ، نقطه ها و دیگر موارد سخت تر کرد؟