feat: switch Spotify auth to official Client Credentials Flow

Replaces the broken open.spotify.com/get_access_token scrape with
accounts.spotify.com/api/token (Basic auth, client_credentials grant).
Adds SPOTIFY_CLIENT_ID/SECRET to config, docker-compose, and .env.example.
Health endpoint now reports spotify.configured; frontend disables the
importer and shows a setup guide when credentials are missing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-09 22:57:01 +02:00
1 parent 7c1c444bf2
commit 468827571a
5 files changed
+77 -13

No files matched your search

+38 -1
View File
@@ -6,13 +6,32 @@ import { makeGlobalTrackItem } from './components.js';
import { openDlModal } from './ui.js';
// ─── SPOTIFY IMPORTER PAGE ───
export function loadSpotifyImporter() {
export async function loadSpotifyImporter() {
if (!document.getElementById('spotify-link-input')?.value) {
const hint = document.getElementById('spotify-importer-hint');
const preview = document.getElementById('spotify-preview');
if (hint) hint.style.display = '';
if (preview) preview.style.display = 'none';
}
if (S.cfg.backendUrl) {
try {
const h = await fetch(`${S.cfg.backendUrl}/api/health`).then(r => r.json());
if (!h.spotify?.configured) {
const input = document.getElementById('spotify-link-input');
if (input) {
input.disabled = true;
input.placeholder = 'Spotify-Importer nicht konfiguriert (Server-Setup erforderlich)';
}
const hint = document.getElementById('spotify-importer-hint');
if (hint) hint.innerHTML += `
<div style="margin-top:16px;padding:12px;background:var(--surface);border-radius:10px;border-left:3px solid #1DB954;font-size:13px;color:var(--text2)">
⚠ Server-Admin muss <code>SPOTIFY_CLIENT_ID</code> und <code>SPOTIFY_CLIENT_SECRET</code> setzen.
Kostenlos unter <a href="https://developer.spotify.com/dashboard" target="_blank" style="color:#1DB954">developer.spotify.com/dashboard</a>.
</div>`;
}
} catch { /* health check failed — leave UI as-is */ }
}
}
export function clearSpotifyPreview() {
@@ -54,6 +73,24 @@ export async function resolveSpotifyLink() {
if (data.skippedLocal > 0) toast(`${data.skippedLocal} lokale Datei(en) übersprungen (kein Stream verfügbar)`);
_renderSpotifyPreview(data);
} catch(e) {
if (e.message.includes('SPOTIFY_CLIENT_ID') ||
e.message.includes('Credentials fehlen') ||
e.message.includes('Spotify-Token-Fehler')) {
inner.innerHTML = `<div style="color:var(--text);padding:16px;background:var(--surface);border-radius:10px;border-left:3px solid #1DB954">
<div style="font-weight:600;margin-bottom:8px">Spotify-Importer nicht konfiguriert</div>
<div style="font-size:13px;line-height:1.5">
Der Server-Admin muss einmalig Spotify-Credentials hinterlegen.<br><br>
Schritte:<br>
1. <a href="https://developer.spotify.com/dashboard" target="_blank" style="color:#1DB954">developer.spotify.com/dashboard</a> öffnen<br>
2. "Create app" — Name beliebig, Redirect URI: <code>http://localhost</code><br>
3. Client ID + Secret als Environment-Variablen setzen:<br>
&nbsp;&nbsp;<code>SPOTIFY_CLIENT_ID=...</code><br>
&nbsp;&nbsp;<code>SPOTIFY_CLIENT_SECRET=...</code><br>
4. Backend neu starten
</div>
</div>`;
return;
}
inner.innerHTML = `<div style="color:var(--danger);padding:16px;background:var(--surface);border-radius:10px">${esc(e.message)}</div>`;
}
}