Hello! So i have a login form with user, pass and a button for login. On this button i want to put a JavaScript listener and when clicked to fire a $.ajax() function who sends
a request to the login page and then return a json response with 2 fields: error(failed) and msg(user/pass ok). When the ajax ends, the success function must display on the page the value from msg and if there is no error redirect to home page.
i suppose that in some way i need to verify the user/pass with what i have in the database, i just don't know how to do it.
i currently use sessions for my authentications and it works just fine but now my new task is to change it.
i tried something below the problem is i don't know how to do the validation with the database to see if the user and password are correct.
please help me with some ideas.
Thank you
What I have tried:
This is my table
<table style="background-color:#f1f1f1">
<tr>
<td><asp:Label runat="server" ID="lbl1" Font-Bold="true" ForeColor="Red"/></td>
</tr>
<tr>
<td><asp:Label runat="server">Username</asp:Label></td>
<td><asp:TextBox runat="server" ID="txtUser" placeholder="Username"/></td>
<td><asp:RequiredFieldValidator ID="rfvUser" runat="server" ControlToValidate="txtUser" ErrorMessage="*" ForeColor="Red" Font-Bold="true" ValidationGroup="LoginInfo"/></td>
</tr>
<tr>
<td><asp:Label runat="server">Password</asp:Label></td>
<td><asp:TextBox runat="server" ID="txtPass" TextMode="Password" placeholder="Password"/></td>
<td><asp:RequiredFieldValidator ID="rfvPass" runat="server" ControlToValidate="txtPass" ErrorMessage="*" ForeColor="Red" Font-Bold="true" ValidationGroup="LoginInfo"/></td>
</tr>
<tr >
<td></td>
<td><asp:Button runat="server" Text="Login" ID="btnLogin" CssClass="button" Width="210" OnClick="btnLogin_Click" ValidationGroup="LoginInfo"/></td>
</tr>
</table>
Here what i have been trying :
<script>
$(document).ready(function myfunction () {
$('#btnLogin').click(function () {
var user = $('#txtUser').val();
var pass = $('#txtPass').val();
if (user != '' && pass != '') {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Login.aspx/InsertData",
data: {user: txtUser, pass: txtPass},
dataType: "json",
success: function (data) {
var obj = data.d;
if (obj == 'true') {
$('#txtUser').val('');
$('#txtPass').val('');
$('#lbl1').html("Login Successfully");
}
},
error: function (result) {
$('#lbl1').html("Wrong username or password");
}
});
}
else {
$('#lbl1').html("Please fill all fields");
return false;
}
});
});
</script>
and in my aspx.cs maybe something like :
[WebMethod]
public static string InsertData(string user, string pass)
{
string msg = string.Empty;
using (MySqlConnection conn = new MySqlConnection(WebConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString))
{
using (MySqlCommand cmd = new MySqlCommand("select * from useri where Username=@Username and Password=@Password", conn))
{
conn.Open();
cmd.Parameters.AddWithValue("@Username", user);
cmd.Parameters.AddWithValue("@Password", pass);
int i = cmd.ExecuteNonQuery();
conn.Close();
if(i==1)
{
msg = "true";
}
else
{
msg = "false";
}
}
}
return msg;
}