Hướng Dẫn Chia Sẻ Bài Hát Đang Nghe Qua Website Sử Dụng Spotify API và Next.js

Trong bài viết này, mình sẽ hướng dẫn bạn cách sử dụng Spotify API kết hợp với Next.js để tạo một phần footer hiển thị thông tin bài hát hiện đang phát trên tài khoản Spotify của bạn. Sau khi hoàn thành các bước hướng dẫn này, bạn sẽ sở hữu một phần footer đẹp mắt để giới thiệu bài hát bạn đang nghe ngay trên trang web cá nhân của mình.

1. Giới Thiệu Về Spotify API

Spotify API cung cấp nhiều điểm cuối khác nhau cho phép bạn truy cập vào thông tin bài hát, album, và nghệ sĩ. Trong hướng dẫn này, mình sẽ chỉ tập trung vào việc lấy tên bài hát và tên nghệ sĩ đang phát trên tài khoản của bạn.

2. Cần Chuẩn Bị Các Biến Môi Trường

Để sử dụng Spotify API, bạn sẽ cần phải chuẩn bị ba biến môi trường sau:

• SPOTIFY_CLIENT_ID: ID ứng dụng Spotify của bạn.
• SPOTIFY_CLIENT_SECRET: Mật khẩu ứng dụng Spotify của bạn.
• SPOTIFY_REFRESH_TOKEN: Token làm mới giúp bạn truy cập API một cách liên tục.

3. Bước 1: Tạo Ứng Dụng Trong Spotify Developer Dashboard

3.1 Đăng Nhập Để Tạo Ứng Dụng

• Truy cập Spotify Developer Dashboard và đăng nhập bằng tài khoản Spotify của bạn.
• Chọn "Create app" để bắt đầu tạo một ứng dụng mới.

3.2 Nhập Thông Tin Ứng Dụng

• Điền các thông tin cần thiết như tên ứng dụng và mô tả.
• Nhấn "Save" để lưu lại thông tin ứng dụng và chuyển đến trang Dashboard của ứng dụng vừa tạo.

3.3 Lấy Client ID và Client Secret

• Chọn "Settings" trong Dashboard để lấy Client ID và Client Secret. Hãy ghi nhớ giá trị này cho các bước tiếp theo.

4. Bước 2: Lấy SPOTIFY_REFRESH_TOKEN

Để lấy Refresh Token, bạn sẽ cần phải thực hiện thêm vài bước xác thực.

4.1 Cấu Hình Redirect URI

• Trong phần danh sách Ứng dụng của bạn, thêm một Redirect URI trong mục "Settings" (ví dụ: http://localhost:3000/callback).

4.2 Lấy Authorization Code

• Truy cập URL sau để lấy mã Authorization Code:

https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REDIRECT_URI&scope=user-read-currently-playing

• Nhớ thay thế YOUR_CLIENT_ID và YOUR_REDIRECT_URI bằng giá trị tương ứng mà bạn đã cấu hình.

4.3 Đổi Authorization Code Lấy Refresh Token

• Mã hóa Client ID và Client Secret thành Base64.
• Sử dụng lệnh curl để lấy Refresh Token:

curl -X POST -H "Authorization: Basic EN_CODED_STRING" -d "grant_type=authorization_code&code=AUTHORIZATION_CODE&redirect_uri=YOUR_REDIRECT_URI" https://accounts.spotify.com/api/token

• Nhớ thay thế các giá trị cho phù hợp.

4.4 Kiểm Tra Refresh Token

• Thực hiện lệnh curl để đảm bảo Refresh Token hoạt động:

curl -X POST -H "Authorization: Basic EN_CODED_STRING" -d "grant_type=refresh_token&refresh_token=YOUR_REFRESH_TOKEN" https://accounts.spotify.com/api/token

• Nếu thành công, bạn sẽ nhận được một access_token mới.

5. Bước 3: Tạo Dự Án Next.js

5.1 Tạo Dự Án Mới

• Sử dụng pnpm hoặc npm để tạo dự án Next.js:

pnpm create next-app spotify-now-playing --ts
cd spotify-now-playing

5.2 Cài Đặt Thư Viện Axios

• Cài đặt Axios để thực hiện các yêu cầu HTTP:

pnpm add axios

5.3 Thiết Lập Biến Môi Trường

• Tạo tệp .env.local trong thư mục gốc của dự án và thêm:

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
SPOTIFY_REFRESH_TOKEN=your_spotify_refresh_token

6. Bước 4: Tạo API Để Lấy Thông Tin Bài Hát

Tạo tệp pages/api/spotify.ts với nội dung để lấy thông tin bài hát hiện tại:

// mã nguồn ở đây

7. Bước 5: Tạo Component Hiển Thị Bài Hát

Tạo component NowPlaying.tsx để hiển thị thông tin bài hát:

// mã nguồn ở đây

8. Bước 6: Tạo Footer

Tạo tệp Footer.tsx để hiện footer trên mỗi trang:

// mã nguồn ở đây

9. Bước 7: Sử Dụng Footer Trong Ứng Dụng

• Sửa đổi tệp _app.tsx để bao gồm Footer:

// mã nguồn ở đây

10. Bước 8: Thêm CSS Tùy Chỉnh

// mã nguồn CSS ở đây

11. Bước 9: Chạy Ứng Dụng

• Chạy ứng dụng Next.js:

pnpm dev

• Truy cập http://localhost:3000 để xem kết quả.

Kết Luận

Như vậy, bạn đã hoàn thành việc tích hợp Spotify API với Next.js để hiển thị bài hát đang phát trên trang web cá nhân của mình. Bạn hãy thử trải nghiệm để xem việc hiển thị thông tin bài hát có mang lại những điều thú vị cho người dùng không nhé!

Tham Khảo

• Spotify Developer Dashboard
• Spotify API Documentation
• Next.js Documentation
• Base64 Encode
• Axios

Liên Hệ

Nếu bạn gặp bất kỳ khó khăn nào trong quá trình thực hiện, hãy để lại phản hồi hoặc liên hệ với mình qua website cuongday.com. Chúc bạn thành công và nếu thấy bài viết hữu ích, hãy cho mình một like và theo dõi nhé! 💖
source: viblo