TuneQuest - Ein DIY Hitster

Ich hab's hinbekommen mit dem PDF, vielen Dank !!!
Da kommen einem ja gleich Ideen: TuneQuest-Sets zum Geburtstag für Jazz- oder Klassik-Fans, Organisten, Film- und Kinofans...

FMK Zunächst einmal vielen Dank für deine ganzen Mühen bislang.

Ich versuche TuneQuest auf meine Pi 4 zu installieren, da der eh im Netzwerk ständig vorhanden ist und von daher sicherlich auch gut als Server herhalten kann. Aber irgendwo scheitert es beim Einrichten und ich komme nicht dahinter, was es ist.

Node.js habe ich problemlos installiert bekommen. Nach npm install klappt es auch mit npm run dev und npm run start. Ich kann die Seite vom Browser auf meinem Client PC aufrufen, mich über die API anmelden, nur geht es dann immer wieder zurück auf die landing page. Auch wenn ich /player direkt aufrufe, geht es direkt zurück auf Start. Sowohl beim Spotify Dashboard als auch bei der .env habe ich die private IP anstelle von localhost eingetragen.

In der Console wird mir 137 (temporary redirect) als Status angezeigt und als location nur "/". Zuvor gibt es die erfolgreiche Verbindung auf Spotify.

Momentan fehlen mir ein wenig die Ideen. Ich kann mir maximal vorstellen, dass es irgendwas mit der Sicherheit zu tun hat, da die Seite ohne https angesteuert wird. Sicher bin ich mir da aber auch nicht.

Hast du vielleicht noch eine Idee, woran das liegen könnte?

Hallo FMK,

erstmal vielen Dank für dein bereitgestelltes Coding. Bevor ich auf die Idee gekommen bin zu googln, ob sich jemand schon die gleichen Gedanken gemacht hat wie ich, habe ich versucht die gleiche Anwendung wie du über SAP zu programmieren (bin SAP Entwickler). Das mit den Karten erstellen habe ich soweit hinbekommen, aber dann eine Anwendung fürs Handy zu erstellen ist mir dann doch zu fern.

Ich habe TuneQuest soweit zum Laufen bekommen, dass ich über den Localhost auf den Startbildschirm komme. Möchte ich ein Spiel starten erhalte ich einen Error 404 bzw. in der Console folgendes:

GET /api/undefined?response_type=code&client_id=&scope=&redirect_uri=&state=0f5a427a-a3c8-4dc9-895d-32bcf89a18a3 404 in 103

Nun weiß ich leider nicht wo mein Problem ist. Secret Client und Clined ID habe ich eingetragen, aber ich vermute irgendwie trotzdem das es daran liegt. Hast du eine Idee für mich?

Weiterhin ist mir bisher auch noch unklar, wie ich die Anwendung dann über mein Handy starten soll. Nodejs kriege ich ja nicht aufs Handy, genau so wenig ein CMD. Vielleicht kannst du mir hier auch weiterhelfen.

An diesem Punkten habe ich erstmal aufgegeben und versuche nun analog eine App mit den gleichen Funktionen über Android Studio mit Kotlin zu entwickeln (überhaupt keine Erfahrung hier - schau ma mal was wird)

Danke dir schonmal!

VG BerndSenf

FMK Vielen Dank für das Angebot, auf das ich gerne zurückkomme. Am besten ist, wenn wir den Rest über Konversation absprechen. Ich schreibe dich mal direkt an.

Zitat von FMK

Zitat von BerndSenf

Hallo FMK,

erstmal vielen Dank für dein bereitgestelltes Coding. Bevor ich auf die Idee gekommen bin zu googln, ob sich jemand schon die gleichen Gedanken gemacht hat wie ich, habe ich versucht die gleiche Anwendung wie du über SAP zu programmieren (bin SAP Entwickler). Das mit den Karten erstellen habe ich soweit hinbekommen, aber dann eine Anwendung fürs Handy zu erstellen ist mir dann doch zu fern.

Ich habe TuneQuest soweit zum Laufen bekommen, dass ich über den Localhost auf den Startbildschirm komme. Möchte ich ein Spiel starten erhalte ich einen Error 404 bzw. in der Console folgendes:

