Add Credential Management API and Payment Request API implementations

README.md

@@ -9,13 +9,12 @@ Install [polymer-cli](https://github.com/Polymer/polymer-cli):
 
     npm install -g polymer-cli
 
-
 ##### Setup
     # Using CLI
     mkdir shop
     cd shop
     polymer init shop
-    
+
     # Or cloning direct from GitHub
     git clone https://github.com/Polymer/shop.git
     cd shop
@@ -38,7 +37,7 @@ Install [polymer-cli](https://github.com/Polymer/polymer-cli):
 This command serves the minified version of the app in an unbundled state, as it would be served by a push-compatible server:
 
     polymer serve build/unbundled
-    
+
 This command serves the minified version of the app generated using fragment bundling:
 
     polymer serve build/bundled

auth-mock.js

@@ -0,0 +1,170 @@
+var DATABASE_NAME = 'auth_db';
+var DB_VERSION = 1;
+var OBJECT_STORE_NAME = 'auth_object_store';
+
+self.addEventListener('fetch', function(event) {
+  var response = null;
+  var request = event.request.clone();
+
+  // Filter everything else but urls starting with `/auth/`.
+  if (/\/auth\/.*$/.test(request.url)) {
+    event.respondWith(
+      // Get POST payload
+      request.text().then(function(text) {
+        // Retrieve key:val from payload
+        var params = multipartFormParser(text);
+        params.name     = params.name || '';
+        params.id       = params.id || params.email;
+        params.imageUrl = params.imageUrl || '';
+        params.email    = params.email;
+
+        // For password authentication
+        if (/\/auth\/password/.test(request.url)) {
+          delete params.id_token;
+          if (!params.email || !params.password) {
+            return Promise.reject('Bad Request', 400);
+          } else {
+            return db.get(params);
+          }
+        // For signing up
+        } else if (/\/auth\/register/.test(request.url)) {
+          if (!params.email || !params.password) {
+            return Promise.reject('Bad Request', 400);
+          } else {
+            return db.add(params);
+          }
+        // For Google Sign-In
+        } else if (/\/auth\/google/.test(request.url)) {
+          return verifyIdToken(params.id_token);
+        }
+        return Promise.reject();
+      }).then(function(result) {
+        // Successful authentication
+        delete result.password;
+        var response = new Response(JSON.stringify(result), {
+          status: 200,
+          contentType: 'application/json'
+        });
+        return response;
+      }).catch(function(text, status) {
+        // Authentication failure
+        var response = new Response(text || 'Authentication failed.', {
+          status: status || 401,
+          statusText: text || 'Authentication failed.'
+        });
+        return response;
+      })
+    );
+  } else {
+    event.respondWith(fetch(request));
+  }
+});
+
+// Retrieve multipart form payload and extract POST'ed data.
+var multipartFormParser = function(body, param) {
+  var results = {};
+  var params = ['id', 'email', 'password', 'name', 'iconURL', 'id_token'];
+  for (var i in params) {
+    var param = params[i];
+    var regex = new RegExp('Content-Disposition: form-data; name="'+param+'"[\\s\\S]{4}(.+)[\\s\\S]', 'm');
+    var result = regex.exec(body);
+    if (result) {
+      results[param] = result[1];
+    }
+  }
+  return results;
+};
+
+// Verify Google Id Token with official endpoint.
+var verifyIdToken = function(id_token) {
+  var VERIFY_ENDPOINT = 'https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=';
+  return fetch(VERIFY_ENDPOINT+id_token)
+  .then(function(res) {
+    if (res.status == 200) {
+      return res.json();
+    } else {
+      throw 'Verification failed';
+    }
+  }).then(function(data) {
+    return db.add({
+      id:       data.sub,
+      email:    data.email,
+      imageUrl: data.picture,
+      name:     data.name
+    });
+  });
+};
+
+// Simple database implementation that stores authentication information
+var DB = function() {
+  var that = this;
+  this.isReady = (function() {
+    return new Promise(function(resolve, reject) {
+      if (!'indexedDB' in self) {
+        reject();
+      }
+      var req = self.indexedDB.open(DATABASE_NAME, DB_VERSION);
+      req.onsuccess = function(e) {
+        that.db = e.target.result;
+        resolve();
+      };
+      req.onerror = function(e) {
+        reject();
+      };
+      req.onblocked = function(e) {
+        reject();
+      };
+      req.onupgradeneeded = function(e) {
+        that.db = e.target.result;
+        if (e.oldVersion <= 1) {
+          that.db.createObjectStore(OBJECT_STORE_NAME, {keyPath: 'id'});
+        }
+      };
+    });
+  })();
+};
+DB.prototype.transaction = function() {
+  var that = this;
+  return new Promise(function(resolve, reject) {
+    that.isReady.then(function() {
+      resolve(that.db.transaction(OBJECT_STORE_NAME, 'readwrite'));
+    }).catch(function() {
+      reject();
+    });
+  })
+}
+// Add an account
+DB.prototype.add = function(params) {
+  var that = this;
+  return new Promise(function(resolve, reject) {
+    this.db.transaction().then(function(trans) {
+      var req = trans.objectStore(OBJECT_STORE_NAME).put(params);
+      req.onsuccess = function(e) {
+        resolve(params);
+      };
+      req.onerror = reject;
+      trans.onerror = reject;
+    });
+  });
+};
+// Get an account
+DB.prototype.get = function(params) {
+  var that = this;
+  return new Promise(function(resolve, reject) {
+    that.transaction().then(function(trans) {
+      var req = trans.objectStore(OBJECT_STORE_NAME).get(params.id);
+      req.onsuccess = function(e) {
+        var profile = e.target.result;
+        if (profile && profile.password == params.password) {
+          resolve(profile);
+        } else {
+          reject();
+        }
+      }
+      req.onerror = reject;
+      trans.onerror = reject;
+    });
+  });
+};
+
+var db = new DB();

bower.json

@@ -19,7 +19,9 @@
     "iron-pages": "polymerelements/iron-pages#^1.0.0",
     "iron-selector": "polymerelements/iron-selector#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
-    "paper-spinner": "polymerelements/paper-spinner#^1.0.0"
+    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
+    "fetch": "^1.0.0",
+    "google-apis": "GoogleWebComponents/google-apis#^1.1.7"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"

index.html

@@ -17,6 +17,8 @@
   <title>SHOP</title>
 
   <link rel="shortcut icon" sizes="32x32" href="/images/shop-icon-32.png">
+  <meta name="google-signin-client_id" content="569649340112-da0ku71mend03mdsu9h7skmv33r2qkg2.apps.googleusercontent.com">
+  <script src="/bower_components/fetch/fetch.js" async></script>
 
   <meta name="theme-color" content="#fff">
   <link rel="manifest" href="/manifest.json">
@@ -53,7 +55,7 @@
 <body>
 
   <shop-app unresolved>SHOP</shop-app>
-
+  <input id="csrf_token" type="hidden" name="csrf_token" value="" />
   <script>
     window.performance && performance.mark && performance.mark('index.html');
 

polymer.json

@@ -5,6 +5,7 @@
     "src/shop-list.html",
     "src/shop-detail.html",
     "src/shop-cart.html",
+    "src/shop-account.html",
     "src/shop-checkout.html",
     "src/lazy-resources.html"
   ],
@@ -15,7 +16,9 @@
    "bower.json"
   ],
   "includeDependencies": [
+    "auth-mock.js",
     "manifest.json",
+    "bower_components/fetch/fetch.js",
     "bower_components/webcomponentsjs/webcomponents-lite.min.js"
   ]
 }

src/lazy-resources.html

@@ -11,13 +11,16 @@
 <!-- shop-app -->
 <link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="shop-account-data.html">
 <link rel="import" href="shop-analytics.html">
 <link rel="import" href="shop-cart-data.html">
 <link rel="import" href="shop-cart-modal.html">
 <link rel="import" href="shop-icons.html">
+<link rel="import" href="shop-order-success-modal.html">
 <link rel="import" href="shop-snackbar.html">
 <link rel="import" href="shop-tabs.html">
 <link rel="import" href="shop-tab.html">
+<link rel="import" href="shop-payment-request.html">
 
 <!-- shop-home -->