Instead of making a Login form, we can implement Pattern lock to our website. We can achieve this using some JQuery codings. So here is the technique of implementing Pattern lock in the ASP.NET framework project using Jquery.
In this tutorial, we have Login.aspx page, if I will draw the right pattern it will take to you Dashboard.aspx otherwise it will show you error message. It will validate the pattern from the database then it will unlock it.
So let's start.
Step 1:- (Database table)
Table Name:- "UserTable"
Column Name
|
Data Type
|
|
| uid | int | (PK) |
| name | varchar(50) | |
| password | varchar(10) |
Insert data into the table:-
INSERT into UserTable (uid, name, password) VALUES (1, 'Ankit', '12369')
{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod()]
public static dynamic ValidLogin(string password)
{
SqlConnection con = new SqlConnection("Data Source=/*your server name*/; Initial Catalog=/*Your database name*/; USER ID=/*Your server id*/; password=/*your password*/");
con.Open();
string qry = "select * from UserTable where password='"+ password +"'";
SqlCommand cmd = new SqlCommand(qry, con);
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.Read())
{
con.Close();
return true;
}
else
{
con.Close();
return false;
}
}
}
}
Step 2:-
- Create a new ASP.NET Framework project.
- Add two webforms Login.aspx, Dashboard.aspx.
- Add three folders. Name it as img, css, js.
| and paste it into the js folder. |
| and paste it into the js folder. |
| and paste it into the css folder. |
| and paste it into the img folder. |
Step 3:- Login.aspx and Login.aspx.cs
Write the following code in Login.aspx
-------------------------------------------------
In <head> section
<head runat="server">
<title>My Palm Book</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/gesture.min.js"></script>
</head>
In <body> section
<body>
<div id="gesturepwd"></div>
<div id="gesturepwd"></div>
<p id="errmessage">authentication invalid...</p>
<script>
$("#gesturepwd").GesturePassword({
backgroundColor: "transparent",
color: "#FFFFFF",
roundRadii: 50,
pointRadii: 12,
space: 60,
width: 480,
height: 480,
lineColor: "#ECF0F1",
zindex: 100
});
<script>
$("#gesturepwd").GesturePassword({
backgroundColor: "transparent",
color: "#FFFFFF",
roundRadii: 50,
pointRadii: 12,
space: 60,
width: 480,
height: 480,
lineColor: "#ECF0F1",
zindex: 100
});
$("#errmessage").hide();
$("#gesturepwd").on("hasPasswd", function (e, passwd) {
debugger;
if (passwd != '') {
$.ajax({
type: 'POST',
url: 'Login.aspx/ValidLogin',
data: "{'password':'" + passwd + "'}",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (response) {
debugger;
var result = response.d;
if (result == true) {
$("#gesturepwd").trigger("passwdRight");
setTimeout(function () {
// alert("Pattern is correct")
}, 500);
}
else {
$("#gesturepwd").trigger("passwdWrong");
}
if (result == true) {
window.location.href = "Dashboard.aspx";
}
if (result == false) {
$("#errmessage").show();
}
console.log(lstdtl);
},
error: function (response) {
$("#gesturepwd").trigger("passwdWrong");
var msg = jQuery.parseJSON(response.responseText);
console.log("Message: " + msg.Message);
console.log("StackTrace: " + msg.StackTrace);
console.log("ExceptionType: " + msg.ExceptionType);
},
});
}
else {
$("#gesturepwd").trigger("passwdWrong");
}
});
</script>
</body>
Write the following code in Login.aspx.cs
------------------------------------------------------
namespace PatternLock{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod()]
public static dynamic ValidLogin(string password)
{
SqlConnection con = new SqlConnection("Data Source=/*your server name*/; Initial Catalog=/*Your database name*/; USER ID=/*Your server id*/; password=/*your password*/");
con.Open();
string qry = "select * from UserTable where password='"+ password +"'";
SqlCommand cmd = new SqlCommand(qry, con);
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.Read())
{
con.Close();
return true;
}
else
{
con.Close();
return false;
}
}
}
}
Step 4:- Dashboard.aspx and Dashboard.aspx.cs
Write the following code in Dashboard.aspx
---------------------------------------------------------
In <head> section
<head runat="server">
<title>My Palm Book</title>
<style>
body {
color: aquamarine;
background-color: darkcyan;
}
h2{
padding:20% ;
margin-left:20%;
}
</style>
</head>
In <body> section
<body>
<form id="form1" runat="server">
<div>
<h2>Welcome to My Palm Book</h2>
</div>
</form>
</body>
Write the following code in Dashboard.aspx.cs
------------------------------------------------------------
//no coding..
Write the code as following and browse your Login page to see the result.
