Skip to content
This repository has been archived by the owner on Mar 11, 2021. It is now read-only.

Login from Viewer

Jump to bottom
nathanstitt edited this page Jan 15, 2013 · 2 revisions

I've been working on investigating and implementing how to accomodate logging in via the viewer.

The solution needs to support authentication via both standard documentcloud accounts and using third-party services such as Twitter, Facebook, & Google Accounts.

This presents several challenges as it will require cross-site communication across three different website, only one of which we control.

  1. any site that hosts the viewer
  2. DocumentCloud
  3. Third-Party Authentication site

I've investigated how other websites that offer third party logins implement this and the below method seems the way to go.

The flow is:

  • The viewer creates an iframe with content from the documentcloud.org domain.

  • Both the viewer and the iframe have the easyXDM JS library (http://easyxdm.net/wp/) loaded with the iframe from documentcloud.org acting as the provider. For Browsers <> IE, easyXDM uses html5's pushState, for IE it uses url location fragment polling.

  • Inside the iframe the XDM RPC socket is stored as a reference into the window scope.

  • The first hurdle is that XDM requires that the url of the side that is acting as the provider be fixed and not change.

    • Therefore it's not possible to prerform a normal login inside the iframe itself as that causes the URL to change.

    • To get around this restriction a second iframe is nested inside the parent (xdm'ed) iframe.

    • The child iframe can:

      • Navigate to different urls, allowing it to perform a login process
      • It can also communicate back to the parent via the DOM window.parent object, and from there access the RPC socket at window.parent.socket

  • An additional hurdle is that third party identity services disallow loading inside an iframe by using the X-Frame-Options: SAME_ORIGIN http header.

  • To overcome this restriction clicks on the third-party login links are intercepted and loaded into a pop-up window. Once the omniauth flow is complete, the popup notifies the iframe of the status using the JS DOM window.opener

This is all working except for IE<9. It all works fine until it's time to close the pop-up and communicate the status back to the iframe. Then it fails due to window.opener being null from iside the popup. This appears to be due to IE getting confused about some-origin issues. I'm currently investigating the best solution to this. I know it can be accomplished as other sites are doing so. http://www.felocity.com/article/window_postmessage_problems_and_workarounds_for_ie8/ has some hints

If all else fails to get IE working, a second XDM session could be established back from the popup to the iframe and bridge it that way. This is demonstrated working at: http://consumer.easyxdm.net/current/example/bridge.html

Clone this wiki locally