CODEWITHSUNDEEP
c#asp.netajaxjquery
Neo
Neo

Reputation: 16239

How to authenticate username password in Jquery with asp.net?

I have code of Jquery login control loke following using this into asp.net but but confused where and how I can simply authenticate username and password.

Login.aspx

<head>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/login.js" type="text/javascript"></script>
</head>

 <div id="loginBox">                
                    <form id="loginForm">
                        <fieldset id="body">
                            <fieldset>
                                <label for="email">Email Address</label>
                                <input type="text" name="email" id="email" />
                            </fieldset>
                            <fieldset>
                                <label for="password">Password</label>
                                <input type="password" name="password" id="password" />
                            </fieldset>
                            <input type="submit" id="login" value="Sign in" />
                            <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
                        </fieldset>
                        <span><a href="#">Forgot your password?</a></span>
                    </form>
                </div>

Login.js
// Login Form

$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
    $(this).mouseup(function(login) {
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

Now How could I use my asp.net authentication with this Jquery code ? where and how to write c# authentication code? give some threads also m new bie in jquery thanks

Upvotes: 0

Views: 7916

Answers (2)

Eadel
Eadel

Reputation: 3997

I'm not sure what are you trying exactly to do, but in order to perform log on with asp.net you should send your data somehow to the server. You can do it in two ways: send it with form or by AJAX request. If you want to send it within the form, you should specify action in your tag form, e.g.

<form id="loginForm" action="MySite/Logon">
    <!-- fields, labels, etc. -->
</form>

If you want to send it via jQuery AJAX request, you can use jQuery.ajax method, which is clearly explained here, with corresponding url in url parameter.
On the server side, your authentication may look like this:

FormsAuthenticationTicket ticket = new FormsAuthenticationTicket( // create authentication ticket
    1, // id
    email, // user name
    DateTime.Now, // date of issue
    DateTime.Now.AddMinutes(15), // expiration date
    true, // true if your ticket will be stored in a cookie, that will be kept by browser across the sessions
    userdata, // any text data, that you want to add to ticket (e.g. user roles)
    FormsAuthentication.FormsCookiePath // path associated with your ticket
);
string hashedTicket = FormsAuthentication.Encrypt(ticket);
HttpCookie cookie = new HttpCookie(
    FormsAuthentication.FormsCookieName, hashedTicket); // adding your ticket to cookie
cookie.Expires = ticket.Expiration;
Response.Cookies.Add(cookie); // sending cookie to client with current response

After these actions, your client will be recognized as authenticated until he logs off or expiration time of cookie/ticket expires.
Hope this info will help you.

Upvotes: 1

Yasser Shaikh
Yasser Shaikh

Reputation: 47804

Here's how you can write an ajax call to start with 

var usernameText = $("#usernameTextbox");
var passwordText = $("#passwordTextbox");

$.ajax({
    type: 'GET',
    url: '/Account/ValidateUser',
    async: true,
    dataType: 'json',
    data:
    {
        userName: usernameText,
        password: passwordText
    },
    success: function(result) {
        if(result){
            // redirect user to required page
        }
        else{
            // show error on some div that usrname and password do not match
        }
    }
});

Related Question on SO

MVC 4 Jquery Ajax call returns login page html

How to use Basic Auth with jQuery and AJAX?

Upvotes: 3

Related Questions