Update to Chrome Extension OAuth2 Library by Juan Ramirez (whoisjuan)

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright 2012 JJ Ford
+Copyright-2017 2012: Original Author, JJ Ford and Contributor, Juan J Ramirez.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -10,4 +10,4 @@ Copyright 2012 JJ Ford
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

README.md

@@ -1,22 +1,31 @@
-Chrome Extension OAuth2 Library
+<p align="center">
+  <img src="https://whoisjuan.github.io/alt-images/chromeauth2.png" alt="ChromeAuth2: Chrome Extension OAuth2 Library"/>
+</p>
 ===============================
-Provides a simple way to retrieve an OAuth2 token for API authorization within a Google Chrome Extension.
 
+<br>
+
+ChromeAuth2 is a Chrome Extension OAuth2 Library that provides a straight-forward and easy-to-use alternative to launch an OAuth2 Flows within a Chrome Extension.
+
+By using ChromeAuth2 you would be able to start an authorization process from a Chrome Extension `popup.html` view. ChromeAuth2 would then complete the authorization "dance" and store the token in a Chrome Storage instance that can be accessed from any script within your extension. 
+
+<br>
+<br>
 
 How To Use
 ----------
-1. Add the following to your extension manifest:
+#### 1. Add the following to your extension manifest:
 
-	Note: The `permissions` url and `content_script` > `matches` URL are determined by the API you are requesting authorization for.
 
-	```text
+
 	{
 		...
 		...
 
 		"permissions":{
 			"https://github.com/login/oauth/access_token",
-			"tabs"
+			"tabs",
+			"storage"
 		},
 
 		"content_scripts":[{
@@ -28,11 +37,29 @@ How To Use
 		...
 		...
 	}
-	```
 
-2. Add application and API information to `libs/chrome-ex-auth/oauth2.js`:
 