GET /api/undefined?response_type=code&client_id=&scope=&redirect_uri=&state=0f5a427a-a3c8-4dc9-895d-32bcf89a18a3 404 in 103

Nun weiß ich leider nicht wo mein Problem ist. Secret Client und Clined ID habe ich eingetragen, aber ich vermute irgendwie trotzdem das es daran liegt. Hast du eine Idee für mich?

Weiterhin ist mir bisher auch noch unklar, wie ich die Anwendung dann über mein Handy starten soll. Nodejs kriege ich ja nicht aufs Handy, genau so wenig ein CMD. Vielleicht kannst du mir hier auch weiterhelfen.

An diesem Punkten habe ich erstmal aufgegeben und versuche nun analog eine App mit den gleichen Funktionen über Android Studio mit Kotlin zu entwickeln (überhaupt keine Erfahrung hier - schau ma mal was wird)

Danke dir schonmal!

VG BerndSenf

Alles anzeigen

Deine Fehler sehen danach aus als wenn er die Environment variablen nicht gelesen hat. Hast du die .env.example in .env umbenannt und dort entsprechen die Client id Uerdingen eingetragen. Das „undefined“ und die fehlende clientId in der url die du angegeben hast lassen darauf schließen.

Alles anzeigen

Ja sehr cool das hat tatsächlich geklappt! Eigentlich hatte ich die .env Datei schon richtig im Ornder es hatte aber nicht geklappt. Dann habe ich die .env Datei vom Kartengenerator rüber kopiert und umgeschrieben und das hat dann funktioniert.

Jetzt stehe ich nur noch vor dem Fragezeichen wie ich das ganze jetzt noch aufs Handy bekomme? Ich habe bereits probiert in meinem Router eine Portfreigabe einzurichten um so auf meinen Rechner zugreifen zu können. Das hat jedoch nur soweit funktioniert, dass ich in Spotify gekommen bin und mich anmelden konnte und dann den Fehler INVALID_CLIENT: Invalid redirect URI bekommen habe. Meine IP habe ich auch in Spotify Developer Dashboard gepflegt, dass hat aber nicht zum gewünschten Ergebnis geführt.

Zitat von FMK

Zitat von BerndSenf

Ja sehr cool das hat tatsächlich geklappt! Eigentlich hatte ich die .env Datei schon richtig im Ornder es hatte aber nicht geklappt. Dann habe ich die .env Datei vom Kartengenerator rüber kopiert und umgeschrieben und das hat dann funktioniert.

Jetzt stehe ich nur noch vor dem Fragezeichen wie ich das ganze jetzt noch aufs Handy bekomme? Ich habe bereits probiert in meinem Router eine Portfreigabe einzurichten um so auf meinen Rechner zugreifen zu können. Das hat jedoch nur soweit funktioniert, dass ich in Spotify gekommen bin und mich anmelden konnte und dann den Fehler INVALID_CLIENT: Invalid redirect URI bekommen habe. Meine IP habe ich auch in Spotify Developer Dashboard gepflegt, dass hat aber nicht zum gewünschten Ergebnis geführt.

Was möchtest du auf dein Handy bekommen? Die Tunequest app zum spielen? Oder den Kartengenerator? Bei der Netzwerkfreigabe in deinem netzwerk kann ich glaube ich nicht so wirklich weiter helfen, da gibt es zu viele variablen, aber wo läuft denn der server? Bei dir auf dem rechner? Dann könnte deine windows firewall dem ganzen einen strich durch die rechnung machen. Sonst deutet der fehler darauf hin, dass die redirect url die in der developer console und die in der app nicht übereinstimmen. Vielleich spielst du damit noch einmal ein wenig rum (http(s) davor nicht vergessen).

Jaa die App zum spielen möchte ich aufs Handy bekommen.

