BlogCFC Auto Login
In the effort to make posting to this blog as quick and easy as possible, I decided to take a shot at a jQuery/CF automatic login routine...
Not wanting to mess with the built-in authentication (and looking for a quick easy fix), I took the most simple approach I could think of - put the user name and password in the url as variables, put those values in the form fields with ColdFusion, and then submit the form with jQuery.
Here's how I did it
1) The Url Variable part
Assuming your blog login is myblog.com/admin/index.cfm, you will want to simply pass the 'un' and 'pw' variables in the url, like this:
http://myblog.com/admin/index.cfm?pw=mypassword&un=myusername
Then, in the 'login.cfm' file that holds the blog login form, set up some parameters. Note: to avoid fighting the 'enablecfoutputonly' setting, i just put this at the very top of the file.
<cfparam name="login.un" default="">
<cfparam name="login.pw" default="">
Then, if we've got the variables in our entry url, let's set some variables based on the values - right below those other two lines ...
<cfset login.un = "#url.un#">
<cfset login.pw = "#url.pw#">
Now we have the url variables as 'un' and 'pw' in a new 'login' scope.
2) Change the Form
I gave the submit button an ID (so we can get it with jQuery), and set a value for the two input fields, based on our variables set above. To make it easy, here's the whole modified form
<table>
<tr>
<td><b>#application.resourceBundle.getResource("username")#</b></td>
<td><input type="text" name="username" value="#login.un#"></td>
</tr>
<tr>
<td><b>#application.resourceBundle.getResource("password")#</b></td>
<td><input type="password" name="password" value="#login.pw#"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" id="submitForm" value="#application.resourceBundle.getResource("login")#"></td>
</tr>
</table>
3) Click the Button with jQuery
Now, when we show up at the page, the form fields are prefilled, based on the 'un' and 'pw' variables in the url.
All that's left is to click the button...
At the very top of the file, just below the
<cfif url.un neq '' AND url.pw neq ''>
<cfsavecontent variable="hcode">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submitForm').click();
});
</script>
</cfsavecontent>
<cfhtmlhead text="#hcode#">
</cfif>
This puts jquery into the head of our page, along with the script we need to click the button. Done. Logged in. Ready to post!
4) One Less Step...
As an additional time-saver, I set my blog's index page to direct to the 'new entry' screen, like this (put this at the very top of index.cfm)
<cflocation url="entry.cfm?id=0" addtoken="no">
5) One More Less Step...
And here's another click removed - focus the 'title' field as soon as the page loads! Just put this code at the very top of 'entry.cfm'
(note: for some reason the focus only works in IE , at first test... gotta be an extension conflict on my end, jquery focus works fine in FF!)
<cfsavecontent variable="hcode">
<script type="text/javascript">
$(document).ready(function(){
$('input#title').focus();
});
</script>
</cfsavecontent>
<cfhtmlhead text="#hcode#">
I dunno about you other bloggers but 90+% of the time I go to my blog admin, I am looking to make a new post. This makes it super easy. By simply bookmarking http://myblog.com/admin/index.cfm?pw=mypassword&un=myusername , I can click a link in my bookmarks, and start typing a new post, shhhhnap!
There are no comments for this entry.
Add Comment