+2

Oauth2 and Spotify Integration.

I. Prerequisite

Giải thích một số khái niệm:

  • Access token
    • Về cơ bản access token là một chuỗi string đại diện cho user đã đăng nhập vào hệ thống. Thay vì mỗi lần call API lại yêu cầu user đăng nhập thì hệ thống chỉ yêu cầu user đăng nhập một lần để lấy access token và những lần sau sẽ dùng lại access token này để thực thi những request từ user.
  • The OAuth 2.0 Authorization Framework
    • Oauth 2.0 là một cơ chế cho phép bên thứ 3 truy cập một số tài nguyên hữu hạn của chủ sở hữu tài nguyên. Ví dụ như như khi login app X bằng Facebook thì các thông tin như name, email... sẽ được share còn username, password... sẽ được giữ kín.

II. Introduction

Câu chuyện là mình được giao nhiệm vụ tích hợp Spotify vào app X, cụ thể hơn là giải quyết bài toán sau:

Làm thế nào để một user A của app X (có account Spotify) có thể nhìn thấy danh sách những artists mà user A đã follow trên Spotify?


Vì dữ liệu chúng ta cần do Spotify nắm giữ, nên cách làm khả dĩ duy nhất đó chính là thông qua cơ chế ủy quyền (Authorization). Authorization về cơ bản sẽ xảy ra như sau:

  1. User A thông qua app X yêu cầu quyền truy cập thông tin của chính mình trên Spotify.
  2. Spotify sau đó sẽ xác thực user A và tiến hành cấp quyền tương ứng thông qua access_token.
  3. Sau đó app X sẽ tiến hành fetch data và hiển thị cho user.

Ở trong bài viết này, khi nói đến Authorization có nghĩa là chúng ta đang nói đến một trong những tiêu chuẩn an toàn và phổ biến nhất hiện nay đang được Spotify sử dụng chính là Oauth2 Authorization.

image.png

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

Oauth2 cung cấp cho chúng ta các luồng ủy quyền như sau:

image.png

Các authorization flows đều hướng tới một mục đính chung đó là lấy access_token của user và truy cập dữ liệu, đó là điều mà bất kể luồng ủy quyền nào ở trên đều đáp ứng được. Thế nhưng vì chúng ta chỉ được chọn một nên bây giờ hãy cùng xem lại yêu cầu bài toán để chọn luồng ủy quyền phù hợp nhất nhé:

  1. Để lấy danh sách followed artists trên Spotify cần một authorization scope đặc biệt có tên là user-follow-read.
  2. access_token phải là long-lived access_token để cập nhập danh sách followed artists của user.

image.png

III. Spotify authorization flows

Spotify cung cấp cho chúng ta 3 luồng ủy quyền chính:

1. Client Credentials Flow

image.png

Flow này trả về unscoped data nên dù có lấy được access_token thì chúng ta cũng không truy cập được danh sách followed artists.

2. Implicit Grant Flow

image.png

Flow này đã trả về access_token thỏa mãn điều kiện cần nhưng có một vấn đề là access_token trả về chỉ là short-lived access_token. Vấn đề ở đây là phía client tiến hành nắm giữ access_token được trả về thông qua callback_uri nên nguy cơ bị lộ và đánh cắp khá cao (Ex: thông qua browser's history). Vì vậy sẽ tương đối nguy hiểm nếu đó là long-lived access_token.

https://example.com/callback#access_token=NwAExz...BV3O2Tk&token_type=Bearer&expires_in=3600&state=123

3. Authorization Code Flow

Đây là option cuối cùng và cũng là luồng ủy quyền sẽ giải quyết được trọn vẹn vấn đề của chúng ta. Sau khi user ủy quyền thì client sẽ chuyển hướng tới callback_uri kèm authorization_code. Client sau đó sẽ dùng authrization_code này gọi lên server để tiến hành exchange lấy access_token, đảm bảo an toàn và hiệu quả.

https://my-domain.com/callback?code=NApCCg..BkWtQ&state=34fFs29kd09

image.png

IV. Preparation

Để thực hiện Authorization Code Flow như trên chúng ta cần hoàn thành một số đầu việc sau.

1. App Settings

Việc này khá dễ, bạn hãy truy cập vào đây rồi điền các thông tin cơ bản như ở dưới.

image.png

2. APIs

Với kinh nghiệm của một người lười thì mình tin chắc là Spotify APIs/Oauth2 APIs kiểu gì cũng có trên Public APIs của Postman nên lên tìm thử một cái cho nhanh. image.png

Kinh nghiệm này trông cũng được 😂😂.

image.png

Cho dù chỉ tìm một API hay cả bộ APIs thì cũng đều có sẵn.

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}

Thay thế những biến ở trên bằng thông tin của bạn rồi dán vào trình duyệt nhé. Vì cần user authorize access nên nếu call từ API client như Postman thì không sẽ không work.

image.png

Sau khi truy cập link từ trình duyệt thì sẽ xảy ra những trường hợp sau:

  1. Nếu bạn chưa từng đăng nhập Spotify thì sẽ chuyển đến màn login yêu cầu đăng nhập.
  2. Nếu đã đăng nhập rồi thì sẽ chuyển đến màn authorize access.

image.png

Màn hình authorize access này chỉ xuất hiện duy nhất một lần nếu request lấy authorization code của bạn không thay đổi. Nếu thay đổi một trong các tham số truyền lên thì màn hình pop-up này sẽ được bật lại.

Sau khi authorize access thì trình duyệt sẽ tự chuyển hướng về redirect_uri và trả về kèm authorization code như hình dưới.

image.png

2. Get Access Token

Đến đây bạn mang authorization code đi gọi API lấy access_token là xong.

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

image.png

3. Postman Oauth2

Vì access token sẽ expire trong vòng 1 tiếng nên rất có thể việc phải liên tục lấy lại access token bằng quy trình hai bước ở trên sẽ khiến bạn cảm thấy phiền toái. Tuy nhiên thật may mắn là luôn luôn có những người thông minh hơn hầu hết chúng ta, lười biếng hơn hầu hết chúng ta đã từng gặp vấn đề đó và giải quyết hộ chúng ta. Đó là sử dụng sự trợ giúp của Postman Oauth2.

VI. Get followed artists

List followed artists API:

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

Có một vấn đề ở đây là nếu bạn là owner của developer app thì không sao, nhưng nếu bạn không phải owner của app thì access token của bạn không thể truy cập được. Nếu thực hiện việc call API ở trên thì bạn sẽ gặp phải lỗi như sau:

User not registered in the Developer Dashboard

image.png

Đến đây thì hãy đăng nhập vào Developer Dashboard rồi đi tới mục Users and Access và thêm email của bạn vào nhé.

image.png

References


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.