Improvement of PHP + jQuery registration module (1): Saving the verification code to the SESSION

This article mainly improves the model of the previous article, writing the verification code into the SESSION instead of returning the text of the verification code to the hidden domain of the client. Otherwise, the meaning of the verification code will no longer exist. jQuery

Several files to be modified:

① Register. php generates random numbers and encryption values

Change register.html to register. php and enable the session;

Write the random number generation function in register. js in register. php and use the php method instead.

<? Php session_start ();?> .... <? Php // Generate the random number function showval () {$ num = ""; for ($ I = 0; $ I <4; $ I ++) {$ tmp = rand (1, 15); if ($ tmp> 9) {switch ($ tmp) {case (10): $ num. = 'a'; break; case (11): $ num. = 'B'; break; case (12): $ num. = 'C'; break; case (13): $ num. = 'd'; break; case (14): $ num. = 'e'; break; case (15): $ num. = 'F'; break;} else {$ num. = $ tmp ;}return $ num;} // Generate a random number $ mdnum = md5 (showval (); // Save the random number and the encrypted random number to the session $ _ SESSION ['num'] = showval (); $ _ SESSION ['mdnum'] = $ mdnum;?>
   
    'Style = "cursor: pointer" title = "verification code" alt = "verification code">

The generated four-digit verification code and the md5-encrypted verification code are both stored in the session, while the src attribute parameter of the client verification code image is the encrypted value, therefore, no four verification codes are displayed on the client.

② Valcode. php writes random numbers to the image

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

' >

Therefore, in valcode. php, you need to modify the following parameters:

// Directly transfer the value entered by the client $ num =$ _ GET ['num'];

To:

Session_start (); header ("content-type: image/png "); // The four-digit random number stored in the session and the random number encrypted by ms5 if (isset ($ _ SESSION ['mdnum']) & $ _ SESSION ['mdnum']! = "") {$ Mdnum = $ _ SESSION ['mdnum']; if (isset ($ _ GET ['num']) & $ _ GET ['num']! = "") {// If ($ _ GET ['num'] = $ mdnum) when the num passed on the registration page and the encrypted random number in the session are equal) {if (isset ($ _ SESSION ['num']) & $ _ SESSION ['num']! = "") // Assign the four random numbers saved in the session to $ num =$ _ SESSION ['num'] ;}}

That is, when the encrypted parameters passed by the client image are the same as the encrypted values saved in the session, the four verification codes saved in the session are written into the image.

The complete valcode. php code is:

<? Php session_start (); header ("content-type: image/png "); // The four-digit random number stored in the session and the random number encrypted by ms5 if (isset ($ _ SESSION ['mdnum']) & $ _ SESSION ['mdnum']! = "") {$ Mdnum = $ _ SESSION ['mdnum']; if (isset ($ _ GET ['num']) & $ _ GET ['num']! = "") {// If ($ _ GET ['num'] = $ mdnum) when the num passed on the registration page and the encrypted random number in the session are equal) {if (isset ($ _ SESSION ['num']) & $ _ SESSION ['num']! = "") // Assign the four random numbers saved in the session to $ num =$ _ SESSION ['num'] ;}}$ imagewidth = 150; $ imageheight = 54; // create an image $ numimage = imagecreate ($ imagewidth, $ imageheight); // assign the imagecolorallocate color to the image ($ numimage, 240,240,240 ); // font size $ font_size = 33; // font name $ fontname = 'Arial. ttf'; // generate the image text in a loop ($ I = 0; $ I
 

③ Register. js verification

The verification part is changed to Ajax for verification. the 4-digit verification code entered is passed to the chkyzm. php file and compared with the 4-digit verification code saved in the session.

When refreshing the image, generate a four-digit verification code and write it into the session together with the encryption verification code. The code for re-generating the verification code is written in refresh. php, and in register. in js, ajax is used to request the re-production of the four-digit verification code and the encryption verification code. jQuery uses the value of the encryption verification code as the parameter of the src attribute of the image. after the parameter is compared with the session, valcode is returned. php will re-generate an image with four verification codes

The code of 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") ;}); // refresh the verification 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 test function yzmchk () {$. post (". /.. /chkyzm. php ", {// the data to be passed yzm: $ (" # yzm "). val ()}, function (data, textStatus) {if (data = 0) {success ($ ("# yzmchk"), ""); yzmval = true ;} else if (data = 1) {var noticeMsg = 'verification code cannot be blank '; notice ($ ("# yzmchk"), noticeMsg );} else {var errorMsg = 'Enter the correct verification code '; error ($ ("# yzmchk"), errorMsg );}});} // blur event of the verification code $ ("# 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) {// verify yzmchk ();}}). keyup (function () {if (event. keyCode = 13) {// submit formsub ();}}). blur (function () {yzmchk ();});

Chkyzm. php

<? Phpsession_start (); header ("charset = utf-8"); if (isset ($ _ POST ['yzm']) & $ _ POST ['yzm']! = "") {$ Yzm = $ _ POST ['yzm']; if (isset ($ _ SESSION ['num']) & $ _ SESSION ['num']! = "") {// If (strtolower ($ yzm) ==$ _ session ['num']) when the entered verification code is the same as the num saved in the SESSION {// enter the correct $ state = 0;} else {// input error $ state = 2 ;}} else {// no $ state = 1;} is input ;} echo $ state;?>

Refresh. php

<? Php session_start (); // Generate the verification code function showval () {$ num = ""; for ($ I = 0; $ I <4; $ I ++) {$ tmp = rand (1, 15); if ($ tmp> 9) {switch ($ tmp) {case (10): $ num. = 'a'; break; case (11): $ num. = 'B'; break; case (12): $ num. = 'C'; break; case (13): $ num. = 'd'; break; case (14): $ num. = 'e'; break; case (15): $ num. = 'F'; break;} else {$ num. = $ tmp ;}return $ num ;}$ _ SESSION ['num'] = showval (); $ _ SESSION ['mdnum'] = md5 (showval ()); echo $ _ SESSION ['mdnum'];

Display effect

Summary:

Five steps: write the four-digit verification code into the session to generate an image. the parameters of the client Image use the encrypted verification code to compare the entered characters with the four-digit verification code in the SESSION, refresh the image to generate a four-digit verification code and save it to the session. the re-produced encryption verification code is used as the src parameter of the image.

The following figure can be used:

(To be continued)