This document describes building a single page application for authentication against multiple third party services like Facebook and Windows Live using OAuth2 and without page reloads. It discusses using an OAuth adapter and service-specific adapters to handle the different OAuth grant types and flows. Key parts of the implementation include injecting a session service, opening authentication as a promise, handling the redirect flow with a popup window, and reading the access token from the hash fragment or popup message.
25. 30 createBoundMessageHandler: function(){
31 this.boundMessageHandler = function(event){
32 var matches, message = event.originalEvent.data;
33 if (!message || !(matches = message.match(/^setAccessToken:(.*)/))){
34 return;
35 }
36
37 if (matches[1]){
38 Ember.run(this, function(){
39 this.closeExistingWindow();
40 this.resolveExistingDeferred(matches[1]);
41 });
42 }
43 }.bind(this);
44 }.on('init'),
Listen for messages from the popup
26. Upon load, look for tokens
61 Ember.Application.initializer({
62 name: 'authentication',
63 initialize: function(container, app){
. . .
75 // Kind of feels like the in-popup logic should be elsewhere
76 var auth = container.lookup('session:adapter');
77 var token = auth.readAccessToken();
78 if (token && window.opener) {
79 // Don't go forward, we are just a popup with an accessToken
80 app.deferReadiness();
81 window.opener.postMessage(
82 'setAccessToken:'+token,
83 Overherd.settings.origin
84 );
85 }
. . .
94 }
95 });
27. Upon load, look for tokens
99 readAccessToken: function(){
100 var accessToken, match,
101 regex = /access_token=([^&]*)/,
102 hash = window.location.hash;
103
104 if (window.location.hash){
105 hash = window.location.hash;
106 if (match = hash.match(regex)) {
107 return match[1];
108 }
109 }
110 }