README.md
November 10, 2021 ยท View on GitHub
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
gistscope 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 environmentand create an environment called "prod" - Choose your "prod" environment and
Add Secretfor 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. ๐ค