diff --git a/README.md b/README.md
index 281250e..34aee5c 100644
--- 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
```
-
+
```
## License
diff --git a/examples/browser.html b/examples/browser.html
index dd32c46..952719c 100644
--- a/examples/browser.html
+++ b/examples/browser.html
@@ -5,7 +5,7 @@
-
+
diff --git a/package.json b/package.json
index 41879a6..2213425 100644
--- 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
index b12b1b2..1af3f89 100644
--- 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} [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
index 32a7b50..2ad0c33 100644
--- a/test/static/index.html
+++ b/test/static/index.html
@@ -2,7 +2,6 @@
-
@@ -11,24 +10,38 @@
-
Dropbox OAuth Popup Window Example
+
Dropbox OAuth Popup Window
+
+ 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.)
+