Comment on page
Connecting to Spotify API
Allow users to access their Spotify account information in your app.
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.
Once you have logged in to the dashboard, create a new app with a name of your choice. After creating the app, click on
In the pop-up, find a field for
Redirect URIs. There, add the following callback URLs:
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.
After you have created the app project, go to
OAuth 2.0in 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.
Once you have set all those parameters, click
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/playlistsURL 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
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
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.