Developing a 'login' with ajaxed

By | April 17
16 Comments

Today we will check how we could realize a simple login using ajaxed for your web application. You know the common stuff where you enter your credentials (email and password) and you get authorized if they are correct.

Let’s start of with the form…

HTML4
< view plain text >
  1. <form id="frm">
  2.     <strong>Email:</strong><br />
  3.     <input type="text" name="email">
  4.     <br /><br />
  5.     <strong>Password:</strong><br />
  6.     <input type="password" name="pwd">
  7.     <br /><br />
  8.     <button type="button" onclick="ajaxed.callback('login', loggedin)">
  9.         login
  10.     </button>
  11. </form>

Its very simple. Two text inputs and a button. Both text inputs have a name so we can talk to them. As you can already see we also hooked up a callback on the login button. Quite clear, because we’ll handle the login on the server side. But before we do so we need to have a database with a user table including id, email and pwd column. (get a read about ‘using a database with ajaxed’ if you feel the need)

Now we write our server side callback which will handle the login action

asp
< view plain text >
  1. sub callback(a)
  2.     'hit the road if its an unknow action
  3.     if a <> "login" then exit sub
  4.     sql =   "SELECT id " & _
  5.             "FROM user " & _
  6.             "WHERE email = '" & str.sqlSafe(page.RF("email")) & "' " & _
  7.             "AND pwd = '" & (new MD5).hash(page.RF("pwd")) & "'"
  8.     ID = db.getScalar(sql, 0)
  9.     if ID > 0 then
  10.         session("user") = ID
  11.         page.return true
  12.     else
  13.         page.return false
  14.     end if
  15. end sub

Basically it checks if a user with the given email and password exists. The db.getScalar function returns the users ID or 0 if no such user exists. If the ID was found (line 8) we log the user in by setting a session variable to its ID. After that we return true to the javascript callback (line 10) which can notify the user about the success. If the ID was 0 we return false. As you can see we used str.sqlSafe for the email to prevent SQL injection and we hashed the password with an MD5 hash. This assumes that our passwords are hashed in the database (which is very common).

Last but not least we need the javascript callback function to notify the user about failure or success. On success we forward him/her to our default page (in this case just the root) and on failure we show a message.

javascript
< view plain text >
  1. function loggedin(r) {
  2.     if (!r) return alert('could not login');
  3.     window.location.href = '/';
  4. }

That was it. In fact you will need a bit more for you application but this gives you an idea about how to solve such a common problem with ajaxed.

Download the full login.asp (tested with ajaxed 1.0)

You probably could extend your script …

  • .. that it checks if you are already logged in
  • .. that it handles logout
  • .. redirect the user to the originally requested url

16 comments on “Developing a 'login' with ajaxed”

  1. this is what we need, more examples, helps the thicko’s like me understand it..if anyone has done anything with databases even simple queries can the send me some examples…..cheers

  2. i will post a simple CRUD example as well this week

  3. Does everything have to occur within a sub? I was hoping if you could demonstrate examples where sub is not being used. Would you be able to email them through or or have them posted? Thanks

  4. michellea, yes you have to put everything in a sub … init(), callback() or main() … why is that a problem for you?

  5. Michal,

    The reason I ask is that my login code currently doesn’t sit within a sub nor do any other functions.

    I’m relatively new and never worked with XML and JS. For example I have a form that collects user details e.g. Name, Address, etc and I need so echo the details back on the same page without having to reload the page. How can I do that?

  6. Is there anyway to hide the column names in the JSON that is returned?

    Say, instead of the names of the tables just have them named c1,c2,c3 etc..

    Is that possible, maybe it can be set by a flag in the call.

    response.write((new JSON).toJSON(“rows”, Recordset1,False,nocolnames))

    I thought if someone knows the column names in a table it allows the database to be hacked more easily.

    Vince

  7. you can hide columns easily .. just dont select them ;)

  8. I changed line 241 to
    toJSON lCase(“c”&i), val.fields(i).value, true

    This will do what I want, it now sends c0,c1,c2,c3 etc… as my col names, so this wont expose the actual column names in my database.

    I would be cool to add a flag to the toJSON call though so it would work the way it does now, or with my mod just by setting the flag.

    Just a suggestion.

    THanks

    Michal

    This is awsome

  9. Hi Michal,

    I see you made a post, I didn’t realize that.

    I’m not sure what you mean by just don’t select them.

    They are in the recordset.

    Vince

  10. when you return a recordset then you should only select those columns which you want to return .. e.g


    sql = "SELECT col1, col2 FROM table"
    page.return(db.getRecordset(sql))

    only col1 and col2 will be returned. they must be returned because you want to do something with them ..
    you could also alias the columns if you dont want to keep the “real” names:


    sql = "SELECT col1 AS myCol FROM table"

    hope that helps you…. greets

  11. OK.

    I do want all the columns returned, I just don’t want their real column names returned in the JSON feed.

    I could use an alias as you suggest, I never thought of that.

    But, it would be cool to provide the functionality that I suggested to hide the column names if an alias wasn’t used.

    I think less work then alias column names in a table.

    Just my 2 cents.

    Thanks for you suggestion, it does make sense.

    Vince

  12. this makes no sense .. if you hide it then you cannot use it anymore ;)

  13. All I’ve done is change the column name to something that is different.
    I changed line 241 in your JSON.asp file to read
    toJSON lCase(“c”&i), val.fields(i).value, true

    I just changed “c”&i - c is just a letter and the i is your incremented value.
    together they will make c0,c2,c3, etc…

    Every column in the table will have its named pair to be substituted with c0,c1,c2,c3,c4, etc… (this hides the true column names)

    In javascript access the passed JSON using Ajax request.
    myObject.rows[i].c1;
    myObject.rows[i].c2; etc.

    This hides the actual name of my sql columns, but I can still access the data by using the substituted names.

    It is a quicker and simpler way.

    What do you think?

  14. i see.. dunno if this makes a lot sense but i will think about it … maybe its useful

  15. The login.asp didn’t work until I added

    asp
    < view plain text >
    1. page.DBConnection = true

  16. To “hide” your database column names use the SELECT statement to alias your columns:

    SELECT first_name AS col_1, last_name AS col_2 FROM USERS;

    rs(“first_name”) ‘ fails

    rs(“col_1″) ‘ returns first_name

    No need to modify the ASP code at all. I suggest reading SQL documentation for the SELECT statement.