nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Open Dropbox API Authorization request in a new Tab

Humza A.

I have a web application running on my local host and I am using Dropbox Core API in the web app to upload files. However, the Dropbox authentication page opens in the same tab in the browser as my webapp. Is it possible that I force Dropbox API authorization webpage to open in a new tab? Is there a setting for this in Dropbox Core API?

Find more posts tagged with

API

Abuse

Comments

Greg-DB

The API itself doesn't offer an option for this, as the Dropbox API app authorization page is just a normal web page on the Dropbox web site, so this would be more of a browser behavior. That is, you can instruct the browser to open a link in a new tab/window (e.g., see these StackOverflow posts: Open link in new tab, How can I open a link in new tab (and not new window)?).

Or, you can open the page in a popup window, like the dropbox.js library does.

Humza A.

just by adding "_BLANK" attribute to <a> doesnot make this work. I doubt if this would be that straightforward. May be dropbox doesnot want its auth window to be opened in a new tab, otherwise what is the sense behind them asking for redirect uri.

Steve M.

You mean target="_blank", right? If that's not working for you, perhaps you can share your code, but it sounds like purely an HTML issue. The Dropbox API doesn't know or care whether you open the auth page in the same browser tab or a different one.

Humza A.

The code is the same as HelloWorld Dropbox code. I have pasted it below.

<!doctype html>
<html>
<head>
<script src="https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<center>
<a id="writeButton" target="_BLANK" >Click to create hello.txt in Dropbox. </a>
</center>

<script>
var client = new Dropbox.Client({ key: '<your-app-key>' });

function doHelloWorld() {
client.writeFile('hello.txt', 'Hello, World!', function (error) {
if (error) {
alert('Error: ' + error);
} else {

alert('File written successfully!');
}
});
}

// Try to complete OAuth flow.
client.authenticate({ interactive: false }, function (error, client) {
if (error) {
alert('Error: ' + error);
}
});

if (client.isAuthenticated()) {
doHelloWorld();
}

document.getElementById('writeButton').onclick = function () {
client.authenticate(function (error, client) {
if (error) {
alert('Error: ' + error);
} else {
doHelloWorld();
}
});
}
</script>
</body>
</html>

Steve M.

Well yes, you're adding target="_blank" to an anchor tag but then intercepting the click. :-)

It looks like you're using dropbox.js to open the auth page. Take a look at https://github.com/dropbox/dropbox-js/blob/stable/guides/builtin_drivers.md, which Greg linked to in his first response. There you'll find the various options that the dropbox.js library has implemented. I think the popup driver is probably your best bet. JavaScript can't force a page to open in a new tab versus a new window. (This is controlled by the browser and varies from browser to browser.)

You could use an actual anchor tag with target="_blank", but this sort of thing isn't implemented in dropbox.js, so you'd be on your own to construct the right URL.

Humza A.

I do not care if its another window or another tab, only thing I wish is stop dropbox auth driver to do redirect on my web app, because that forces the app to refresh itself thus losing its flow.

I guess I will look into the pop-up driver then. Many Thanks for your help in this.