Warning: this is about finding workable solutions and some of the methods are used because they are a solution not because they promote the cleanest HTML. You might run across <frame> in this article. Apologies to the HTML5 community.
Most web apps don’t give web developers many tools to integrate directly with their login system. So when it comes to creating single-sign-on scripts you’re often on your own for finding the credentials and back-engineering login systems. Often you have no direct access to the 3rd party system.
Imagine that you have access to the usernames and passwords programmatically. We then set about creating an intermediate page with a hidden form, which, when visited by the user, is populated with the correct credentials and submitted by Javascript. If everything goes to plan the user hardly notices the break in service as he is directed from (1) the single-sign-on hub to (2) the 3rd party service. (I will use these labels (1) and (2) from here on, so make sure they’re clear in your mind.)
We have a number of these type of redirects for single-sign-on at BSU and NTC. One problem that crops up is logging out of (2) doesn’t redirect the user to (1) and going back to (1) doesn’t necessarily log the user out of (2). Further, often the user may need to enter the stored password for (2) to confirm a choice but has forgotten it due to not using it to login anymore.
To solve this problem I created a frameset with two frames: the first being a bar along the top, the second being the main application window. In the top bar you have your links to a) retrieve your password for (2) after entering you password for (1), b) a link to go back to (1) and log the user out of (2) on the way and c) a link to logout of both (1) and (2). In the bottom frame you load the plain automatic redirect.
After a little work with AJAX, the first part a) was solved and I had the system returning the password to (2) when they enter the password for (1). The problem was the two links b) and c). Often you have trouble manipulating one frame with javascript from another frame. I found, however, that I could change the location.href of the bottom frame from top frame with the following statement.
top.frames['bottom'].location.href = "http://www.example.org/logout/";
Given the right URL to log out of (2), it’s possible now to force a logout in the bottom frame from the top frame. Now, by setting a timeout, we ensure that the logout from (2) is complete before commanding the entire window to go back to (1).
setTimeout('top.location.href = "https://www.originaldomain.com/";', 200);
With a little adjustment of the URL’s and setting up the event handlers, I now have two links in the top frame that will b) log the user out of (2) and redirect to (1), and c) log the user out of (2) and (1), redirecting back to the login page for (1).
Using frames is a bit 1997, but it does present a workable solution that makes the whole interface work much better for the user. An example of when one needs a solution not an ideal.
