[NaCl SDK] Expose Google Drive to nacl_io.

native_client_sdk/src/examples/demo/nacl_io_demo/example.js

-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright (c) 2016 The Chromium Authors. All rights reserved.

[binji, 2016/08/22 19:21:52]

It's not necessary to change the copyright year.

[chanpatorikku, 2016/08/29 17:14:02]

Done.

 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+var CLIENT_ID = "TO FILL";

[binji, 2016/08/22 19:21:52]

Where is this filled in? If it is meant to be filled in by the developer
building the example, that needs to be documented somewhere. The best place
would be on the example page. Similarly, if the value has not been filled in, a
clear error message should be displayed, explaining where to fill in the values
(and how to get them).

[chanpatorikku, 2016/08/29 17:14:02]

This is filled in in example.js.

The Drive example in chromium/src/native_client_sdk/src/examples/demo/drive
stores client ID in manifest.json.  The client ID and the client secret are
meant to be filled in in a similar way in example.js.  

Documentation is written in index.html as:

...
      <li><i>/googledrive</i> a Google Drive mount. Before using, client ID
          and client secret, created from Google Developers Console, have to
          be filled in in example.js. When they have already been filled,
          use makefile on nacl_io_demo, and click on the sign-in button to
          expose Google Drive to nacl_io.</li>
...

If the value has not been filled in, and the “Sign in” button is clicked for
signing in to a Google account, an error message is shown as a JavaScript alert:

  if (CLIENT_ID == "TO FILL" || CLIENT_SECRET == "TO FILL") {
    alert('Error: CLIENT_ID or CLIENT_SECRET is not set.' +
          ' Please fill in CLIENT_ID and CLIENT_SECRET,' +
          ' created from Google Developers Console, in example.js.' +
          ' After that, use makefile on nacl_io_demo and rerun the' +
          ' demo.');
  }

+var CLIENT_SECRET = "TO FILL";
+
+var REDIRECT_URI = "http://localhost:5103/index.html";
+
+var currentURL = window.location.href;
+var tokenValue = "Set at domContentLoaded()";
+
+function buttonOnClick() {
+  var array = new Uint32Array(3);
+  window.crypto.getRandomValues(array);
+  var stateValue = array[0].toString() +
+    array[1].toString() +
+    array[2].toString();
+
+  var url = "http://accounts.google.com/o/oauth2/v2/auth?" +
+    "scope=https://www.googleapis.com/auth/drive"
+       + "+" + "https://www.googleapis.com/auth/drive.metadata" + "&" +
+    "state=" + stateValue + "&" +
+    "redirect_uri=http://localhost:5103/index.html" + "&" +
+    "response_type=code" + "&" +
+    "client_id=" + CLIENT_ID;
+
+  window.open(url, "_self");
+}
+
+function executeAfterGettingCode() {
+  var codeKeyIndex = currentURL.search("code=");

[binji, 2016/08/22 19:21:52]

you can just use indexOf instead of search. search performs a regular expression
search.

[chanpatorikku, 2016/08/29 17:14:02]

Done.

+  if (-1 == codeKeyIndex) {
+    return -1;
+  }
+  var codeValue = currentURL.substring(codeKeyIndex + 5);
+
+  var xHTTP = new XMLHttpRequest();
+  xHTTP.onreadystatechange = function() {
+    if (xHTTP.readyState == 4 && xHTTP.status == 200) {
+      var obj = JSON.parse(xHTTP.responseText);
+      var url = REDIRECT_URI + "?token=" + obj.access_token;
+
+      window.open(url, "_self");
+    }
+  };
+
+  xHTTP.timeout = 4000; // Set timeout to 4 seconds (4000 milliseconds)
+  xHTTP.ontimeout = function () { alert("Timed out"); }
+
+  var params = "code=" + codeValue + "&" +
+    "client_id=" + CLIENT_ID + "&" +
+    "client_secret=" + CLIENT_SECRET + "&" +
+    "redirect_uri=" + REDIRECT_URI + "&" +
+    "grant_type=authorization_code";
+
+  xHTTP.open("POST", "https://www.googleapis.com/oauth2/v4/token", true);
+  xHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+  xHTTP.send(params);
+}
+
 function moduleDidLoad() {
   common.hideModule();
 }
 
 function $(id) {
   return document.getElementById(id);
 }
 
 // Called by the common.js module.
 function domContentLoaded(name, tc, config, width, height) {
   navigator.webkitPersistentStorage.requestQuota(5 * 1024 * 1024,
       function(bytes) {
         common.updateStatus(
             'Allocated ' + bytes + ' bytes of persistant storage.');
         common.attachDefaultListeners();
-        common.createNaClModule(name, tc, config, width, height);
+ 
+        var tokenKeyIndex = currentURL.search("token=");
+        if (-1 == tokenKeyIndex) {
+          common.createNaClModule(name, tc, config, width, height);
+        } else {
+          tokenValue = currentURL.substring(tokenKeyIndex + 6);
+          var tokenMap = { 'token' : tokenValue };
+
+          common.createNaClModule(name, tc, config, width, height, tokenMap);
+
+          document.getElementById("buttonid").disabled = true;
+        }
       },
       function(e) { alert('Failed to allocate space') });
 }
 
 // Called by the common.js module.
 function attachListeners() {
   var radioEls = document.querySelectorAll('input[type="radio"]');
   for (var i = 0; i < radioEls.length; ++i) {
     radioEls[i].addEventListener('click', onRadioClicked);
   }
@@ skipping 305 matching lines @@
       if (!callback) {
         common.logMessage('Error: Bad message ' + funcName +
                           ' received from NaCl module.');
         return;
       }
 
       delete funcToCallback[funcName];
       callback.apply(null, params);
     }
   } else {
-    common.logMessage('Error: Unknow message `' + data +
+    common.logMessage('Error: Unknown message `' + data +
                       '` received from NaCl module.');
   }
 }