Finally let's look at the mediators. The containing page instantiates an
<iframe> that sources the login-request mediator (Listing Five) to send a message to the login object. loginRequestMediator.html has the same origin as loginPanel.html, which defines the login object. As you can see, the main thing the mediator code does is call the
login(...) function that we were just looking at the one in loginPanel.html.
Rounding out the discussion, the login mediator (Listing Six) handles communication from the login object to the containing panel. It works the same as the other mediator, but now it's calling methods of the
listener object that I talked about at the beginning of this article. The
<iframe> that sources the login mediator uses the same origin as the containing page.
So that's it for login. You now have a secure, self-contained module that you can just plug into your application with about five minutes work. You'll need to do some additional housekeeping, of course (you need to install a certificate into your server so that you can handle https communication and set up a secure subdomain, for example), but most of the grunt work is done for you. Enjoy!
Allen Holub provides technical training, OO design and agile-process consulting, and web application/SaaS development services. He is the author of Holub on Patterns: Learning Design Patterns by Looking at Code (also available for Kindle), C+ C++: Programming With Objects in C and C++, and numerous articles for SD Times, JavaWorld, and IBM Developer Works. Contact him via http://www.holub.com/contact.