Der Server läuft über meinen Rechner. Im Router habe ich eine Portfreigabe zu meinem Rechner eingerichtet. In meiner Firewall habe ich eine Eingangsregel eingerichtet. Vom Handy kann ich nun auch über die IP meines Rechners Tunequest im Browser öffnen. Ich konnte mich auch bwi Spotify vom Handy aus anmelden nur irgendwas mit der redirect url scheint nicht zu stimmen. In den spotify dev settings hab ich localhost sowie die IP meines Rechners eingetragen und in der .env ebenso die IP meines Rechners.

Belasse ich den localhost in der .env funktioniert es am Rechner einwandfrei (auch mit dem scannen usw.), dann komme ich tatsächlich auch über die IP meines Rechners vom Handy aus drauf, aber da die redirect uri ja localhost ist, steigt er nach der Spotify Anmeldung aus weil er von handy aus localhost erreichen will (klappt natürlich nicht). Und mit der IP von Rechner in der .env ists dann ein redirect fehler. Ich blicks nicht ganz.

Ich werde noch ein wenig rumprobieren und berichten. Falls jemand eine Idee hat immer her damit

Zitat von FMK

Zitat von BerndSenf

Jaa die App zum spielen möchte ich aufs Handy bekommen.

Der Server läuft über meinen Rechner. Im Router habe ich eine Portfreigabe zu meinem Rechner eingerichtet. In meiner Firewall habe ich eine Eingangsregel eingerichtet. Vom Handy kann ich nun auch über die IP meines Rechners Tunequest im Browser öffnen. Ich konnte mich auch bwi Spotify vom Handy aus anmelden nur irgendwas mit der redirect url scheint nicht zu stimmen. In den spotify dev settings hab ich localhost sowie die IP meines Rechners eingetragen und in der .env ebenso die IP meines Rechners.

Belasse ich den localhost in der .env funktioniert es am Rechner einwandfrei (auch mit dem scannen usw.), dann komme ich tatsächlich auch über die IP meines Rechners vom Handy aus drauf, aber da die redirect uri ja localhost ist, steigt er nach der Spotify Anmeldung aus weil er von handy aus localhost erreichen will (klappt natürlich nicht). Und mit der IP von Rechner in der .env ists dann ein redirect fehler. Ich blicks nicht ganz.

Ich werde noch ein wenig rumprobieren und berichten. Falls jemand eine Idee hat immer her damit

Also in dev .env und bei spotify musst du die url so eintragen wie du sie auch auf deinem handy aufrufst. Also wenn du er per ip machst dann musst da entsprechend http://1.2.3.4 als redirect url an beiden stellen stehen!

Jaaa schande über mich ich hatte in meiner IP 2 Tage lang einen Zahlendreher der mir nicht aufgefallen ist. Nun funktioniert der Callback auch. Aber leider immer noch nicht das gewünschte Ergebnis. Ich gelange immer nur auf den Startscreen. Zwar mit einem langen URL Zusatz, aber ansonsten nur der Startscreen.

Cache habe ich auch mal gelöscht damit ich mich neu anmelden muss, aber das hat auch nicht geholfen.

Vielleicht nicht ganz das gleiche. Denn die SSO URI wird bei mir im Browser nicht in der Adresszeile angezeigt und über einen Redirect direct nach dem Aufruf auf die landing page umgeleitet. Meine Vermutung ist, dass es mit Safe Browsing Richtlinien zu tun haben könnte.

Eine Lösung könnte sein, einen Reverse Proxy einzurichten. Das war die Idee, die FMK gestern hatte und durchaus funktionieren könnte. Ansonsten ist mir noch eingefallen, dass ein Browser ohne Safe Browsing Richtlinien, wie z. B. Brave evtl. auch eine Lösung sein könnte.

Ich habe mir das Thema noch einmal genauer angeschaut und einen Reverse Proxys it NGINX vorgeschaltet. Das Ergebnis hat sich allerdings nicht verändert und wie es scheint gibt es eine gestörte Kommunikation zwischen node.js und Spotify. Am Client ist alles richtig. Er bekommt einen 307 vom Server gemeldet und verbindet auf die unter location angezeigte Adresse, in diesem Fall /.

Ich habe auch noch ein bisschen rumgeschaut und dabei herausgefunden, dass node.js mit Redirects durchaus seine Probleme haben kann:

