1 Vorab
Um das ganze umsetzen zu können benötigt ihr einen Account bei GitHub und Spotify.
Außerdem ist es empfehlenswert nebenbei eine Text-Datei offen zu haben, in der ihr euch temporär Sachen notieren könnt.
2 Vorwort
Moin, in diesem Wiki-Eintrag, möchte ich euch, weil immer mehr Leute fragen, erklären wie ihr ein Bild mit dem aktuellen Song den Spotify grade abspielt in eure Signatur Packen könnt.
Das Ganze werde ich in verschiedene Schritte einteilen, die ihr nacheinander befolgen solltet.
3 Schritt 1 - GitHub Repository forken
Damit wir überhaupt etwas machen können, brauchen wir erstmal das Repository von Nvatorem
Dies müsst ihr dann Forken, damit ihr alles individuell anpassen könnt.
Bildanleitung
Repository forken:
4 Schritt 2 - Spotify Application einrichten
Erstellt euch eine Spotify Applikation (App) bei Spotify for Developers (hier)
Dieser gebt ihr einen beliebigen Namen und optional eine Beschreibung.
Nachdem ihr sie erstellt habt, schreibt ihr euch eure Client-ID und euer Client-Secret auf.
Bildanleitung
App erstellen:
Client-ID und Client-Secret:
Nachdem ihr das gemacht habt, geht ihr auf "Edit Settings" und fügt bei "Redirect URIs"http://localhost/callback/ hinzu, klickt auf "Add" und dann auf "Save".
Bildanleitung
5 Schritt 3 - Refresh Token erstellen
Um den Refresh Token zu erhalten, müsst ihr euch nun einen link erstellen
dieser sieht wie folgt aus:
https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/
In diesem müsst ihr {SPOTIFY_CLIENT_ID} mit eurer Client-ID ersetzen, die ihr euch im vorigen Schritt notiert habt.
Das gebt ihr dann in eure Browser Suchzeile ein.
Wenn ihr das gemacht habt, sollte sich eine Seite von Spotify öffnen. Dort bestätigt ihr einmal und solltet automatisch weitergeleitet werden.
Jetzt sollte euer Browser einen Seiten-Ladefehler oder ähnliches ausspucken. Dann habt ihr alles richtig gemacht, denn in der Suchzeile sollte nun http://localhost/callback/?code={CODE} stehen, bloß, dass statt {CODE} ein Code dort steht. Diesen müsst ihr nach dem "=" kopieren.
Bildanleitung
Hier alles nach dem "=" kopieren.
Das war es aber noch nicht, denn jetzt müsst ihr auf Base64 (hier) und unter Encode {Client-ID}:{Client-Secret} encoden.
Das, was nun bei Decode steht, müsst ihr nun kopieren.
Bildanleitung
Wenn ich euch das aus decode notiert habt, geht es weiter.
Nun müsst ihr auf HTTPie (hier) und einen curl command ausführen.
Dieser sieht wie folgt aus:
curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}" https://accounts.spotify.com/api/token
Wie schon beim Link müsst ihr nun entsprechende Felder ergänzen.
{BASE64} wird mit dem was ihr unter "Decode" aus Base64 kopiert habt ersetzt.
{CODE} wird mit dem Code den ihr aus dem Link in der Suchzeile kopiert habt ersetzt.
Er könnte beispielweise in etwa so aussehen:
curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic NzViNWYxYTQ0MDY3NDZiNTkwNzBlMGY5MDgzM2EyYTU6NzMyOGFiMjQwMjg1NDNhYTgxY2I2ZTZiYTIyYTYyNmM=" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code=AQADRdI1Aw9HP02MA2qqp2qRhFQ-4qo8p0NXxebP2BUjfnjjX7dg8e1dM6EqCUihmy6tnOUTIcJpKf9K1mpKo0C32BM-Jy5ehMFgfQ-6cYw3x3K1OQGnaje_mAMJxnUwfzPadFUGS0_2k17sxiJXeVofs9mTSImLYmTeEjbidjNqBi1pdfZ72VxOC_Wosgc3uhdEOOY9sLD5nZFwg_-dC8s6ZoUJdqZRrxBbjZVOi4crEtX3g5Q" https://accounts.spotify.com/api/token
Diesen gebt ihr dann in HTTPie ein und führt ihn aus.
Dort gibt er euch einen "access_token" und einen "refresh_token" wieder. Ihr müsst euch den refresh_token notieren.
Bildanleitung
6 Schritt 4 - Vercel aufsetzen
Als vorletzten schritt müssen wir jetzt Vercel einrichten.
Dazu müsst ihr euch mit eurem GitHub Account bei Vercel (hier) registrieren.
In Vercel erstellt ihr dann ein neues Projekt erstellen und importiert dort das Repository das ihr geforked habt.
Wählt euren Personal Account aus und lasst es auf dem Ursprungsordner.
Auf der letzten Seite wo ihr nun noch einmal alles einstellen könnt, müsst ihr unter "Enviromental Variables" nun 3 Stück hinzufügen.
SPOTIFY_REFRESH_TOKEN (der Zuletzt notierte Refreshtoken
SPOTIFY_CLIENT_ID Die Client-ID aus der Spotify App
SPOTIFY_SECRET_ID Das Client-Secret aus der Spotify App
Bildanleitung
Danach klickt ihr einfach auf "Deploy"
Der vorletzte Schritt ist es nun, in der ReadMe in GitHub folgendes einzufügen:
[](https://open.spotify.com/user/USER_NAME)
Das erste USER_NAME wird mit dem GitHub Namen ersetzt und das 2. mit dem Spotify Username
Das speichert ihr dann und kopiert die Grafikadresse aus der Readme.
Als Letztes wird die Grafikadresse als Bild in der Signatur eingefügt und fertig ist es.
7 Schlusswort
Das war auch "schon" das etwas kompliziertere Tutorial. Ich hoffe, es hat euch gefallen.
Falls ihr Probleme habt, sprecht mich jeder Zeit an.
Für die den ein Video mehr hilft hier ein Viedo, in dem das ganze nochmal erklärt wird.
Kommentare 13