Personalizing a login form with jQuery and ColdFusion

This post is more than 2 years old.

So - I'm still not 100% sure what Quora is and why I would use it. It looks like a generic version of StackOverflow which could be cool. Right now my take is that it's "The site I keep hearing people talk about but I find impossible to spell." That being said I went to login this morning and noticed something I thought was really cool. Check out this screen shot.

I think that's pretty cool! Now - it may also be viewed as something of a privacy issue. I tried a few friend's email addresses and for it showed me their profile pics. I wasn't able to login as them - and - to be honest - I already knew what they looked like anyway - but it may be something that upsets some people. All I know is I saw it and wanted to recreate it as a proof of concept. Here's what I whipped up. I'm going to start on the server side. I didn't want to hook up to a real login system so all I did was return the gravatar URL for the email and a static name.

component {

remote struct function checkemail(string email) {
	//look up to see if the user exists
	//if true (and it's always true for us), return profile image
	//for us this will be gravatar and return their name
	var result = {};
	if(isValid("email", arguments.email)) {
		result.name = "John Smith";
		result.profileimage = "http://www.gravatar.com/avatar/#lcase(hash(arguments.email))#?s=64";
	}
	return result;
}

}

Nothing here should be too complex. If it's a valid email I return a struct of data, otherwise I just return an empty structure. The front end is a bit more interesting.

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() {

$("#email").blur(function() {
	var value = $(this).val();
	if(value.length==0) return;
	$.post("test.cfc?method=checkemail&returnFormat=json", {"email":value}, function(res,code) {
		if(res.PROFILEIMAGE && res.NAME) {
			var s = "&lt;img src=\"" + res.PROFILEIMAGE + "\"&gt;&lt;br/&gt;"+res.NAME;
			$("#picSample").html(s);
		}
	}, "json");
});

}) </script> </head>

<body>

<form> <table> <tr> <td>email:</td> <td><input type="text" name="email" id="email"></td> <td rowspan="2"><div id="picSample"></div></td> </tr> <tr> <td>password:</td> <td><input type="password" name="password"></td> </tr> </table> </form>

</body> </html>

Ok, first off, I apologize for the table. Sorry - until I can layout stuff that easy and that quick with CSS without having to look it up - I'm going to stick with tables. Just call me old and cranky. While you are laughing at my horrible design skills though take note of the email field and the div to the right of it. This is where we're going to display the user info. Now go up to the jQuery code.

I've got a blur listener on the on the email field. When it's fired, we run a POST request against the CFC above. When the result returns we see if we got data and if so, create a simple HTML string out of it. You can view the demo below.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Paul Dynan posted on 1/19/2011 at 10:47 PM

I do get an error message in 8:

Webpage error details
Message: 'console' is undefined
Line: 7
Char: 2
Code: 0
URI: http://www.coldfusionjedi.c...

Comment 2 by Raymond Camden posted on 1/19/2011 at 10:50 PM

Ah my little console hack is bad. You see - I try to be nice to non-console users and I get screwed. ;) Just going to edit out my calls for now.

Comment 3 by Raymond Camden posted on 1/19/2011 at 10:50 PM

Oh wait - I left a console.dir in there. Let me try w/o that.

Comment 4 by Lola LB posted on 1/19/2011 at 10:51 PM

This is interesting. But it just doesn't make sense to me . . . why display your avatar and name during login? You would think that whoever is logging in knows exactly who he is during the process, that he has access to the username/password being used.

Comment 5 by Raymond Camden posted on 1/19/2011 at 10:53 PM

Lola - to me - it was just cool. It felt like the application was welcoming me. Sure I know what I look like - but I still thought it was neat. It's the "small stuff" like that that sometimes draws users in.

Comment 6 by Sid Wing posted on 1/19/2011 at 10:54 PM

No error message - but no image either... Running firefox version 3.6.13

Comment 7 by Raymond Camden posted on 1/19/2011 at 10:56 PM

Make sure you reload. If you had no Firebug, I had a console.dir in there.

Comment 8 by Sid Wing posted on 1/19/2011 at 10:58 PM

OK - now I get:
Warning: Unexpected token in attribute selector: '!'.
Source File: http://www.coldfusionjedi.c...
Line: 0

Comment 9 by Lola LB posted on 1/19/2011 at 10:59 PM

Ahhh, that would make sense, to make the user feel engaged from the beginning.

Comment 10 by Bill King posted on 1/19/2011 at 11:23 PM

Ray, I don't think there is a privacy issue here, in general, because as a user of gravatar you are basically giving them the authority to give your photo to anyone who has your email address, so in essence you said "yes, I want my photo to show up when someone has my email address"

Comment 11 by Raymond Camden posted on 1/20/2011 at 12:01 AM

@Sid: Boggle - do you even see a ! anywhere?

Comment 12 by Raymond Camden posted on 1/20/2011 at 12:03 AM

Sid - just tested w/ Firefox 3.X. It had Firebug and it worked ok.

Man - I just realized - my console hider is totally dumb. Just ignore it for now and use a browser w/ console. :)

Comment 13 by Raymond Camden posted on 1/20/2011 at 12:04 AM

I completely removed it Sid - I'll edit the blog post later (otp). But you should be able to run it.

Comment 14 by jfrobishow posted on 1/20/2011 at 2:27 AM

Facebook had something like this for a while when you entered the wrong password it would show you the profile picture. It caused a mini uproars regarding privacy, since it was overriding the Profile picture privacy setting. They since then removed it.

I guess you could potentially see a breach if you bruteforce a list of random emails... not sure how it would be exploitable though.

Comment 15 by Joseph Potthast posted on 1/20/2011 at 8:48 AM

Well it defiantly falls into that "that's cool" category. People love to see things interact with them as they go. Another use could be if you were running your own forums and/or website with profiles and avatars you could hit your own avatars.

Comment 16 by Charlotte Boden posted on 2/3/2011 at 4:10 AM

Ray, <br>
For some reason, I can't get value return from cfc to jquery. Are there any settings I have to do on server side? Please help! Thanks. <br>
Here is my sample code.<br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check user</title>
<script type="text/javascript" src="http://ajax.googleapis.com/..."></script>
<script type="text/javascript">
$(document).ready(function() {
$('#username').blur(function(){
$('#msg').empty();
$.post('employee.cfc?method=chkUsername',
{Username : this.value},
function(response){
if (response == 1) {
$('#msg').html('This user exists in DB');
$('#username').attr('value', '').focus();
}
else{
$('#msg').html('This user does not exist in DB');
};
}
);
});
});
</script>
</head>

<body>
<div id="wrap">
<h1>Ajax Test (user: test exists)</h1>

<form id="myform" method="post">
Username: <input type="text" id="username" name="username"><span id="msg"></span><br />
Password: <input type="password" id="password" name="password">
</form>

</div>
</body>
</html>

Comment 17 by Raymond Camden posted on 2/3/2011 at 7:25 AM

What does Firebug, or your other network tool, tell you?

Comment 18 by Charlotte Boden posted on 2/3/2011 at 10:37 PM

Thanks, Ray. I installed Firebug this morning and was able to troubleshoot the issue finally. It was because I turned on the Debug Output in CFADMIN. Thanks again.

Comment 19 by Raymond Camden posted on 2/3/2011 at 10:38 PM

I cannot stress enough how important Firebug (or any network tool) is. :) Luckily it is built into Chrome.