I’ve created a couple of projects using Spotify Authentication to Log In a user with their Spotify account. Both of these projects launch the Spotify Authentication in a popup window and then callback to the main PlayCavas page when auth is complete.
Auth with UI:
The first project launches the authentication when the user clicks the Log In button, and wipes the locally stored info when the user clicks the Log Out button.
This project can be found here: Spotify Auth + Dashboard
And looks like this:
Auth Without UI:The second project is with all the UI removed. It automatically launches the popup on page load and triggers an alert in place of where you should start you app/game.
This project can be found here: Spotify Auth
It uses the following logic flow (which was much more complicated than I expected when I first started)
Using The Projects:
Currently both of these projects point at a temporary Spotify App that I have created on the Spotify Developer Website. To use these projects you need to do the following:
- Fork one of the PlayCanvas Spotify Auth projects
- Create a new App on the Developer App Dashboard
- Change the clientID at the top of the auth.js script in PlayCanvas to the client ID of your new Spotify app
- Publish your PlayCanvas project
- Run your PlayCanvas project with the browser console open
- Copy the Redirect URI that is output to the console
- Should look something like “https://playcanv.as/index/5IZkjSeR”
- Add this Redirect URI to the list of Redirect URIs in your Spotify App
- Option is under Edit Settings on the App Dashboard