Oauth2 and Spotify Integration.

Tram Ho

I. Prerequisites

Explain some concepts:

  • Access token
    • Basically the access token is a string representing the user who has logged into the system. Instead of each API call asking the user to log in, the system only asks the user to log in once to get the access token and next time it will reuse this access token to execute requests from the user.
  • The OAuth 2.0 Authorization Framework
    • Oauth 2.0 is a mechanism that allows 3rd parties to access a finite number of resources of the resource owner. For example, when logging into app X with Facebook, information such as name, email … will be shared and username, password … will be kept private.

II. Introduction

The story is that I was tasked with integrating Spotify into the X app, more specifically to solve the following problem:

How can a user A of app X (with a Spotify account) see the list of artists that user A has followed on Spotify ?

 

Since the data we need is held by Spotify, the only possible way is through the authorization mechanism. Authorization will basically happen like this:

  1. User A through app X requests permission to access his own information on Spotify .
  2. Spotify will then authenticate user A and proceed to grant the corresponding permissions via access_token .
  3. App X will then fetch the data and display it to the user.

In this article, when it comes to Authorization, we are talking about one of the most popular and secure standards currently being used by Spotify, which is Oauth2 Authorization.

image.png

https://developer.spotify.com/documentation/general/guides/authorization/

 

Oauth2 provides us with the following authorization flows:

image.png

Authorization flows are all geared towards a common purpose, which is to get the user’s access_token and access the data, which is what any of the above authorization flows can do. But since we can only choose one, now let’s review the problem requirements to choose the most appropriate authorization flow:

  1. To get the list of followed artists on Spotify needs a special authorization scope named user-follow-read .
  2. access_token must be long-lived access_token to update the user’s list of followed artists.

image.png

III. Spotify authorization flows

Spotify provides us with 3 main authorization flows:

1. Client Credentials Flow

image.png

This flow returns unscoped data, so even if we get access_token , we won’t be able to access the list of followed artists.

2. Implicit Grant Flow

image.png

This flow returned access_token that met the required condition but there was a problem that access_token returned was just short-lived access_token . The problem here is that the client side holds access_token returned through callback_uri , so the risk of it being exposed and stolen is quite high (Ex: via browser’s history). So it’s quite dangerous if it’s long-lived access_token .

3. Authorization Code Flow

This is the last option and also the authorization flow that will completely solve our problem. After the user authorizes, the client will redirect to callback_uri with authorization_code . The client will then use this authrization_code to call the server to exchange for access_token , ensuring safety and efficiency.

image.png

IV. Preparation

To perform Authorization Code Flow as above we need to complete the following tasks.

1. App Settings

This is quite easy, please visit here and fill in the basic information as below.

image.png

2. APIs

With the experience of a lazy person, I am sure that Spotify APIs / Oauth2 APIs are available on Postman’s Public APIs anyway, so go and try one quickly. image.png

This experience looks good.

image.png

Whether looking for just one API or a whole set of APIs are available.

image.png

V. Access token flows

1. Get Authorization Code

https://accounts.spotify.com/authorize?response_type=code&client_id={CLIEND_ID}&scope=user-follow-read&redirect_uri={REDIRECT_URI}

Replace the variables above with your information and paste it into your browser. Because user authorize access is needed, if calling from an API client like Postman, it won’t work.

image.png

After accessing the link from the browser, the following cases will occur:

  1. If you have never logged into Spotify, you will be redirected to the login screen asking to log in.
  2. If you are already logged in, you will be redirected to the authorize access screen.

image.png

This authorize access screen appears only once if your request for authorization code has not changed. If one of the upstream parameters is changed, this pop-up screen will be turned on again.

After authorize access, the browser will automatically redirect to redirect_uri and return with authorization code as shown below.

image.png

2. Get Access Token

Here you bring authorization code to call the API to get access_token .

https://accounts.spotify.com/api/token

image.png

3. Postman Oauth2

Since the access token expires within 1 hour, it’s likely that having to repeatedly retrieve the access token using the two-step process above will be frustrating. Fortunately, there are always people smarter than most of us, lazier than most of us who have ever had that problem and solved it for us. That is using the help of Postman Oauth2.

BECAUSE. Get followed artists

List followed artists API:

https://api.spotify.com/v1/me/following?type=artist&limit=10

There is a problem here that if you are the owner of the app developer it is fine, but if you are not the owner of the app your access token is not accessible. If you make the above API call, you will get the following error:

User not registered in the Developer Dashboard

image.png

At this point, log in to Developer Dashboard and then go to Users and Access and add your email.

image.png

References

Share the news now

Source : Viblo