spotify-box: A JavaScript repository from dahoba

spotify-box

Automatic update pinned gist to show your recent Spotify top tracks.

_{Don't forget to leave a ⭐ if you found this useful.}

📌✨ For more pinned-gist projects like this one, check out: https://github.com/matchai/awesome-pinned-gists

✨ Inspiration

This code was heavily inspired by @jacc's music-box.

🎒 Prep Work

Create a new public GitHub Gist (https://gist.github.com/)
Create a token with the gist scope and copy it. (https://github.com/settings/tokens/new)
Create a Spotify Application and get certified, detail steps you can see below.

Spotify Authorization Steps

1. Create new Spotify Application

Visit https://developer.spotify.com/dashboard/applications login and create a new Application

After create, you will get your Client ID & Client Secret.

Then click EDIT SETTINGS Button, add http://localhost:3000 to Redirect URIs

2. Get Authorization Code

Visit following URL after replace $CLIENT_ID to yours

https://accounts.spotify.com/en/authorize?client_id=$CLIENT_ID&response_type=code&redirect_uri=http:%2F%2Flocalhost:3000&scope=user-read-currently-playing%20user-top-read

Agree to this application to access your info, after that your will be redirect to a new page, the url like this: http://localhost:3000?code=$CODE

this $CODE is your Authorization Code, it will be used to generate access_token at next step.

3. Get Access Token

the last step, use the $CLIENT_ID and $CLIENT_SECRET from step 1, $CODE from step 2 to replace the shell command below

curl -d client_id=$CLIENT_ID -d client_secret=$CLIENT_SECRET -d grant_type=authorization_code -d code=$CODE -d redirect_uri=http://localhost:3000 https://accounts.spotify.com/api/token

after run it at your terminal, you'll get your ${REFRESH_TOKEN}

the output may like this:

{
    "access_token": "BQBi-jz.....yCVzcl",
    "token_type": "Bearer",
    "expires_in": 3600,
    "refresh_token": "AQCBvdy70gtKvnrVIxe...",
    "scope": "user-read-currently-playing user-top-read"
}

if the response not return refresh_token, back to step 2 and retry.

🖥 Project Setup

Fork this repo
Go to your fork's Settings > Environments > New environment and create an environment called "prod"
Choose your "prod" environment and Add Secret for each environment secret (below)
Enable Actions on your fork via the 'Actions' tab
Enable the 'spotify-box' Workflow via the 'Actions' tab
Kick off a workflow run of the 'spotify-box' Workflow via Actions > spotify-box > Run workflow

🤫 Environment Secrets

GIST_ID: The ID portion from your gist url https://gist.github.com/<github username>/6d5f84419863089a167387da62dd7081.
GH_TOKEN: The GitHub token generated above.
SPOTIFY_CLIENT_ID: The Client ID you got from Spotify Developer Dashboard.
SPOTIFY_CLIENT_SECRET: The Client Secret you got from Spotify Developer Dashboard.
SPOTIFY_REFRESH_TOKEN: The Refresh Token you got from Spotify API.

💸 Donations

Feel free to use the GitHub Sponsor button to donate towards my work if you think this project is helpful. 🤗

dahoba/spotify-box