Reimplement inline signin with iframe

chrome/browser/resources/gaia_auth/main.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Authenticator class wraps the communications between Gaia and its host.
  */
 function Authenticator() {
 }
 
@@ skipping 18 matching lines @@
 Authenticator.prototype = {
   email_: null,
   password_: null,
   attemptToken_: null,
 
   // Input params from extension initialization URL.
   inputLang_: undefined,
   intputEmail_: undefined,
 
   isSAMLFlow_: false,
-  samlSupportChannel_: null,
+  isSAMLEnabled_: false,
+  supportChannel_: null,
+
+  ui_initialized_: false,

[xiyuan, 2014/01/26 01:59:57]

nit: ui_initialized_ -> uiInitialized_

[guohui, 2014/01/29 12:50:51]

Removed tha variable since it is not really needed.

 
   GAIA_URL: 'https://accounts.google.com/',
   GAIA_PAGE_PATH: 'ServiceLogin?skipvpage=true&sarp=1&rm=hide',
   PARENT_PAGE: 'chrome://oobe/',
   SERVICE_ID: 'chromeoslogin',
   CONTINUE_URL: Authenticator.THIS_EXTENSION_ORIGIN + '/success.html',
   CONSTRAINED_FLOW_SOURCE: 'chrome',
 
   initialize: function() {
     var params = getUrlSearchParams(location.search);
     this.parentPage_ = params.parentPage || this.PARENT_PAGE;
     this.gaiaUrl_ = params.gaiaUrl || this.GAIA_URL;
     this.gaiaPath_ = params.gaiaPath || this.GAIA_PAGE_PATH;
     this.inputLang_ = params.hl;
     this.inputEmail_ = params.email;
     this.service_ = params.service || this.SERVICE_ID;
     this.continueUrl_ = params.continueUrl || this.CONTINUE_URL;
-    this.continueUrlWithoutParams_ = stripParams(this.continueUrl_);
-    this.inlineMode_ = params.inlineMode == '1';
-    this.constrained_ = params.constrained == '1';
-    this.partitionId_ = params.partitionId || '';
+    this.desktopMode_ = params.desktopMode == '1';
+    this.isConstrainedWindow_ = params.constrained == '1';
     this.initialFrameUrl_ = params.frameUrl || this.constructInitialFrameUrl_();
     this.initialFrameUrlWithoutParams_ = stripParams(this.initialFrameUrl_);
-    this.loaded_ = false;
 
-    document.addEventListener('DOMContentLoaded', this.onPageLoad.bind(this));
+    if (this.desktopMode_) {
+      this.supportChannel_ = new Channel();
+      this.supportChannel_.connect('authMain');
+
+      this.supportChannel_.send({
+        name: 'initDesktopFlow',
+        gaiaUrl: this.gaiaUrl_,
+        continueUrl: stripParams(this.continueUrl_),
+        isConstrainedWindow: this.isConstrainedWindow_
+      });
+
+      this.supportChannel_.registerMessage(
+        'switchToFullTab', this.switchToFullTab_.bind(this));
+      this.supportChannel_.registerMessage(
+        'completeLogin', this.completeLogin_.bind(this));
+    }
+
+    document.addEventListener('DOMContentLoaded', this.onPageLoad_.bind(this));
     document.addEventListener('enableSAML', this.onEnableSAML_.bind(this));
   },
 
   isGaiaMessage_: function(msg) {
     // Not quite right, but good enough.
     return this.gaiaUrl_.indexOf(msg.origin) == 0 ||
            this.GAIA_URL.indexOf(msg.origin) == 0;
   },
 
   isInternalMessage_: function(msg) {
     return msg.origin == Authenticator.THIS_EXTENSION_ORIGIN;
   },
 
   isParentMessage_: function(msg) {
     return msg.origin == this.parentPage_;
   },
 
   constructInitialFrameUrl_: function() {
     var url = this.gaiaUrl_ + this.gaiaPath_;
 
     url = appendParam(url, 'service', this.service_);
     url = appendParam(url, 'continue', this.continueUrl_);
     if (this.inputLang_)
       url = appendParam(url, 'hl', this.inputLang_);
     if (this.inputEmail_)
       url = appendParam(url, 'Email', this.inputEmail_);
-    if (this.constrained_)
+    if (this.isConstrainedWindow_)
       url = appendParam(url, 'source', this.CONSTRAINED_FLOW_SOURCE);
     return url;
   },
 
-  /** Callback when all loads in the gaia webview is complete. */
-  onWebviewLoadstop_: function(gaiaFrame) {
-    if (gaiaFrame.src.lastIndexOf(this.continueUrlWithoutParams_, 0) == 0) {
-      // Detect when login is finished by the load stop event of the continue
-      // URL. Cannot reuse the login complete flow in success.html, because
-      // webview does not support extension pages yet.
-      var skipForNow = false;
-      if (this.inlineMode_ && gaiaFrame.src.indexOf('ntp=1') >= 0) {
-        skipForNow = true;
-      }
-      msg = {
-        'method': 'completeLogin',
-        'skipForNow': skipForNow
-      };
-      window.parent.postMessage(msg, this.parentPage_);
-      // Do no report state to the parent for the continue URL, since it is a
-      // blank page.
-      return;
+  onPageLoad_: function() {
+    window.addEventListener('message', this.onMessage.bind(this), false);
+    this.loadFrame_();
+  },
+
+  loadFrame_: function() {
+    var gaiaFrame = $('gaia-frame');
+    gaiaFrame.src = this.initialFrameUrl_;
+    if (this.desktopMode_) {
+      gaiaFrame.addEventListener('load', function() {

[xiyuan, 2014/01/26 01:59:57]

'load' event is not a reliable. Think it could fire on some edge case such as a
portal page etc. It is better to have our script running inside the iframe
(injected content script or better to host JS code there) to post back a message
as load confirmation.

[guohui, 2014/01/29 12:50:51]

the sole purpose of this listener now is to remove the spinner once the UI is
ready in the desktop signin flows, thus we are only interested in the first load
event, and the portal case seems irrelevant? and i think we are pretty tolerant
of false positive, feel it is better to show the UI faster in most cases and
show a brief blank page in edges cases than always showing it slower by adding a
delay of async postMessage.

+        this.ui_initialized_ || this.onLoginUILoaded_();
+      }.bind(this));
     }
-
-    // Report the current state to the parent which will then update the
-    // browser history so that later it could respond properly to back/forward.
-    var msg = {
-      'method': 'reportState',
-      'src': gaiaFrame.src
-    };
-    window.parent.postMessage(msg, this.parentPage_);
-
-    if (gaiaFrame.src.lastIndexOf(this.gaiaUrl_, 0) == 0) {
-      gaiaFrame.executeScript({file: 'inline_injected.js'}, function() {
-        // Send an initial message to gaia so that it has an JavaScript
-        // reference to the embedder.
-        gaiaFrame.contentWindow.postMessage('', gaiaFrame.src);
-      });
-      if (this.constrained_) {
-        var preventContextMenu = 'document.addEventListener("contextmenu", ' +
-                                 'function(e) {e.preventDefault();})';
-        gaiaFrame.executeScript({code: preventContextMenu});
-      }
-    }
-
-    this.loaded_ || this.onLoginUILoaded();
   },
 
   /**
-   * Callback when the gaia webview attempts to open a new window.
+   * Invoked when the login UI is initialized or reset.
    */
-  onWebviewNewWindow_: function(gaiaFrame, e) {
-    window.open(e.targetUrl, '_blank');
-    e.window.discard();
+  onLoginUILoaded_: function() {
+    var msg = {
+      'method': 'loginUILoaded'
+    };
+    window.parent.postMessage(msg, this.parentPage_);
+    this.ui_initialized_ = true;
   },
 
-  onWebviewRequestCompleted_: function(details) {
-    if (details.url.lastIndexOf(this.continueUrlWithoutParams_, 0) == 0) {
-      return;
-    }
-
-    var headers = details.responseHeaders;
-    for (var i = 0; headers && i < headers.length; ++i) {
-      if (headers[i].name.toLowerCase() == 'google-accounts-embedded') {
-        return;
-      }
-    }
+  /**
+   * Invoked when the background script sends a message to indicate that the
+   * current content does not fit in a constrained window.
+   * @param {Object=} opt_extraMsg Optional extra info to send.
+   */
+  switchToFullTab_: function(msg) {
     var msg = {

[xiyuan, 2014/01/26 01:59:57]

|msg| is used for both function argument and local var. We should use different
names.

[guohui, 2014/01/29 12:50:51]

Done.

       'method': 'switchToFullTab',
-      'url': details.url
+      'url': msg.url
     };
     window.parent.postMessage(msg, this.parentPage_);
   },
 
-  loadFrame_: function() {
-    var gaiaFrame = $('gaia-frame');
-    gaiaFrame.partition = this.partitionId_;
-    gaiaFrame.src = this.initialFrameUrl_;
-    if (this.inlineMode_) {
-      gaiaFrame.addEventListener(
-          'loadstop', this.onWebviewLoadstop_.bind(this, gaiaFrame));
-      gaiaFrame.addEventListener(
-          'newwindow', this.onWebviewNewWindow_.bind(this, gaiaFrame));
-    }
-    if (this.constrained_) {
-      gaiaFrame.request.onCompleted.addListener(
-          this.onWebviewRequestCompleted_.bind(this),
-          {urls: ['<all_urls>'], types: ['main_frame']},
-          ['responseHeaders']);
-    }
-  },
-
-  completeLogin: function() {
+  /**
+   * Invoked when the signin flow is complete.
+   * @param {Object=} opt_extraMsg Optional extra info to send.
+   */
+  completeLogin_: function(opt_extraMsg) {
     var msg = {
       'method': 'completeLogin',
-      'email': this.email_,
+      'email': opt_extraMsg.email || this.email_,
       'password': this.password_,
       'usingSAML': this.isSAMLFlow_
+      'skipForNow': opt_extraMsg && opt_extraMsg.skipForNow,
+      'sessionIndex': opt_extraMsg && opt_extraMsg.sessionIndex
     };
     window.parent.postMessage(msg, this.parentPage_);
-    if (this.samlSupportChannel_)
-      this.samlSupportChannel_.send({name: 'resetAuth'});
-  },
-
-  onPageLoad: function(e) {
-    window.addEventListener('message', this.onMessage.bind(this), false);
-    this.loadFrame_();
+    if (this.isSAMLEnabled_)
+      this.supportChannel_.send({name: 'resetAuth'});
   },
 
   /**
    * Invoked when 'enableSAML' event is received to initialize SAML support.
    */
   onEnableSAML_: function() {
+    this.isSAMLEnabled_ = true;
     this.isSAMLFlow_ = false;
 
-    this.samlSupportChannel_ = new Channel();
-    this.samlSupportChannel_.connect('authMain');
-    this.samlSupportChannel_.registerMessage(
+    if (!this.supportChannel_) {
+      this.supportChannel_ = new Channel();
+      this.supportChannel_.connect('authMain');
+    }
+
+    this.supportChannel_.registerMessage(
         'onAuthPageLoaded', this.onAuthPageLoaded_.bind(this));
-    this.samlSupportChannel_.registerMessage(
+    this.supportChannel_.registerMessage(
         'apiCall', this.onAPICall_.bind(this));
-    this.samlSupportChannel_.send({
+    this.supportChannel_.send({
       name: 'setGaiaUrl',
       gaiaUrl: this.gaiaUrl_
     });
   },
 
   /**
    * Invoked when the background page sends 'onHostedPageLoaded' message.
    * @param {!Object} msg Details sent with the message.
    */
   onAuthPageLoaded_: function(msg) {
@@ skipping 27 matching lines @@
       this.email_ = call.user;
       this.password_ = call.password;
     } else if (call.method == 'confirm') {
       if (call.token != this.apiToken_)
         console.error('Authenticator.onAPICall_: token mismatch');
     } else {
       console.error('Authenticator.onAPICall_: unknown message');
     }
   },
 
-  onLoginUILoaded: function() {
-    var msg = {
-      'method': 'loginUILoaded'
-    };
-    window.parent.postMessage(msg, this.parentPage_);
-    if (this.inlineMode_) {
-      // TODO(guohui): temporary workaround until webview team fixes the focus
-      // on their side.
-      var gaiaFrame = $('gaia-frame');
-      gaiaFrame.focus();
-      gaiaFrame.onblur = function() {
-        gaiaFrame.focus();
-      };
-    }
-    this.loaded_ = true;
-  },
-
   onConfirmLogin_: function() {
     if (!this.isSAMLFlow_) {
-      this.completeLogin();
+      this.completeLogin_();
       return;
     }
 
     // Retrieve the e-mail address of the user who just authenticated from GAIA.
     window.parent.postMessage({method: 'retrieveAuthenticatedUserEmail',
                                attemptToken: this.attemptToken_},
                               this.parentPage_);
 
     if (!this.password_) {
-      this.samlSupportChannel_.sendWithCallback(
+      this.supportChannel_.sendWithCallback(
           {name: 'getScrapedPasswords'},
           function(passwords) {
             if (passwords.length == 0) {
               window.parent.postMessage(
                   {method: 'noPassword', email: this.email_},
                   this.parentPage_);
             } else {
               window.parent.postMessage(
                   {method: 'confirmPassword', email: this.email_},
                   this.parentPage_);
             }
           }.bind(this));
     }
   },
 
   maybeCompleteSAMLLogin_: function() {
     // SAML login is complete when the user's e-mail address has been retrieved
     // from GAIA and the user has successfully confirmed the password.
     if (this.email_ !== null && this.password_ !== null)
-      this.completeLogin();
+      this.completeLogin_();
   },
 
   onVerifyConfirmedPassword_: function(password) {
-    this.samlSupportChannel_.sendWithCallback(
+    this.supportChannel_.sendWithCallback(
         {name: 'getScrapedPasswords'},
         function(passwords) {
           for (var i = 0; i < passwords.length; ++i) {
             if (passwords[i] == password) {
               this.password_ = passwords[i];
               this.maybeCompleteSAMLLogin_();
               return;
             }
           }
           window.parent.postMessage(
               {method: 'confirmPassword', email: this.email_},
               this.parentPage_);
         }.bind(this));
   },
 
   onMessage: function(e) {
     var msg = e.data;
     if (msg.method == 'attemptLogin' && this.isGaiaMessage_(e)) {
       this.email_ = msg.email;
       this.password_ = msg.password;
       this.attemptToken_ = msg.attemptToken;
+      this.chooseWhatToSync_ = msg.chooseWhatToSync;
       this.isSAMLFlow_ = false;
-      if (this.samlSupportChannel_)
-        this.samlSupportChannel_.send({name: 'startAuth'});
+      if (this.isSAMLEnabled_)
+        this.supportChannel_.send({name: 'startAuth'});
     } else if (msg.method == 'clearOldAttempts' && this.isGaiaMessage_(e)) {
       this.email_ = null;
       this.password_ = null;
       this.attemptToken_ = null;
       this.isSAMLFlow_ = false;
-      this.onLoginUILoaded();
-      if (this.samlSupportChannel_)
-        this.samlSupportChannel_.send({name: 'resetAuth'});
+      this.onLoginUILoaded_();
+      if (this.isSAMLEnabled_)
+        this.supportChannel_.send({name: 'resetAuth'});
     } else if (msg.method == 'setAuthenticatedUserEmail' &&
                this.isParentMessage_(e)) {
       if (this.attemptToken_ == msg.attemptToken) {
         this.email_ = msg.email;
         this.maybeCompleteSAMLLogin_();
       }
     } else if (msg.method == 'confirmLogin' && this.isInternalMessage_(e)) {
       if (this.attemptToken_ == msg.attemptToken)
         this.onConfirmLogin_();
       else
         console.error('Authenticator.onMessage: unexpected attemptToken!?');
     } else if (msg.method == 'verifyConfirmedPassword' &&
                this.isParentMessage_(e)) {
       this.onVerifyConfirmedPassword_(msg.password);
     } else if (msg.method == 'navigate' &&
                this.isParentMessage_(e)) {
       $('gaia-frame').src = msg.src;
     } else if (msg.method == 'redirectToSignin' &&
                this.isParentMessage_(e)) {
       $('gaia-frame').src = this.constructInitialFrameUrl_();
     } else {
        console.error('Authenticator.onMessage: unknown message + origin!?');
     }
   }
 };
 
 Authenticator.getInstance().initialize();