רוצה לעזור?
אם אתה מעוניין לעזור לנו בפיתוח האתר, באפשרותך לשלוח מאמר\מדריך אל רשימות המאמרים שלנו, תודה על שיתוף הפעולה, הנהלת האתר.
|
|
דף ראשי -> תכנות ובניית אתרים -> תיכנות ובניית אתרים בעזרת PHP -> אימות שליחת FORM עם תמונה דינאמית
|
| אימות שליחת FORM עם תמונה דינאמית |
|
|
כאשר אתה בונה מערכת כלשהי עם FORM לדוגמא הרשמה אז צריך למגן את ההרשמה כנגד "הרשמה רובוטית" או הרשמות ספאם על ידי סקריפט זדוני כלשהו. אפשר לבצע את ההגנה הזו בעזרת יצירת תמונה דינאמית בPHP (ושימוש בתיקית GD) כאשר בתמונה הדינאמית כל פעם יופיע מספר או רצף של אותיות ומספרים והמשתמש יצטרך להקליד אותם לתוך תא ולאמת את העובדה שהוא בן-אדם ולא רובוט.
רובוטים לרוב לא יכולים לקרא את מה שתכתבו על התמונה, אבל אם תעשו את התמונה קלה מידי אז ישנם רובוטים מתוחכמים שכן יוכלים לקרא את מה שכתבתם על הרובוט ובכך לפתוח לכם במערכת חור אבטחה רציני.
לפני זה עליכם לדעת שספרית GD לרוב לא זמינה בשרתים ביתיים (לדוגמא בחבילת wamp5 שמתקינים בשרת ביתי), אך לרוב בשרתים קנויים הסיפריה הזו כן זמינה בלי הסיפריה לא נוכל ליצור תמונה דינאמית שתשנה כל רענון ותעשה את העבודה הרצויה...
|
|
המלצות שלנו לגבי שימוש נכון בשיטת האבטחה הזו הן ראשית כל בשורה אחת או שניים להסביר למשתמש מה הוא צריך לעשות עם התמונה, שנית לא להשים יותר מדי תווים בתוך התמונה אנחנו רק רוצים לסגור את חור האבטחה לא לעצבן את המשתמש!
בתחילה, צור קובץ בשם random_image_sample.php. הקובץ הזה יכיל את קוד התמונה הדינאמית שלנו.
הקוד שיהיה בתוך הקובץ radom_image_sample.php הוא:
|
קוד
|
//התחלת session
session_start();
//יצירת פונקציה
function random_string($len=5, $str='')
{
for($i=1; $i<=$len; $i++)
{
//יצירת מספר אקראי שיהיה ASCII.
$ord=rand(48, 90);
if(( ($ord >= 48) && ($ord <= 57)) <?php (($ord >= 65) && ($ord <= 90) ))
$str.=chr($ord);
//אם המספר לא טוב, אז אנו מוציאים אחד חדש
else
$str.=random_string(1);
}
return $str;
}
//יצירת מחרוזת אקראית בת 5 תווים (אפשר לשנות את מס' התווים)
$rand_str=random_string(5);
//אנחנו מצפינים את המחרוזת האקראית ושומרים אותה בתוך session
$_SESSION['image_value'] = md5($rand_str);
//הכנסת כל תוו בתוך משתנה אחר
$letter1=substr($rand_str,0,1);
$letter2=substr($rand_str,1,1);
$letter3=substr($rand_str,2,1);
$letter4=substr($rand_str,3,1);
$letter5=substr($rand_str,4,1);
//יצירת התמונה בסיומת png. ניתן ליצור גם בסיומת gif או jpg על ידי שימוש ב- imagecreatefromjpeg ו- imagecreatefromgif.
$image=imagecreatefrompng("images/noise.png");
//Get a random angle for each letter to be rotated with.
$angle1 = rand(-20, 20);
$angle2 = rand(-20, 20);
$angle3 = rand(-20, 20);
$angle4 = rand(-20, 20);
$angle5 = rand(-20, 20);
//פונט אקראי לכל אות\מספר (בדוגמא הזו הפונטים נמצאים בתיקיה "fonts" ושמם זה 1 .ttf עד אל 10.ttf)
$font1 = "fonts/".rand(1, 10).".ttf";
$font2 = "fonts/".rand(1, 10).".ttf";
$font3 = "fonts/".rand(1, 10).".ttf";
$font4 = "fonts/".rand(1, 10).".ttf";
$font5 = "fonts/".rand(1, 10).".ttf";
//הגדרת הצבעים של האותיות( הערכים הם ב RGB).
$colors[0]=array(122,229,112);
$colors[1]=array(85,178,85);
$colors[2]=array(226,108,97);
$colors[3]=array(141,214,210);
$colors[4]=array(214,141,205);
$colors[5]=array(100,138,204);
//קבלת צבע אקראי לכל מילה
$color1=rand(0, 5);
$color2=rand(0, 5);
$color3=rand(0, 5);
$color4=rand(0, 5);
$color5=rand(0, 5);
//Allocate colors for letters.
$textColor1 = imagecolorallocate ($image, $colors[$color1][0],$colors[$color1][1], $colors[$color1][2]);
$textColor2 = imagecolorallocate ($image, $colors[$color2][0],$colors[$color2][1], $colors[$color2][2]);
$textColor3 = imagecolorallocate ($image, $colors[$color3][0],$colors[$color3][1], $colors[$color3][2]);
$textColor4 = imagecolorallocate ($image, $colors[$color4][0],$colors[$color4][1], $colors[$color4][2]);
$textColor4 = imagecolorallocate ($image, $colors[$color5][0],$colors[$color5][1], $colors[$color5][2]);
$size = 20;
imagettftext($image, $size, $angle1, 10, $size+15, $textColor1, $font1, $letter1);
imagettftext($image, $size, $angle2, 35, $size+15, $textColor2, $font2, $letter2);
imagettftext($image, $size, $angle3, 60, $size+15, $textColor3, $font3, $letter3);
imagettftext($image, $size, $angle4, 85, $size+15, $textColor4, $font4, $letter4);
imagettftext($image, $size, $angle5, 110, $size+15, $textColor5, $font5, $letter5);
header('Content-type: image/jpeg');
//פליטת התמונה לדפדפן
imagejpeg($image);
//הריסת התמונה
imagedestroy($image);
|
הערה: בקובץ הזה אנו משתמשים ב- Session כדי לשמור את רצף התווים שיופיע על התמונה בכדי שלאחר שליחת הטופס נוכל להשוות בין ה-Session לבין התוכן של המשתנה הגלובאלי של התא שאליו המשתמש התבקש להקליד את רצף התווים שעל התמונה (במקרה הזה אנו משווים את number שם התא אל ה-Session הקרוי image_value).
בקובץ הקודם אנו הצפנו את ה-Session כדי להפוך אותו ליותר מאובטח, וכדי להשוות בניהם אנו נצפין גם את רצף התווים שהמשתמש שולח (שיטת ההצפנה MD5).
הקובץ הבא הוא קובץ ה HTML שבו אנו נשלב את הקודים הקודמים, לקובץ אנו נקרא random_sample.html.
|
|
|
קוד
|
<?php
session_start();
?>
<HTML>
<HEAD>
<TITLE>תמונה אקראית פשוטה</TITLE>
</HEAD>
<BODY>
<?php
$errors=0;
if(isset($_POST['Submit']))
{
$number = $_POST['number'];
if(md5($number) != $_SESSION['image_value'])
echo '<h1>אין אימות בין המחרוזות, אנא נסה שנית.</h1>';
else
{
echo '<h1>יש אימות בין המחרוזות</h1>';
}
}
?>
<form name="form1" method="post" action="random_sample.php">
<table cellspacing="0" width="600" align="center">
<tr><td valign="top" align="right">תוכן ההודעה</td>
<td><input name="message" size=40 value="כתוב הודעה">
</td></tr>
<tr><td colspan=2 align="center">
<font size="1" face="Geneva, Arial, Helvetica, sans-serif"><strong><font size="2">
בבקשה הכנס את המחרוזת למטה אל תוך התא
.
האותיות הן מ- A עד Z ובמספרים זה מ- 0 עד ל- 9.
</font></td></tr>
<tr><td align="center" colspan=2><input name="number" type="text" id=\"number\"></td></tr>
<tr><td colspan=2 align="center"><img src="random_image.php"></td></tr>
<tr><td colspan=2 align="center"><input name="Submit" type="submit"
value=" שלח "></td></tr>
</table>
</form>
</BODY>
</HTML>
<--
נכתב על ידי:
http://www.reconn.us/random_image.html
תורגם על ידי
http://www.themador.org
-->
|
הקובץ random_sample.html רק משלב את הקובץ הראשון בתוכו, זאת אומרת אפשר להשתמש עם הקובץ הראשון בתוך כל FORM שאתם רוצים אם זה הרשמה או כל דבר דומה, אך צריך לשלב את הקובץ הראשון בצורה הנכונה.
לחץ כאן בכדי להגיע לדמו באנגלית של התוצאה הסופית.
המדריך נכתב על בסיס המדריך הזה אך נוספו לו עוד הסברים בעיברית. |
| דפים נוספים בקטגוריה תיכנות ובניית אתרים בעזרת PHP |
קבלת נתונים מטפסים ואבטחה
ניווט אתר בעזרת include ו-switch ואבטחה
שימוש ב- sessions
|
| עיזרו לנו |
|
אהבת את המדריך? הצבע עבורנו וקדם את האתר שלנו!
|
|
