How to use dropbox.js with OAuth 1

Question

I am rebuilding an existing website, and although I have the code for the old one, I am facing some difficulties getting a similar functionality to work in the new version.

Here is the scenario :

User is shown a web form where they can input their dropbox files for processing by the server.

User clicks a "Connect to dropbox button" and after authentication, the web form receives "token" and "tokenSecret" values which it includes in the POST request to the server, which contains the file names too.

The server code I cannot modify, it uses the token and token Secret values to download the files from dropbox.

The old code looks like this :

function connectToDropbox(event)
{
    var client;
    event.preventDefault();
    client = new Dropbox.Client(
    {
        key : "alku14nsuab=|izwocx+Xbnsa297hi/zcbhiwbvlmzvfsfheuzuawrt==",
        sandbox : true
    });

    client.authDriver(new Dropbox.Drivers.Redirect(
    {
        useQuery : false,
        rememberUser : true
    }));

    return client.authenticate(function(error, client)
    {
        $('.dropbox-linked').hide();
        return $('.dropbox-unlinked').show();
    });
}

The developers who wrote this haven't left any details about the dropbox app so I made a new one.

The moment I execute :

client = new Dropbox.Client({ key: "myappskey" });

I get :

InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
code: 5
message: "Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."
name: "InvalidCharacterError"
stack: "Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at Error (native)
    at atob (http://127.0.0.1:8000/portal/static/js/dropbox.js:56:23)
    at dropboxEncodeKey (http://127.0.0.1:8000/portal/static/js/dropbox.js:1627:16)
    at Oauth.Dropbox.Oauth.Oauth.reset (http://127.0.0.1:8000/portal/static/js/dropbox.js:1512:23)
    at new Oauth (http://127.0.0.1:8000/portal/static/js/dropbox.js:1500:12)
    at new Client (http://127.0.0.1:8000/portal/static/js/dropbox.js:165:20)
    at <anonymous>:2:11
    at Object.InjectedScript._evaluateOn (<anonymous>:704:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:643:52)
    at Object.InjectedScript.evaluate (<anonymous>:557:21)"
__proto__: DOMException

Obviously something is wrong because i have a key that looks like "spx9kiuauqx0hob"

Whereas the old code has : "alku14nsuab=|izwocx+Xbnsa297hi/zcbhiwbvlmzvfsfheuzuawrt=="

The source code of dropbox shows it's splitting on '|' and then calling atob()

My dropbox app console shows an app key and a secret. It says that key and secret is usually used by server apps and javascript client apps should use only key.

What should I put in the Dropbox.Client constructor to make it work?

This is Dropbox.js version 0.7.1

Thanks in advance

Greg · Accepted Answer · 2014-08-13 18:55:24Z

2

Current versions of dropbox.js use OAuth 2, and so don't require that the app secret be used. That's the method of intiializtion shown here:

// Browser-side applications do not use the API secret.
var client = new Dropbox.Client({ key: "your-key-here" });

While we do recommend using the last version with OAuth 2, in your case, it sounds like you have a legacy requirement to continue using OAuth 1. In older versions of dropbox.js (e.g., 0.7.1) which did use OAuth 1, the app secret was required (for OAuth 1 to work), and the library accepted the key and secret together in an encoded format. You can encode a new app key and secret using this tool.

answered Aug 13, 2014 at 18:55

Greg

17k2 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rep_movsd Over a year ago

This worked, thanks! I assume storing the secret and key in the browser code is a security issue? I noticed that with OAuth 1 , the dropbox server doesn't verify the URL or anything unlike OAuth 2

Greg Over a year ago

Yes, it's a somewhat fundamental issue of using OAuth 1 in client-side apps like this. I'm not sure I know which URL/verification you're referring to though. Perhaps you mean the requirement in OAuth 2 but not one to pre-register the redirect URI? If so, yes, that is a different between the two, per the specs.

rep_movsd Over a year ago

We'll have to overhaul the backend in that case and switch to OAuth 2 I suppose.

Collectives™ on Stack Overflow

How to use dropbox.js with OAuth 1

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related