-	```javascript
+The `permissions` url and `content_script` > `matches` URL are determined by the API you are requesting authorization for. We will be requesting permission to launch tabs and use the Chrome native storage.
+
+We also would need to grant permission to an injection script ('injection.js') that would be launched to complete the OAuth dance. Please have in mind that you need to replace the "matches" URL with your OAuth Redirection URL. The injection would be launched after hitting the Redirection URL. In this case you would need to replace `https://github.com/robots.txt*` with the URL you setup with your authorization provider.
+
+<br>
+
+Also make sure to give "Web Accesible Resources" permissions to your 'libs' folders. The extension would need explicit access to this folder after adding the library.
+
+
+		{
+		      "web_accessible_resources": [
+				"libs/*"
+			  ]
+		}
+
+<br>
+<br>
+
+#### 2. Add your application and API provider information to `libs/chrome-ex-auth/oauth2.js`:
+
+
 		(function() {
 			window.oauth2 = {
 
@@ -47,13 +74,31 @@ How To Use
 			...
 
 		})();			
+
+
+***Note:*** The provided function is only a boiler-plate. The variable names and the variables you pass to the Authorization API would be specific to your API provider. Some authorization APIs would require other parameters like  `scope` and `response-type`. 
+
+You would need to include those parameters in your initial variables and modify the `start()` function to include the newly added parameters. You might also need to add some logic if you have an array of scopes or other array of values that need to be passed to the URL:
+
+
+		start: function() {
+			    window.close();
+			    // Modify this url depending on the parameters that your API providers requires you to pass.
+			    var url = this.authorization_url + "?client_id=" + this.client_id + "&redirect_uri=" + this.redirect_url + "&response_type=" + this.response_type + "&scope=" + this.scope;
+			    // Use this logic to include several scopes.
+			    // for(var i in this.scopes) {
+			    //     url += this.scopes[i];
+			    // }
+			    chrome.tabs.create({ url: url, active: true });
+			},		
 
-	```
 
+<br>
+<br>
+
+#### 3. Include the authorization script `popup.html` view of your project:
 
-3. Include the authorization script in your project:
 
-	```html
 	<html>
 	...
 	...
@@ -67,15 +112,68 @@ How To Use
 		...
 	</body>
 	</html>
-	```
 
-4. To authorize the application from your script:
+
+<br>
+<br>
+
+#### 4. To launch the authorization flow, run this function from your script: 
 
-	```javascript
 	window.oauth2.start();
-	```
+
+
+The ideal way to call `oauth2.start()` function and initialize the library flow is by calling it from a button or link in your extension html:
 
-5. Include attribution to library.
+popup.html
+
+	<button id="oauth-button> Click Me to Authorize with GitHub</button>
+<br>
+
+popup.js or background.js
+
+	$('#oauth-button').click(function() {
+            window.oauth2.start();
+	});
+
+<br>
+<br>
+
+#### 5. Please include attribution to library: 
+
+For your convenience here is a comment that you can add to your extension for attribution:
+
+	/**
+	* ChromeAuth2 is a fork from the open-source library 'chrome-ex-oauth2' originally created by https://github.com/jjNford
+	* This version of the library was developed, documented and branded by https://github.com/whoisjuan
+	*
+	* Redistribution of this work, with or without modification, is permitted if
+	* proper attributions to the original author and main contributors are added.
+	* The orginal author and main contributors encourage the use of their work but 
+	* do not endorse any specific project in which their work is used.
+
+
+	*Copyright-2017 2012: Original Author, JJ Ford and Contributor, Juan J Ramirez.
+
+   	*Licensed under the Apache License, Version 2.0 (the "License");
+   	*you may not use this file except in compliance with the License.
+   	*You may obtain a copy of the License at
+
+       	*http://www.apache.org/licenses/LICENSE-2.0
+	*/
+
+<br>
+<br>
+
+How Does it Work
+----------
+
+<p align="center">
+  <img src="https://whoisjuan.github.io/alt-images/flow.png" alt="ChromeAuth2: Chrome Extension OAuth2 Library Flow"/>
+</p>
+
+
+<br>
+<br>
 
 API
 ---
@@ -86,15 +184,21 @@ API
 
 <br>
 
+>**finish()**
+><br><br>
+>Finishes the authorization process (Already setup on the library flow. If you want to alter this function or its behavior, make sure to use it exclusively within the OAuth flow and after succesfully invoking and executing. `start()`.
+
+<br>
+
 >**getToken()**
 ><br><br>
->Retrieves the applications authorization token from the browsers local storage.
+>Retrieves the applications authorization token from the Chrome Storage.
 
 <br>
 
 >**clearToken()**
 ><br><br>
->Clears the applications token from the browsers local storage.
+>Clears the applications token from the Chrome Storage.
 
 --
-<sub>This library has only been tested with the [GitHub API v3](http://developer.github.com/v3/)</sub>
+<sub>This library has only been tested with the [GitHub API v3](http://developer.github.com/v3/) and [LIFX Remote Control API v1] (https://api.developer.lifx.com/)</sub>

oauth2.js

@@ -58,8 +58,18 @@
                             if(xhr.responseText.match(/error=/)) {
                                 removeTab();
                             } else {
-                                var token = xhr.responseText.match(/access_token=([^&]*)/)[1];
-                                window.localStorage.setItem(that.key, token);
+                                // Parsing JSON Response.
+                                var response = xhr.responseText;
+                                var jsonResponse = JSON.parse(response);
+                                // Replace "access_token" with the parameter
+                                // relevant to the API you're using.
+                                var tokenOauth = jsonResponse.access_token
+                                var obj = { 'token': tokenOauth };
+                                // Storing in Chrome Local Storage.
+                                chrome.storage.local.set(obj, function() {
+                                    // Notify that we saved.
+                                    console.log('oAuth Token saved');
+                                });
                                 removeTab();
                             }
                         } else {
@@ -71,21 +81,23 @@
                 xhr.send(data);
             }
         },
-
+        
         /**
-         * Retreives the authorization token from local storage.
-         *
-         * @return Authorization token if it exists, null if not.
+         * Retreives the authorization token from Chrome Storage.
          */
         getToken: function() {
-            return window.localStorage.getItem(this.key);
+            chrome.storage.local.get("token", function(result) {
+                return result.token
+            });
         },
 
         /**
-         * Clears the authorization token from the local storage.
+         * Clears the authorization token from the Chrome storage.
          */
         clearToken: function() {
-            delete window.localStorage.removeItem(this.key);
+            chrome.storage.local.remove("token", function() {
+                console.log("Token Cleared")
+            });
         }
     }
-})();
+})();