Connecting to Spotify API
Allow users to access their Spotify account information in your app.
Last updated
Allow users to access their Spotify account information in your app.
Last updated
In this tutorial, we'll show you how you can connect the Spotify API to Bravo using OAuth 2.0. This allows creating apps that will be able to fetch user data stored in Spotify, such as user playlists, favorite songs, and so on.
In order to use OAuth 2.0 with Spotify, create a developer account for Spotify here. You'll need to have an existing Spotify account.
Once you have logged in to the dashboard, create a new app with a name of your choice. After creating the app, click on Edit Settings.
In the pop-up, find a field for Redirect URIs. There, add the following callback URLs:
https://vision.callbacks.bravostudio.app/
https://projects.bravostudio.app/callbacks/oauth-token
https://a<your_app_id>.callbacks.bravostudio.app.
Replace <your_app_id> with the Bravo app ID value (without the "<" and ">" characters).
This can be found in the URL of your Bravo app project: https://projects.bravostudio.app/apps/XXXXXXX/screens
After, copy the Client ID and Client Secret, as you'll need to add them later into Bravo Studio.
Now that you have all you need to connect your app to Spotify, it's time to create a new app in Bravo. To do that, import a bravorized design file, with all the tags needed for OAuth 2.0. You can also use the sample design setup at the end of this page.
After you have created the app project, go to Integrations → Login → OAuth 2.0 in the Bravo project dashboard. There, select Spotify as the OAuth 2.0 provider, and paste the Client ID and Client Secret values you copied from the Spotify Developer dashboard in the previous step.
Also, you'll need to specify the scopes. This will indicate which permissions will the app have when connecting to the Spotify API. Check out the list of scopes for Spotify API here.
Once you have set all those parameters, click Save.
In order to create requests targeting the Spotify API, check what are the available API endpoints, and which operations they allow in the Spotify API guides. For instance, a GET request against the https://api.spotify.com/v1/me/playlists URL will return a list with all the playlists the Spotify user has created.
In the sample design setup below, we created a screen to display the user's top artists. In this case, we would use the request URL https://api.spotify.com/v1/me/top/artists.
In the request setup page, go to Collection Settings. Go to Authentication > for Type, select Use settings from application (OAuth2) > For Testing app, select the name of the app where you added the Spotify settings for OAuth 2.0. Click Save.
Continue to set up an API request. Click Send, and you'll be asked to log in, as this request is using OAuth 2.0. You'll need to log in using the same Spotify credentials you used to create the app in the Spotify for Developers dashboard.
Once you authenticate, you should see a success screen. Close this browser tab, return to the API Collections dashboard to set up the API request as usual, and bind API data to the UI elements.
If you change anything in the OAuth settings in your app project (i.e. scope, client ID, etc.) after you have logged in via the API collection, you must log out in the collection settings and log in again.
Once your requests are set up, you'll be able to test the integration on Bravo Vision or a test environment (Testflight, debug APK).
At this moment, the app created in Spotify will be under development mode. In order to log in successfully from your mobile app, you'll need to add test users in the Spotify dashboard. To do that, open your app, click on Users and Access, and add up to 25 Spotify accounts. Then, you'll be able to log in with these accounts in your mobile app.
For iOS users, you must log in via Safari. When you click the login button, it will open the login page in a browser window with your phone's default browser.
To set Safari as default browser, go to Settings (on your iPhone) > Safari > set as default browser.
