CODEWITHSUNDEEP
javascriptoauthdropboxdropbox-api
rep_movsd
rep_movsd

Reputation: 6895

How to use dropbox.js with OAuth 1

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

Upvotes: 0

Views: 276

Answers (1)

Greg
Greg

Reputation: 16930

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.

Upvotes: 2

Related Questions