Cordova mobile app and Dropbox API v2

Question

Has anyone gotten the Dropbox API v2 working in a Cordova mobile application? Or even a mobile application period? There is a tutorial for the API v1 & Cordova: http://ourcodeworld.com/articles/read/149/how-to-use-dropbox-in-a-cordova-application But Dropbox has or is deprecating it.

I have a Github project that is a basic Cordova project (version 6.5.0) and has the Dropbox API v2 included. I can get the project to get to the authorization screen but I believe my issue is the redirect URI.

I'm using:

Cordova 6.5.0
testing on Android
Dropbox API v2: https://github.com/dropbox/dropbox-sdk-js
Authorization example: https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/auth/index.html

But again, I have already put everything into a Github repo: https://github.com/ModusPwnens1337/dropboxTest

I believe the redirect URI is the issue, you can find it on line 128 in the index.html:

var authUrl = dbx.getAuthenticationUrl('https://www.dropbox.com/oauth2/authorize?response_type=token&client_id=8nvbrxvlg96tx1k&redirect_uri=helloworld://localhost/callback');

Please let me know if anyone has gotten or can get the authorization to redirect back to the mobile app.

Thank you in advance!

Do you have a plugin that uses Dropbox API V2? How did you implemented the Dropbox API V2 functionality in your APP? — Nikhil
I still working migration and need some help. Previously I was using ross martin plugin for Dropbox functionality. Now as no other plugins are available for API V2, I am trying to implement the dropbox functionality using Dropbox sdk github.com/dropbox/dropbox-sdk-js. I have tried to use the customurlscheme plugin to provide redirect uri,but after adding the plugin it removes many files from my project. So I am currently using the authenticateWithCordova() method from the javascript sdk (dropbox.github.io/dropbox-sdk-js) . — Nikhil
This method uses dropbox.com/1/oauth2/redirect_receiver as redirect uri. It works when user click authentication button for the first time(returning the access token). Problems: 1.)If same user tries to authenticate again it shows a black screen and redirects user to the App. 2.)Which method to use for uploading the files ? I tried using filesUpload() method which requires file content as parameter. So how to provide file contents in Javascript or in Cordova? — Nikhil

ModusPwnens ModusPwnens · Accepted Answer · 2017-02-23T20:38:10

Alright so I have figured this out! I had three issues with the project:

My redirect URI was wrong, it should have just been the following:

var authUrl = dbx.getAuthenticationUrl('helloworld://localhost/callback');
I didn't set the custom URL scheme properly, luckily there is a nifty little plugin to use: https://github.com/EddyVerbruggen/Custom-URL-scheme. This is what I ran in my CLI to install the plugin: cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=helloworld
After adding the plugin and reading the instructions you'll see that you need to add a function to handle the call back access token like so:

function handleOpenURL(url) {
    console.log("handleOpenURL: " + url);
    showPageSection('authed-section');
    // Create an instance of Dropbox with the access token and use it to
    // fetch and render the files in the users root directory.
    var dbx = new Dropbox({ accessToken: getAccessTokenFromUrl2(url) });
    dbx.filesListFolder({path: ''})
        .then(function(response) {
            renderItems(response.entries);
        })
        .catch(function(error) {
            console.error(error);
        });
}

and you'll also have to edit the getAccessTokenFromCustomUrl to work for the new callback:

function getAccessTokenFromUrl2(url) {
    url = url.split('#')[1];
    console.log('getAccessTokenFromUrl2: ' + utils.parseQueryString(url).access_token);
    return utils.parseQueryString(url).access_token;
}

Note, don't forget that the redirect uri needs to be pre-registered on the app's page on the App Console: https://www.dropbox.com/developers/apps

Cordova mobile app and Dropbox API v2

2 Answers