Implement signin using webview

chrome/browser/resources/gaia_auth_host/authenticator.js

+// Copyright 2014 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.
+
+/**
+ * @fileoverview An UI component to authenciate to Chrome. The component hosts
+ * IdP web pages in a webview. A client who is interested in monitoring
+ * authentication events should pass a listener object of type
+ * cr.login.GaiaAuthHost.Listener as defined in this file. After initialization,
+ * call {@code load} to start the authentication flow.
+ */
+cr.define('cr.login', function() {
+  'use strict';
+
+  var IDP_ORIGIN = 'https://accounts.google.com/';
+  var IDP_PATH = 'ServiceLogin?skipvpage=true&sarp=1&rm=hide';
+  var CONTINUE_URL =
+      'chrome-extension://mfffpogegjflfpflabcdkioaeobkgjik/success.html';
+  var SIGN_IN_HEADER = 'google-accounts-signin';
+  var EMBEDDED_FORM_HEADER = 'google-accounts-embedded';
+  var SAML_HEADER = 'google-accounts-saml';
+
+  /**
+   * The source URL parameter for the constrained signin flow.
+   */
+  var CONSTRAINED_FLOW_SOURCE = 'chrome';
+
+  /**
+   * Enum for the authorization mode, must match AuthMode defined in
+   * chrome/browser/ui/webui/inline_login_ui.cc.
+   * @enum {number}
+   */
+  var AuthMode = {
+    DEFAULT: 0,
+    OFFLINE: 1,
+    DESKTOP: 2
+  };
+
+  /**
+   * Enum for the authorization type.
+   * @enum {number}
+   */
+  var AuthFlow = {
+    DEFAULT: 0,
+    SAML: 1
+  };
+
+  /**
+   * Initializes the authenticator component.
+   * @param {webview|string} webview The webview element or its ID to host IdP
+   *     web pages.
+   * @param {Authenticator.Listener=} listener An optional listener for events.

[xiyuan, 2014/10/23 19:32:03]

nit: listener -> opt_listner

[guohui, 2014/10/23 20:13:34]

Done.

+   * @constructor
+   * @extends {cr.EventTarget}
+   */
+  function Authenticator(webview, opt_listener) {
+    this.webview_ = typeof webview == 'string' ? $(webview) : webview;
+    assert(this.webview_);
+
+    this.listener_ = opt_listener || null;
+
+    this.email_ = null;
+    this.password_ = null;
+    this.sessionIndex_ = null;
+    this.chooseWhatToSync_ = false;
+    this.skipForNow_ = false;
+    this.authFlow_ = AuthFlow.DEFAULT;
+    this.loaded_ = false;
+    this.idpOrigin_ = null;
+    this.continueUrl_ = null;
+    this.continueUrlWithoutParams_ = null;
+    this.initialFrameUrl_ = null;
+    this.reloadUrl_ = null;
+  }
+  Authenticator.prototype = Object.create(cr.EventTarget.prototype);

[xiyuan, 2014/10/23 19:32:03]

If we don't dispatch event on this class, it does not need to be derived from
EventTarget.

[guohui, 2014/10/23 20:13:34]

Unfortunately, to be compatible with the old event based signin flow, it still
has to inherit the EventTarget interface, otherwise we will have to add extra
logic to every caller before they call GaiaAuthHost.addEventListener.

+
+  /**
+   * An interface for receiving notifications upon authentication events.
+   * @interface
+   */
+  Authenticator.Listener = function() {};
+
+  /**
+   * Invoked when authentication UI is ready.
+   */
+  Authenticator.Listener.prototype.onReady = function(e) {};
+
+  /**
+   * Invoked when authentication is completed successfully with credential data.
+   * A credential data object looks like this:
+   * <pre>
+   * {@code
+   * {
+   *   email: 'xx@gmail.com',
+   *   password: 'xxxx',  // May be null or empty.
+   *   usingSAML: false,
+   *   chooseWhatToSync: false,
+   *   skipForNow: false,
+   *   sessionIndex: '0'
+   * }
+   * }
+   * </pre>
+   * @param {Object} credentials A credential data object.
+   */
+  Authenticator.Listener.prototype.onSuccess = function(credentials) {};
+
+  /**
+   * Invoked when the requested URL does not fit the container.
+   * @param {string} url Request URL.
+   */
+  Authenticator.Listener.prototype.onResize = function(url) {};
+
+  /**
+   * Invoked when a new window event is fired.
+   * @param {Event} e Event object.
+   */
+  Authenticator.Listener.prototype.onNewWindow = function(e) {};
+
+  /**
+   * Loads the authenticator component with the given parameters.
+   * @param {AuthMode} authMode Authorization mode.
+   * @param {Object} data Parameters for the authorization flow.
+   */
+  Authenticator.prototype.load = function(authMode, data) {
+    this.idpOrigin_ = data.gaiaUrl || IDP_ORIGIN;
+    this.continueUrl_ = data.continueUrl || CONTINUE_URL;
+    this.continueUrlWithoutParams_ =
+        this.continueUrl_.substring(0, this.continueUrl_.indexOf('?')) ||
+        this.continueUrl_;
+    this.isConstrainedWindow_ = data.constrained == '1';
+
+    this.initialFrameUrl_ = this.constructInitialFrameUrl_(data);
+    this.reloadUrl_ = data.frameUrl || this.initialFrameUrl_;
+    this.authFlow_ = AuthFlow.DEFAULT;
+
+    this.webview_.src = this.reloadUrl_;
+    this.webview_.addEventListener(
+        'newwindow', this.onNewWindow_.bind(this));
+    this.webview_.request.onCompleted.addListener(
+        this.onRequestCompleted_.bind(this),
+        {urls: ['*://*/*', this.continueUrlWithoutParams_ + '*'],
+            types: ['main_frame']},
+        ['responseHeaders']);
+    this.webview_.request.onHeadersReceived.addListener(
+        this.onHeadersReceived_.bind(this),
+        {urls: [this.idpOrigin_ + '*'], types: ['main_frame']},
+        ['responseHeaders']);
+    window.addEventListener(
+        'message', this.onMessage_.bind(this), false);
+  };
+
+  /**
+   * Reloads the authenticator component.
+   */
+  Authenticator.prototype.reload = function() {
+    this.webview_.src = this.reloadUrl_;
+    this.authFlow_ = AuthFlow.DEFAULT;
+  };
+
+  Authenticator.prototype.constructInitialFrameUrl_ = function(data) {
+    var url = this.idpOrigin_ + (data.gaiaPath || IDP_PATH);
+
+    url = appendParam(url, 'continue', this.continueUrl_);
+    url = appendParam(url, 'service', data.service);
+    if (data.hl)
+      url = appendParam(url, 'hl', data.hl);
+    if (data.email)
+      url = appendParam(url, 'Email', data.email);
+    if (this.isConstrainedWindow_)
+      url = appendParam(url, 'source', CONSTRAINED_FLOW_SOURCE);
+    return url;
+  };
+
+  /**
+   * Invoked when a main frame request in the webview has completed.
+   * @private
+   */
+  Authenticator.prototype.onRequestCompleted_ = function(details) {
+    var currentUrl = details.url;
+    if (currentUrl.lastIndexOf(this.continueUrlWithoutParams_, 0) == 0) {
+      if (currentUrl.indexOf('ntp=1') >= 0) {
+        this.skipForNow_ = true;
+      }
+      this.onAuthCompleted_();
+      return;
+    }
+
+    if (this.isConstrainedWindow_) {
+      var isEmbeddedPage = false;
+      if (this.idpOrigin_ && currentUrl.lastIndexOf(this.idpOrigin_) == 0) {
+        var headers = details.responseHeaders;
+        for (var i = 0; headers && i < headers.length; ++i) {
+          if (headers[i].name.toLowerCase() == EMBEDDED_FORM_HEADER) {
+            isEmbeddedPage = true;
+            break;
+          }
+        }
+      }
+      if (!isEmbeddedPage && this.listener_) {
+        this.listener_.onResize(currentUrl);
+        return;
+      }
+    }
+
+    if (currentUrl.lastIndexOf(this.idpOrigin_) == 0) {
+      this.webview_.contentWindow.postMessage({}, currentUrl);
+    }
+
+    if (!this.loaded_) {
+      this.loaded_ = true;
+      if (this.listener_) this.listener_.onReady();

[xiyuan, 2014/10/23 19:32:03]

nit: Put "this.listener_.onReady()" on a separate line here and update other
one-line "if"s.

[guohui, 2014/10/23 20:13:34]

Done.

+    }
+  };
+
+  /**
+   * Invoked when headers are received in the main frame of the webview. It
+   * 1) reads the authenticated user info from a signin header,
+   * 2) signals the start of a saml flow upon receiving a saml header.
+   * @return {!Object} Modified request headers.
+   * @private
+   */
+  Authenticator.prototype.onHeadersReceived_ = function(details) {
+    var headers = details.responseHeaders;
+    for (var i = 0; headers && i < headers.length; ++i) {
+      var header = headers[i];
+      var headerName = header.name.toLowerCase();
+      if (headerName == SIGN_IN_HEADER) {
+        var headerValues = header.value.toLowerCase().split(',');
+        var signinDetails = {};
+        headerValues.forEach(function(e) {
+          var pair = e.split('=');
+          signinDetails[pair[0].trim()] = pair[1].trim();
+        });
+        // Removes "" around.
+        var email = signinDetails['email'].slice(1, -1);
+        if (this.email_ != email) {
+          this.email_ = email;
+          // Clears the scraped password if the email has changed.
+          this.password_ = null;
+        }
+        this.sessionIndex_ = signinDetails['sessionindex'];
+      } else if (headerName == SAML_HEADER) {
+        this.authFlow_ = AuthFlow.SAML;
+      }
+    }
+  };
+
+  /**
+   * Invoked when an HTML5 message is received.
+   * @param {object} e Payload of the received HTML5 message.
+   * @private
+   */
+  Authenticator.prototype.onMessage_ = function(e) {
+    if (e.origin != this.idpOrigin_) {
+      return;
+    }
+
+    var msg = e.data;
+
+    if (msg.method == 'attemptLogin') {
+      this.email_ = msg.email;
+      this.password_ = msg.password;
+      this.chooseWhatToSync_ = msg.chooseWhatToSync;
+    }
+  };
+
+  /**
+   * Invoked to process authentication completion.
+   * @private
+   */
+  Authenticator.prototype.onAuthCompleted_ = function() {
+    if (!this.listener_) return;
+
+    if (!this.email_ && !this.skipForNow_) {
+      this.webview_.src = this.initialFrameUrl_;
+      return;
+    }
+
+    this.listener_.onSuccess({email: this.email_,
+                              password: this.password_,
+                              usingSAML: this.authFlow_ == AuthFlow.SAML,
+                              chooseWhatToSync: this.chooseWhatToSync_,
+                              skipForNow: this.skipForNow_,
+                              sessionIndex: this.sessionIndex_ || ''});
+  };
+
+  /**
+   * Invoked when the webview attempts to open a new window.
+   * @private
+   */
+  Authenticator.prototype.onNewWindow_ = function(e) {
+    if (!this.listener_) return;
+
+    this.listener_.onNewWindow(e);
+  };
+
+  Authenticator.AuthFlow = AuthFlow;
+  Authenticator.AuthMode = AuthMode;
+
+  return {
+    // TODO(guohui, xiyuan): Rename GaiaAuthHost to Authenticator once the old
+    // iframe-based flow is deprecated.
+    GaiaAuthHost: Authenticator
+  };
+});