Improvement of Php+jquery Registration Module (i): Verification Code Deposit session_php Instance

Several files that need to be modified:

①register.php generates random numbers and encrypted values

Change the register.html to register.php, and open the session;

Write the function of the random number in the register.js in the register.php, and use the PHP method instead

<?php session_start ();?
    > .... <?php//Generate random number function Showval () {$num = "";
      For ($i =0 $i <4; $i + +) {$tmp = rand (1,15);
            if ($tmp > 9) {switch ($tmp) {case (a): $num. = ' a ';
          Break
            Case (one): $num. = ' B ';
          Break
            Case (a): $num. = ' C ';
          Break
            Case (a): $num. = ' d ';
          Break
            Case (a): $num. = ' E ';
          Break
            Case (a): $num. = ' F ';
          Break
          } else {$num. = $tmp;
    } return $num;
  
  //Generate random number $mdnum = MD5 (Showval ());
  The random number and the encrypted random number are stored in session $_session[' num ' = Showval ();  
$_session[' mdnum ' = $mdnum; ?> <!--verification code--> <div class= "IPT iptend" > <input type= ' text ' id= ' yzm ' name= ' "Yzm '" placeholder= "Authentication Code" autocomplete= "Off"/>  ' style= "cursor:pointer" title= "Authenticode" alt= "Authenticode" > <a style= "cursor:pointer" id= ' Changea ' >  </a> <span id= ' yzmchk ' ></span> </div >

The generated 4-bit verification code and the MD5 encrypted authentication code are stored in session, and the client-side verification code picture of the src attribute parameter is the encrypted value, so the client does not appear in four-bit Authenticode text.

②valcode.php writes random numbers to graphics

In register.php, the address of the verification code picture is

 ' >

Therefore, in the valcode.php, it is necessary to make corresponding changes, the change is the original:

Direct transfer Client input value $num = $_get[' num '];

Modified to:

Session_Start ();
Header ("Content-type:image/png");

  Save generated 4-bit random number and MS5 encrypted random number
  if (isset ($_session[' mdnum ']) && $_session[' mdnum ']!= ' ") {
  
    $mdnum = $_session[' Mdnum '];
    
    if (isset ($_get[' num ')) && $_get[' num ']!= "") {
  
      //if
      ($_get[' num ') when the registration page passes over NUM and the encrypted random number in session is equal = $mdnum) {
      
        if (isset ($_session[' num ']) && $_session[' num ']!= ")

          //Assign the 4-bit random number saved in session to $num
          $ num = $_session[' num ']}
      }

That is, the encrypted parameters passed by the client picture are the same as the encrypted values saved in the session, and the 4-bit captcha stored in the session is written to the graphic.

The complete code for valcode.php is:

<?php session_start ();

  Header ("Content-type:image/png"); Save generated 4-bit random number and MS5 encrypted random number if (Isset ($_session[' mdnum ']) && $_session[' mdnum ']!= ' ") {$mdnum = $_sess
    
    ion[' Mdnum ']; if (isset ($_get[' num ')) && $_get[' num ']!= "") {//if ($_get[' num '] = = when the registered page passes over NUM and the encrypted random number in session is equal
          $mdnum) {if (Isset ($_session[' num ')] && $_session[' num ']!= ")//Assign the 4-bit random number saved in session to $num
      $num = $_session[' num '];
  }} $imagewidth = 150;
  
  $imageheight = 54;
  
  Create Image $numimage = Imagecreate ($imagewidth, $imageheight); 

  Assigns color to the image imagecolorallocate ($numimage, 240,240,240);
  
  Font size $font _size = 33;
  
  Font name $fontname = ' Arial.ttf ';
    
    Loops Generate picture text for ($i = 0; $i <strlen ($num); $i + +) {//Get the upper-left corner of the text x coordinates $x = Mt_rand (20,20) + $imagewidth * $i/5;
    
    Gets the y-coordinate of the upper-left corner of the literal $y = Mt_rand ($imageheight); Assign color to text $color = Imagecolorallocate ($numimage, Mt_rand (0, Mt_rand (0,150), Mt_rand (0,150));
  Write Text Imagettftext ($numimage, $font _size,0, $x, $y, $color, $fontname, $num [$i]);  //Generate the Noise code for ($i = 0; $i <2200; $i + +) {$randcolor = Imagecolorallocate ($numimage, Rand (200,255), Rand (200,255),
    Rand (200,255));
  Imagesetpixel ($numimage, Rand ()%180, Rand ()%90, $randcolor);
  ///Output Picture imagepng ($numimage);

Imagedestroy ($numimage); ?>

③register.js for verification

The validation section instead uses Ajax for validation, passing the input 4-bit captcha to the chkyzm.php file and comparing it to the 4-bit verification code saved in the session.

When the picture is refreshed, the 4-bit captcha is regenerated and the session is written with the cryptographic captcha. The code to regenerate the CAPTCHA is written in refresh.php and Ajax is used in Register.js to request the 4-bit CAPTCHA and encryption code to be regenerated, and through jquery, the value of the cryptographic captcha is used as the parameter of the SRC attribute of the picture, after the argument and session alignment VALCODE.P HP will regenerate the 4-bit captcha picture

The code for the Register.js Verification Code section is:

Verification Code Button $ ("#refpic"). Hover (function () {$ (this). attr ("src", "templets/images/refhover.jpg");
    },function () {$ (this). attr ("src", "templets/images/ref.jpg");
    }). MouseDown (function () {$ (this). attr ("src", "templets/images/refclick.jpg");
    }). MouseUp (function () {$ (this). attr ("src", "templets/images/ref.jpg");
    

    }); Refreshing the validation code function Postyzm () {$.post ("./..
      /refresh.php ", function (Data,textstatus) {$ (' #yzmpic '). attr (" src "," valcode.php?num= "+data);
    } $ (' #yzmpic '). Click (function () {POSTYZM ();

     });
    $ (' #changea '). Click (function () {POSTYZM ();

    }); Verification Code Validation Function Yzmchk () {$.post ("./..
        
        /chkyzm.php ", {//data to be passed Yzm: $ (" #yzm "). Val ()},function (data,textstatus) {
          if (data = = 0) {Success ($ ("#yzmchk"), "");
        Yzmval = true;
        
   }else if (data = 1) {       var noticemsg = ' Authentication code cannot be null ';
        Notice ($ ("#yzmchk"), noticemsg);
          }else{var errormsg = ' Please enter the correct authentication code ';
        Error ($ ("#yzmchk"), errormsg);
      
    }
      });
      }//Authenticode Blur event $ ("#yzm"). focus (function () {var noticemsg = ' case-insensitive ';
    Notice ($ ("#yzmchk"), noticemsg);
      ). Click (function () {var noticemsg = ' case-insensitive ';
    Notice ($ ("Yzmdchk"), noticemsg);
      }). KeyDown (function () {if (Event.keycode = = 13) {//check yzmchk ();
      }). KeyUp (function () {if (Event.keycode = 13) {//Submit formsub (); }). blur (function () {yzmchk ();});

chkyzm.php

<?php
session_start ();
Header ("Charset=utf-8");

if (Isset ($_post[' Yzm ')) && $_post[' yzm ']!= ' ") {

  $yzm = $_post[' Yzm '];

  if (isset ($_session[' num ')) && $_session[' num ']!= "") {

    //when the input CAPTCHA is consistent with Num saved in the session
    if (Strtolower ($ YZM) = = $_session[' num '] {
    
      //input correct
      $state = 0;
    } else{
    
      //input error
      $state = 2}
    }
  }
else{  
  
  //No input
  $state = 1;
}
echo $state;
? >

refresh.php

<?php 

session_start ();

Generate validation code
function Showval () {

  $num = "";
  For ($i =0 $i <4; $i + +) {

    $tmp = rand (1,15);
    if ($tmp > 9) {
      switch ($tmp) {case
        (a):
          $num. = ' a ';
          break;
        Case (one):
          $num. = ' B ';
          break;
        Case (a):
          $num. = ' C ';
          break;
        Case (a):
          $num. = ' d ';
          break;
        Case (a):
          $num. = ' E ';
          break;
        Case (a):
          $num. = ' F ';
          break;
      }
    } else {
      $num. = $tmp;
    }  
  }
  return $num;
}

$_session[' num '] = Showval ();
$_session[' mdnum '] = MD5 (Showval ());

echo $_session[' Mdnum '];

The effect displayed is as shown in figure:

Summarize:

5 Steps: The 4-bit verification code written to the session and then generated pictures, the parameters of the client picture using encrypted verification code, the input of the word Fu Tong session of the 4-bit verification code to compare, refresh the picture to regenerate 4-bit verification code and stored in the session, Use the re-production encryption verification code as the SRC parameter of the picture

A diagram can be expressed as:

(To be continued)