Add support for popup and auth configuration (#18)

* Add support for popup and auth configuration * Update version
rogebrd · Oct 21, 2020 · 6999dbf · 6999dbf
1 parent 55b2e17
commit 6999dbf
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ npm install --save-dev dropbox-oauth-popup
 Or you can use it directly in your browser be including the following tag
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.3.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.4.0"></script>
 ```
 
 ## License

diff --git a/examples/browser.html b/examples/browser.html
@@ -5,7 +5,7 @@
     <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dropbox/dist/Dropbox-sdk.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.3.1/dist/dropboxPopup.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.4.0/dist/dropboxPopup.js"></script>
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dropbox-oauth-popup",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "registry": "npm",
   "description": "This is a simple addition built onto the Dropbox SDK that allows for OAuth in the browser to be done via a popup window.",
   "homepage": "https://github.com/rogebrd/dropbox-oauth-popup",

diff --git a/src/dropboxPopup.js b/src/dropboxPopup.js
@@ -17,8 +17,15 @@ function dispatchResult() {
 
 window.addEventListener('load', dispatchResult);
 
-const popupFeatures = 'toolbar=no, menubar=no, width=600, height=800, top=100, left=100';
-const popupName = 'Dropbox OAuth';
+const windowName = 'Dropbox OAuth';
+const defaultWindowOptions = {
+  toolbar: 'no',
+  menubar: 'no',
+  width: 600,
+  height: 800,
+  top: 100,
+  left: 100,
+};
 
 /**
  * @class DropboxPopup
@@ -27,16 +34,57 @@ const popupName = 'Dropbox OAuth';
  * @param {string} [options.clientId] - The client id for your app.
  * @param {string} [options.clientSecret] - The client secret for your app.
  * @param {string} [options.redirectUri] - The redirect Uri to return to once auth is complete.
+ * @param {string} [options.tokenAccessType] - type of token to request.  From the following:
+ * legacy - creates one long-lived token with no expiration
+ * online - create one short-lived token with an expiration
+ * offline - create one short-lived token with an expiration with a refresh token
+ * @param {Array<string>} [options.scope] - scopes to request for the grant
+ * @param {string} [options.includeGrantedScopes] - whether or not to include
+ * previously granted scopes.
+ * From the following:
+ * user - include user scopes in the grant
+ * team - include team scopes in the grant
+ * Note: if this user has never linked the app, include_granted_scopes must be None
+ * @param {boolean} [options.usePKCE] - Whether or not to use Sha256 based PKCE.
+ * PKCE should be only use on client apps which doesn't call your server.
+ * It is less secure than non-PKCE flow but can be used if you are unable to safely
+ * retrieve your app secret
+ * @param {object} windowOptions
+ * @param {number} [windowOptions.width] - The width of the popup window in pixels.
+ * @param {number} [windowOptions.height] - The height of the popup window in pixels.
+ * @param {number} [windowOptions.top] - The number of pixels from the top of the screen.
+ * @param {number} [windowOptions.left] - The number of pixels from the left side of the screen.
+ * @param {object} [windowOptions.additionalParams] - Any additional parameters desired to be used
+ * with the window.open() command. Note, by default, we add the parameters toolbar=no and menubar=no
+ * in order to ensure this opens as a popup.
  */
 export default class DropboxPopup {
-  constructor(options) {
+  constructor(options, windowOptions) {
     this.clientId = options.clientId;
-    this.clientSecret = options.clientSecret;
+    this.redirectUri = options.redirectUri;
+    this.clientSecret = options.clientSecret || '';
+    this.tokenAccessType = options.tokenAccessType || 'offline';
+    this.scope = options.scope || null;
+    this.includeGrantedScopes = options.includeGrantedScopes || 'none';
+    this.usePKCE = options.usePKCE || false;
+
     this.authObject = new DropboxAuth({
       clientId: this.clientId,
       clientSecret: this.clientSecret,
     });
-    this.redirectUri = options.redirectUri;
+
+    this.state = Math.random().toString(36).substring(7);
+
+    // Set window options with format of key=value,key=value...
+    const overlayedWindowOptions = Object.assign(defaultWindowOptions, windowOptions);
+    this.windowOptions = '';
+    Object.keys(overlayedWindowOptions).forEach((key) => {
+      if (this.windowOptions === '') {
+        this.windowOptions = `${key}=${overlayedWindowOptions[key]}`;
+      } else {
+        this.windowOptions = this.windowOptions.concat(`, ${key}=${overlayedWindowOptions[key]}`);
+      }
+    });
   }
 
   /**
@@ -49,8 +97,8 @@ export default class DropboxPopup {
     window.removeEventListener('message', this.handleRedirect);
     this.callback = callback;
     this.callback.bind(this);
-    const authUrl = this.authObject.getAuthenticationUrl(this.redirectUri, '', 'code', 'offline');
-    const popupWindow = window.open(authUrl, popupName, popupFeatures);
+    const authUrl = this.authObject.getAuthenticationUrl(this.redirectUri, this.state, 'code', this.tokenAccessType, this.scope, this.includeGrantedScopes, this.usePKCE);
+    const popupWindow = window.open(authUrl, windowName, this.windowOptions);
     popupWindow.focus();
 
     window.addEventListener('message', (event) => this.handleRedirect(event), false);

diff --git a/test/static/index.html b/test/static/index.html
@@ -2,7 +2,6 @@
 <html>
 
 <head>
-    <script rel="stylesheet" src="styles.css"></script>
     <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dropbox/dist/Dropbox-sdk.js"></script>
@@ -11,24 +10,38 @@
 
 <body>
     <div>
-        <h1>Dropbox OAuth Popup Window Example</h1>
+        <h1>Dropbox OAuth Popup Window</h1>
+        <p>
+            See the Dropbox OAuth Popup Window in action by clicking the run example button.
+            This example will authenticate with your Dropbox account and use the token to fetch
+            the current account using the `users.getCurrentAccount` endpoint. (Note, nothing is
+            saved, this is just a demo.)
+        </p>
+        <p>See the code on <a
+                href="https://github.com/rogebrd/dropbox-oauth-popup/blob/main/examples/browser.html">GitHub</a></p>
         <button onclick="runAuth()">Run Example</button>
         <p id="result"></p>
         <script>
             const popup = new DropboxPopup({
-                clientId: 'XXXXXXXXXX',
-                clientSecret: 'XXXXXXXXXX',
-                redirectUri: 'https://XXXXXXXXXX'
+                clientId: 'a04f1ghft6a45rn',
+                clientSecret: 'tbjemcamktbyiy9',
+                redirectUri: 'http://localhost:8080'
+            }, {
+                height: 600,
+                width: 400,
+                top: 100,
+                left: 100
             });
             function runAuth() {
+                document.getElementById("result").innerHTML = "Waiting for auth...";
                 popup.authUser((auth) => {
                     const dbx = new Dropbox.Dropbox(auth);
                     dbx.usersGetCurrentAccount()
                         .then((response) => {
-                            document.getElementById("result").innerHTML = result.result;
+                            document.getElementById("result").innerHTML = JSON.stringify(response.result);
                         })
                         .catch((error) => {
-                            console.error(error);
+                            document.getElementById("result").innerHTML = error;
                         });
                 });
             }