How to Use OAuth to Get File List from Dropbox

#oauth

#oauth2

#javascript

#dropbox

Goal

We wanted to figure out the easiest way to use OAuth to get file list from Dropbox on behalf of a Dropbox user using Javascript. Here is how we did it with OAuth.io.

Code Snippet

Try this snippet. Once you log in with your Dropbox account it will get the list of files in your account. Feel free to tweak it to get file list from different folders, etc.

https://jsfiddle.net/p187m5ur/6/

Code Explanation

HTML

<a id="dropbox-button" class="btn btn-block btn-social btn-dropbox">
  <i class="fa"></i> Get file list
</a>

CSS

None

Javascript

var params = {
  "path": ""
};
$('#dropbox-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('OAUTH_IO_PUBLIC_KEY');
  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('dropbox').then(provider => {
    console.log('provider:', provider);
    alert("You can check Dropbox provider object in browser console.");

    provider.post({
      url: "/files/list_folder",
      data: JSON.stringify(params),
      headers: {
         "Content-Type": "application/json"
      }
    }).then(data =>             {
      console.log('Files:', data);
      alert("You can find file list in browser console");
    });
  });
})

External Requirements

This Javascript code has external requirements:

jQuery - HTML element manipulation
- https://code.jquery.com/jquery-3.2.1.min.js
bootstrap, font-awesome - Look-and-feel of social buttons and icons
oauth-io javascript library - Simplifies OAuth usage by hiding the nuances in the OAuth implementation of various OAuth providers, e.g., LinkedIn, Twitter, etc. behind the ratified standard OAuth2 interface
- https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

Step-by-step Guide

Here is a summary of the steps to create this social button to get file list from Dropbox on a user's behalf using OAuth2.

Create a Dropbox account, if you do not have one
Create an app on Dropbox using this simple step-by-step guide
Copy your Dropbox app client id and client secret
Signup for OAuth.io account
Link your Dropbox app with OAuth.io by pasting your Dropbox app client id and client secret into OAuth.io
Copy the OAuth javascript snippet (https://jsfiddle.net/p187m5ur/6/) on to your web page