- playing around with the spotify API

TobiasMue91 · TobiasMue91 · commit c4d14ae1a73b · 2025-02-16T13:22:46.000+01:00
diff --git a/tools/spotify_test.html b/tools/spotify_test.html
@@ -31,7 +31,6 @@
 <body>
 <div id="setup" class="credentials">
     <input type="text" id="clientId" placeholder="Enter Spotify Client ID">
-    <input type="text" id="clientSecret" placeholder="Enter Spotify Client Secret">
     <button onclick="startAuth()">Initialize Player</button>
 </div>
 
@@ -49,54 +48,54 @@
         const state = Math.random().toString(36).substring(7);
         const scope = 'streaming user-read-email user-read-private';
 
-        const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
+        // Using Implicit Grant Flow instead of Authorization Code Flow
+        const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}` +
+            `&response_type=token` +
+            `&redirect_uri=${encodeURIComponent(redirectUri)}` +
+            `&scope=${encodeURIComponent(scope)}` +
+            `&state=${state}`;
+
         window.location.href = authUrl;
     }
 
-    async function handleCallback() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const code = urlParams.get('code');
-
-        if (code) {
-            const clientId = document.getElementById('clientId').value;
-            const clientSecret = document.getElementById('clientSecret').value;
-
-            const response = await fetch('https://accounts.spotify.com/api/token', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                    'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
-                },
-                body: new URLSearchParams({
-                    code: code,
-                    redirect_uri: redirectUri,
-                    grant_type: 'authorization_code',
-                    client_id: clientId
-                })
-            });
-
-            const data = await response.json();
-            initializePlayer(data.access_token);
-        }
+    function getHashParams() {
+        const hashParams = {};
+        const hash = window.location.hash.substring(1);
+        const params = hash.split('&');
+
+        params.forEach(param => {
+            const [key, value] = param.split('=');
+            hashParams[key] = decodeURIComponent(value);
+        });
+
+        return hashParams;
     }
 
     function initializePlayer(token) {
         document.getElementById('setup').classList.add('hidden');
         document.getElementById('player').classList.remove('hidden');
 
-        window.onSpotifyWebPlaybackSDKReady = () => {
-            playerInstance = new Spotify.Player({
-                name: 'Development Player',
-                getOAuthToken: cb => { cb(token); },
-                volume: 0.5
-            });
+        playerInstance = new Spotify.Player({
+            name: 'Development Player',
+            getOAuthToken: cb => { cb(token); },
+            volume: 0.5
+        });
 
-            playerInstance.addListener('ready', ({ device_id }) => {
-                console.log('Ready with Device ID', device_id);
-            });
+        playerInstance.addListener('ready', ({ device_id }) => {
+            console.log('Ready with Device ID', device_id);
+        });
 
-            playerInstance.connect();
-        };
+        playerInstance.addListener('initialization_error', ({ message }) => {
+            console.error('Failed to initialize', message);
+        });
+
+        playerInstance.addListener('authentication_error', ({ message }) => {
+            console.error('Failed to authenticate', message);
+            document.getElementById('setup').classList.remove('hidden');
+            document.getElementById('player').classList.add('hidden');
+        });
+
+        playerInstance.connect();
     }
 
     function togglePlay() {
@@ -105,8 +104,12 @@
         }
     }
 
-    if (window.location.search.includes('code=')) {
-        handleCallback();
+    // Check if we're returning from auth
+    if (window.location.hash) {
+        const params = getHashParams();
+        if (params.access_token) {
+            initializePlayer(params.access_token);
+        }
     }
 </script>
 </body>
