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
This code was heavily inspired by @jacc's music-box.
- 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
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
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.
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/tokenafter 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.
- 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
- 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.
Feel free to use the GitHub Sponsor button to donate towards my work if you think this project is helpful. 🤗
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent