Examples of AJAX implementation of a beautiful, secure login interface

This article is mainly for everyone to introduce the AJAX implementation of a beautiful, secure login interface method, with a certain reference value, interested in small partners can refer to, hope to help everyone.

The login interface is an essential feature provided by the information system and an interface to provide maintenance information to the user. Next, I will lead you to create a beautiful, secure login interface, using the technology is Asp.net+jquery

Let's take a look at the preview effect

Ajax login Focus on Ajax, enter the user name and password, the use of Ajax to submit information to the server side, the server-side judgment when the user exists, the login succeeds and to the management interface (sometimes need to write a cookie or use the session, not discussed here), Does not exist then prompt for logon failure.

The Basic Flowchart is as follows

Above is the main idea, in order to create a secure login, before using AJAX to pass the password to the server side, we can use MD5 to encrypt the password, of course, the database is also stored in the encrypted string. jquery has a MD5 encryption plugin that is easy to use.

Process know, it can be easily implemented. Here are some of the main code

Default.aspx: The main is to provide hyperlinks, click Will call Thickbox, open the popup page.

<p style= "margin-left:50px; margin-top:50px; "> Welcome to use Backstage, <a href=" login.htm? Tb_iframe&height=180&width=350&modal=true "class=" Thickbox "id=" Mytooltip "title=" Click Login, go to admin > Click to login! </a>                continue to view the front desk, <a href= ". /default.aspx "> Back to Reception </a>

Login.htm: Real Login interface, responsible for login logic

<script type= "Text/javascript" src= "js/jquery-1.3.2.js" ></script><script type= "Text/javascript" > $ (). Ready (function () {$ (' #Login '). Click (function () {if ($ (' #username '). val () = = "" | | $ (' #password '). val () = = "") {alert ("username or password cannot be empty!")   "); } else {$.ajax ({type: "POST", url: "Ajax/loginhandler.ashx", Data: "Username=" + Escape ($ (' #username '). Val ()) + "&password=" + Escape ($ (' #password '). Val ()), Beforesend:function () {$ ("#loading"). CSS ("Display", "Block");     Click Sign in to show loading, hide input box $ ("#login"). CSS ("display", "none"); }, Success:function (msg) {$ ("#loading"). Hide ();//Hides loading if (msg = = "Success") {//parent.tb_rem       Ove (); Parent.document.location.href = "admin.htm";      If login is successful, skip to admin interface Parent.tb_remove (); } if (msg = = "fail") {Alert ("Login failed!      "); }}, Complete:function (data) {$ ("#loading"). CSS ("display", "none");//click Show loading after login, hide input box $ ("#login" ). CSS ("diSplay "," block ");   }, Error:function (XMLHttpRequest, Textstatus, Thrownerror) {}}); }  }); }); </script><p id= "Loading" style= "text-align:center; Display:none; padding-top:10% "> </p><p id=" Login "style=" Text-align:center "><p style=" Position:absolute; right:0; top:0 "> </p> <table border= "0" cellpadding= "3" cellspacing= "3" style= "margin:0 auto;" > <tr> <td style= "text-align:right; padding:10px "> <label> user name:</label> </td> <td> <input id=" username "type=" Tex T "size="/> </td> </tr> <tr> <td style= "text-align:right; padding:10px "> <label> password:</label> </td> <td> <input id=" password "type=" pass Word "size="/> </td> &LT;/TR&GT <tr align= "Right" > <td colspan= "2" > <input type= "Submit" id= "Login" value= "login" style= "Margin-righ  t:50px "> <input type=" Submit "id=" Logincancel "value=" Cancel "onclick=" Parent.tb_remove () "> </td> </tr> </table></p>

LoginHandler.ashx:ajax processing classes, simple logic

String username = context. request["username"]. ToString (); string password = context. request["Password"]. ToString ();//context. Response.Write (password); If you use encryption, write to the database to encrypt the field, and then log in with the encrypted string match//here to connect to the database to see if there is a user, here for convenience, directly determine if (username = = " Admin "&& Password = =" 1 ") {context. Response.Write ("Success"); Store session} else {context. Response.Write ("fail"); }

OK, a simple login function is completed, of course, there is no password encryption at the time of login.

Let's take a look at jquery's cryptographic plug-in MD5 plug-in, which is convenient to use, adding a md5.js reference can use the $.MD5 () function to encrypt the string,
The following code changes slightly to see the encrypted string,
In login.htm:

Data: "Username=" + Escape ($ (' #username '). Val ()) + "&password=" + $.MD5 (Escape ($ (' #password '). Val ())), Success: Function (msg) {      $ ("#loading"). Hide ();//Hides Loading      alert (msg);      if (msg = = "Success") {       //parent.tb_remove ();       Parent.document.location.href = "admin.htm"; If login is successful, skip to admin interface       Parent.tb_remove ();      }      if (msg = = "fail") {       alert ("Login failed! ");      }     }

Loginhandler.ashx the password to return:

Context. Response.Write (password);

OK, running the program again will pop up the string after the MD5 encryption of the input password.

The above is a relatively humble opinion, with download address: Ajaxlogin