Handling a HTTP redirect in node.js | Matt Lunn

Ich habe leider keine Idee mehr, warum es nicht klappt. Vermute aber mittlerweile, dass es irgendwo an node.js liegt.

Zitat von No_one

Ich habe mir das Thema noch einmal genauer angeschaut und einen Reverse Proxys it NGINX vorgeschaltet. Das Ergebnis hat sich allerdings nicht verändert und wie es scheint gibt es eine gestörte Kommunikation zwischen node.js und Spotify. Am Client ist alles richtig. Er bekommt einen 307 vom Server gemeldet und verbindet auf die unter location angezeigte Adresse, in diesem Fall /.

Ich habe auch noch ein bisschen rumgeschaut und dabei herausgefunden, dass node.js mit Redirects durchaus seine Probleme haben kann:

https://www.mattlunn.me.uk/2012/05/handli…ect-in-node-js/

Ich habe leider keine Idee mehr, warum es nicht klappt. Vermute aber mittlerweile, dass es irgendwo an node.js liegt.

Ich habe mit meinem Basiskollegen auf der Arbeit gesprochen und er hat in etwa das gleiche vermutet wie du.

Witzigerweise funktioniert es ja korrekt wenn ich den Server lokal laufen lasse und die redirect der localhost ist. Nur beim aufrufen der ip über ein anderes Gerät hat er die Probleme.

Mein Kollege hat noch in den Raum geworfen, dass es ggf. Zu einem Session verlust kommt (?) Sprich möglicherweise speichert die Anwendung nur für dem localhost den Zugriff und nicht für die IP.

Ist denn soetwas wie express-session integriert ( FMK)?

Da hört mein spanisch leider auf.

Was ich mir noch vorstellen könnte ist, dass der Wechsel von http auf https das Problem ist. Für den Wechsel könnte der 307 genutzt werden, der dann bei node.js falsch verarbeitet wird. Wenn ich mich recht erinnere, war es bei dir, FMK so, dass du mit https arbeitest.

Leider kenne ich mich mit node.js und tsx nicht weiter aus, weswegen ich da auch nicht viel machen kann. Vielleicht schaue ich mal, ob ich das ganze nach NGINX oder APACHE portiert bekomme. Da könnte ich eher was machen.

Ich kann offiziell bestätigen - deine App läuft auf dem Raspi und ist https only.

Was nicht funktioniert hat war den next-Befehl nach dem Start der Dev-Umgebung in der Konsole einzugeben. Es gibt aber ohnehin den eleganteren Weg über die package.json.

Ich habe in der package.json den Eintrag

"dev": "next dev",

geändert in

"dev": "next dev --experimental-https",

Nach dem Starten über das gewohnte npm run dev war der Server über https (mit den zu erwartenden Warnungen) vom Handy/Tablet aus erreichbar und das Spielen klappte wie gewünscht. Jetzt kann ich mir Gedanken über eine App machen, bei der im Wechsel immer Barcode und nach Swipe die Auflösung angezeigt wird, damit ohne große Basteln "on the fly" Listen generiert werden können.

Aber lange Rede, kurzer Sinn - es läuft jetzt auch mit dem Server auf meinem Rasperry Pi!

Coole Sache und noch mal vielen Dank für deine Mühe!

Yep, genau das schwebt mir vor. Digitale Codes mit digitalen Auflösungen und einem Satz Jahreskarte zum Spielen.

Beim Card Generator hängt es jetzt auch schon wieder. Den habe ich auf dem lokalen Rechner laufen mit node.js. Klappt auch soweit und ich kann mich verbinden, allerdings kommt immer die Meldung, dass die Client URI falsch ist. In der Browserconsole sehe ich, dass sowohl die Client ID als auch die Redirect URI als Wert undefined übermitteln beim Request.

Hat sich erledigt. Im Gegensatz zur Spiel-App wird die .env nicht dynamisch eingelesen. Ich habe gerade noch mal einen npm install laufen lassen und jetzt klappt es. Einfach nur anpassen in der Datei hat nicht funktioniert.