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.) +

+

See the code on GitHub