Ajax provides a beautiful and secure logon interface, while ajax provides a logon interface.

Ajax provides a beautiful and secure logon interface, while ajax provides a logon interface.

The logon interface is a required function provided by the information system and an interface for users to maintain information. Next, I will help you build a beautiful and secure logon interface using ASP. NET + jQuery.

Let's take a look at the preview effect.

Ajax logon focuses on Ajax. after entering the user name and password, the information is submitted to the server using Ajax. The server determines that the user exists, if a cookie exists, the logon succeeds and you are redirected to the Management Interface (sometimes you need to write a cookie or use the Session, which is not discussed here). If the cookie does not exist, the logon fails.

Basic FlowchartAs follows:

The above is the main idea. To create a secure login, we can use MD5 to encrypt the password before sending it to the server using ajax. Of course, the encrypted string is stored in the database. JQuery has such an MD5 encryption plug-in, which is very convenient to use.

The process is ready for implementation. The following are some of the main code:

Default. aspx: provides hyperlinks. Click to call thickbox to open the pop-up page.

<Div style = "margin-left: 50px; margin-top: 50px;"> welcome to the background. <a href = "Login.htm? TB_iframe & height = 180 & width = 350 & modal = true "class =" thickbox "id =" myToolTip "title =" click to log on, go to background management "> click to log on! </A> continue to browse the foreground and <a href = ".../Default. aspx"> return to the foreground </a>

Login.htm: Real logon interface, responsible for Logon Logic

<Script type = "text/javascript" src = "javascript/jquery-1.3.2.js"> </script> <script type = "text/javascript"> $ (). ready (function () {$ ('# login '). click (function () {if ($ ('# username '). val () = "" | $ ('# password '). val () = "") {alert ("the user name or password cannot be blank! ");} Else {$. ajax ({type: "POST", url: "Ajax/LoginHandler. ashx ", data:" username = "+ escape ($ ('# username '). val () + "& password =" + escape ($ ('# password '). val (), beforeSend: function () {$ ("# loading" ).css ("display", "block"); // After logging on, loading is displayed, hide the input box $ ("# login" cmd.css ("display", "none") ;}, success: function (msg) {$ ("# loading "). hide (); // hide loading if (msg = "success") {// parent. tb_remove (); paren T.doc ument. location. href = "admin.htm"; // If the logon is successful, go to the Management Interface (parent. tb_remove ();} if (msg = "fail") {alert ("Logon Failed! ") ;}}, Complete: function (data) {$ (" # loading ").css (" display "," none "); // click" Log on "to display loading, hide the input box $ ("# login" ).css ("display", "block") ;}, error: function (XMLHttpRequest, textStatus, thrownError) {}}) ;}}) ;}); </script> <div id = "loading" style = "text-align: center; display: none; padding-top: 10% ">  </div> <div id =" login "style =" text-align: center "> <div style =" position: absolute; right: 0; top: 0 ">  </div> <table border =" 0 "cellpadding =" 3 "cellspacing =" 3 "style =" margin: 0 auto; "> <tr> <td style =" text-align: right; padding: 10px "> <label> User Name: </label> </td> <input id = "username" type = "text" size = "20"/> </td> </tr> <tr> <td style = "text-align: right; padding: 10px "> <label> password: </label> </td> <input id = "password" type = "password" size = "20"/> </td> </tr> <tr align = "right"> <td colspan = "2"> <input type = "submit" id = "Login" value = "Login" style = "margin-right: 50px "> <input type =" submit "id =" LoginCancel "value =" Remove "onclick =" parent. tb_remove () "> </td> </tr> </table> </div>

LoginHandler. ashx: ajax processing class, simple logic

String username = context. request ["username"]. toString (); string password = context. request ["password"]. toString (); // context. response. write (password); If encryption is used, the fields to be encrypted in the database will be written, and then the encrypted string will be used to match upon login // connect to the database to check whether this user exists, for convenience, determine if (username = "admin" & password = "1") {context. response. write ("success"); // store session} else {context. response. write ("fail ");}

OK. A simple logon function is complete. Of course, no password is encrypted during logon.

Next, let's take a look at the MD5 plug-in of jQuery's encryption plug-in. It is very convenient to use. You can use the $. md5 () function to encrypt strings by adding md5.js references,
The following code is slightly changed to see the encrypted string,
Login.htm:

Data: "username =" + escape ($ ('# username '). val () + "& password =" + $. md5 (escape ($ ('# password '). val (), success: function (msg) {$ ("# loading "). hide (); // hide loading alert (msg); if (msg = "success") {// parent. tb_remove (); parent.doc ument. location. href = "admin.htm"; // If the logon is successful, go to the Management Interface (parent. tb_remove ();} if (msg = "fail") {alert ("Logon Failed! ");}}

In LoginHandler. ashx, add the password to return:

Context. Response. Write (password );

OK. When you run the program again, the MD5 encrypted string of the password is displayed.

The above is a simple view, with the following link: AjaxLogin

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.