How to display shots with Dribbble API OAuth 2

Alexander Prokopenko
Alexander Prokopenko Chief Technical Officer
3 minutes to read

Once we got a request from our client who asked to change the way the shots from Dribbble were displayed.

The previous implementation was done using Dribbble API v1. We opened the documentation only to see a notice about API v1 deprecation effective March 26, 2018: “You’re looking at the deprecated v1 API docs. API v1 will be retired on March 26, 2018. You’ll eventually want to use the v2 docs instead.”

dribbble-1100x244 How to display shots with Dribbble API OAuth 2

It’s not secure to pass personal tokens and IDs from the browser, so now the authentication will happen on the server.

We thought that it’s not just our client who needs their Dribbble feed maintained, so our team decided to create a lightweight library compatible with API v2.

How it works

We created a simple proxy server with NodeJS and ExpressJS that handles authorisation and gets an access token using our library.

For ease of use, we also added an option to register several users at the same time.

For the same reason, we implemented Docker because it makes the production process much more pleasant.

How to use Dribbble API v2 library

Here’s a short tutorial on how to display shots with Dribbble API v2.

Step 1.

Server

To start working with the server, clone it from Docker hub.

Then run docker compose with docker-compose up – this will set up a virtual machine.

The server uses port 8000, which you can change in Docker settings if you wish.

Step 2.

App registration

Then, register your application. Make sure the Docker process is running and open a new tab in the terminal. Run the following commands:

1 docker-compose exec server sh

2 npm run setup

dribbble-api-2-feed How to display shots with Dribbble API OAuth 2

Step 3.

Configuration

Client ID and Client Secret should be configured in the settings of your app – just copypaste them from there.

Also, set your Redirect URL to http://localhost/.

Step 4.

User registration

Now we can register our users. Just enter any username and follow the link to register them. Upon completion, you will be redirected to http://localhost/code=some_code. Copy this code and paste it into the terminal.

The number of users is unlimited, so you can create a portfolio of several designers in one feed.

Now you can close the current terminal and restart docker-compose.

Registration of users and the application is a one time action which is required during app initialization.

It creates a db folder on your server along with a settings file. If you want to go through the registration process again – simply delete it and start over.

Step 5.

Done!

Voila, your app is registered! To get a list of shots of a specific user, send a GET request to this URL:

http:/YOUR-DOMAIN:8000/shot/?users=first_user_name

dribbble-feed-api2 How to display shots with Dribbble API OAuth 2

Full documentation is available on GitHub.

Feel free to use it and send us feedback!

4.7/5 - (12 votes)

Book a call With our strategist

What we will talk about:
  • you and your business needs;
  • current plans, ideas, and strategy;
  • possible solution to your business challenge.

Describe your business requirements in enough details so we could understand your goal better.

*If an NDA should come first, please let us know.