How to set up DropBox API?

One of the most significant technological advancements in recent years is data management on the cloud. Not just for massive volumes of data, but also for end users, such consumers or employees of a company, who utilize the platforms or services. So why don’t we outline how to integrate one of the most popular solutions - Dropbox API.

Dropbox API offers a variety of endpoint solutions that may assist you in creating and customizing apps, addressing frequent and sometimes challenging end-user duties like content uploading, file removal, and, last but not least, user authentication.

Let’s get straight to the point.

Getting client keys for Dropbox API

Firstly we should create an application using your Dropbox console.

After you created the application we need to add the OAuth redirect URI in the app settings.

Your app key and secret are available in settings.

Now when we have keys we can start creating a service to work with Dropbox API. We are using library?Dropbox SDK.

import * as simpleOauth2 from 'simple-oauth2';

const { clientId, clientSecret } = cfg.oneDriveAPI;



class OneDriveService {
  private oneDriveOauth = simpleOauth2.create({
    client: {
      id: clientId,
      secret: clientSecret,
    },
    auth: {
      tokenHost: 'https://login.microsoftonline.com/common',
      authorizePath: '/oauth2/v2.0/authorize',
      tokenPath: '/oauth2/v2.0/token',
    },
  })

  public async getToken(code: string, redirectUri: string) {
    const rawTokenData = await this.oneDriveOauth.authorizationCode.getToken({
      code,
      redirect_uri: redirectUri,
    });

    return this.oneDriveOauth.accessToken.create(rawTokenData);
  }
}        

OAuth

To start the OAuth process we should form the URL which should be opened in the browser (usually by the client-side of the application). It should include the?base URL of the Dropbox OAuth?page and query parameters, including client ID (from settings of the app), redirect URL (one of configured in settings), and response type (we are using code-based OAuth flow.

This will open the Dropbox OAuth window:

After you log in and allow your app to access the data on your account you will be redirected to the URI you specified with code in the query params.

Let’s create a handler for it. Firstly we need to add a method to our service to exchange codes and get access tokens.

public async getToken(code: string, redirectUri: string) {
    const token = await this.dbxOauth.getAccessTokenFromCode(redirectUri, code);

    return token;
  }        

The endpoint should be similar to the implementation below:

router.get('/dropbox-auth, async (req: Request, res: Response) => {
  const { code } = req.query;
  const token = await dropboxService.getToken(code, cfg.dropboxAPI.redirectURL);

  // save token to e.g. redis
  // redirect to the FE page
});        

Using API

Now when we have a token, let’s create a helper to get an authorized client for the Dropbox API.

protected async getClient(accessToken: string) {
    const dbxClient = new Dropbox({ accessToken });

    return await dbxClient;
  }        

Now we can use the API. For example, getting current users should look like below.

public async getCurrentUser(accessToken: string) {
    const dropboxClient = await this.getClient(accessToken);
    const user = await dropboxClient.usersGetCurrentAccount();

    return user;
  }        

Did you successfully try this guide on practice? Let me know if it did work out for you!