I recently needed to create a login modal that would allow a user to login without reloading the page. In addition, the login modal needed to be displayed on a non-secure page, but the form needed to be submitted over a secure connection. Here is how I accomplished it.

• Create a login form that can be accessed via a non-secure URL and is on the same domain and port as the pages where login is ultimately needed
• The login form must submit to a secure URL
• The status of the submit (success or error) should be saved by the server within the session scope
• The secure URL where the form is submitted to should always return a 302 redirect back to a non-secure URL
• This form should be embedded in non-secure pages where login is desired using an iFrame
• Create a function in the parent frame's window object called "handleLogin()" or whatever else you want
• The child frame (the iFrame) can communicate success or error to the parent frame by calling parent.handleLogin()

That's the rough idea anyway. Of course I polished the solution quite a bit, but I want to keep this example simple. The only important addition I'd like to mention is that instead of putting custom code in handleLogin, I chose to create a custom event (I used YUI 2 for this) called "login" which I fire within this function. This way you can react to this event in custom ways on each page of your site as needed.

Anyone else know of a better way to handle this situation? I would love to hear your ideas.