evcc feat: ui oauth integration

FollowUp für #21003

Ziel: Login/Logout via OAuth irgendwie in die UI zu integrieren.

Möglichkeiten:

Beim Testen der Konfiguration eines Fahrzeugs wird ermittelt, ob ein Login erforderlich ist. Dabei wird man automatisch auf die Loginseite geleitet.
Es gibt irgendwo einen Knopf "Login", den man drücken kann. Dieser erscheint, je nachdem ob das ausgewählte Template einen Login erfordert.

May 16 '25 16:05 lehmanju

Persönlich tendiere ich zu 1, auch weil man keinen zusätzlichen Login Button braucht, der nur manchmal da ist:

Beim Testen der Konfiguration werden Werte und Fehler via testInstance zurückgegeben. Dabei kann auch die LoginUrl übermittelt werden. Beim Iterieren über die Rückgabewerte in test.js wird nach einem Authorization Fehler gesucht. Falls dieser vorhanden ist, wird man in einem neuen Tab auf die Login Seite des Herstellers geleitet. Nach erfolgreichem Login, sollte ein erneutes Ausführen des Tests erfolgreich sein.

Falls ein vorhandenes Vehicle editiert wird, kann ein zusätzlicher Logout Button angezeigt werden.

May 16 '25 16:05 lehmanju

Haben wir eine Datenabhängigkeit von Nutzereingaben (bspw. VIN, ...) zu des Login Buttons? Also, dass wir die richtige URL erst dann erzeugen können, wenn der Nutzer bestimmte Felder ausgefüllt hat?

Generell würde ich Variante 2 bevorzugen. Also ein Login/Logout Button, sofern erforderlich. Den aktuelle Status des Auth-Vorgangs und Logout müssen wir auf der Seite ja ohnehin anzeigen. Die "Test"-Funktion würde ich unabhängig davon sehen. Aus Nutzersicht kann es unerwartet sein, dass ein Klick auf Test oder Speichern zu einem Absprung nach Außen führt. Beim Klick auf einen "Anmelden" (o.ä.) Button würde man so etwas ja durchaus erwarten.

Spannend ist ja auch der Rücksprung ins Config UI. Hier müssten wir dem Nutzer ja das, ggf. noch nicht gespeicherte, Formular/Modal wieder anzeigen.

May 17 '25 10:05 naltatis

Ja, Datenabhängigkeit besteht, zumindest bei Volvo. Bei anderen APIs sind die Oauth Einstellungen fest.

Einfachste Lösung, die mir einfällt, ist im Template einen Switch uiLogin: true einzubauen. Dann beim Laden der möglichen Templates entsprechend Button anzeigen oder nicht. Leider ist die Url für den Klick zu dem Zeitpunkt noch nicht bekannt.

May 17 '25 11:05 lehmanju

Leider ist die Url für den Klick zu dem Zeitpunkt noch nicht bekannt.

Könnten wir ja auch über einen Redirect über uns selbst spielen - zusammen mit den Nutzer-Eingaben als Params.

Datenabhängigkeit: wir könnten den neuen "Login" Button, genau wie Test und Save, auch an die Validity des Forms koppeln.

Also de-facto gleiche Signatur/Verhalten wie der Test-Endpunkt nur mit einer dedizierten Aufgabe: Starten des OAuth-Flows.

May 17 '25 16:05 naltatis

gerade leider wenig Zeit hieran weiterzuarbeiten.

Ganz interessant ist die Herangehensweise von HomeAssistant bzgl OAuth: https://www.home-assistant.io/integrations/application_credentials/

(als Orientierung)

Jun 06 '25 10:06 lehmanju

Hamburger Menü zum Einloggen und Ausloggen funktioniert jetzt. Einzig das Hinzufügen eines Fahrzeuges ist ein bisschen blöd, weil man erstmal eine Fehlermeldung bekommt.

Jul 06 '25 17:07 lehmanju

Großartig!

@naltatis könntest Du evtl. mal den Neuanlageflow anschauen?

Jul 06 '25 17:07 andig

Eine einfache Möglichkeit wäre vielleicht, dass beim Speichern eines Fahrzeuges, dessen "Test" fehlschlägt, ein kleiner Warn Dialog angezeigt wird, bei dem man "Trotzdem Hinzufügen" klicken kann.

Jul 13 '25 09:07 lehmanju

@andig Gibt es hier noch ein To-Do für mich? Oder kann es erstmal so gemerged werden und der AuthFlow wird nachträglich verbessert? So wäre es auf jeden Fall schonmal besser als jetzt.

Jul 26 '25 08:07 lehmanju

Ich würde gerne noch Feedback von @naltatis abwarten, dann rein damit. Das kann noch ein paar Tage dauern.

Jul 26 '25 08:07 andig

Ich hab den Bereich in der Top-Navigation jetzt noch mal etwas überarbeitet und die Gruppe in "OAuth Status" umbenannt. Ist ein eher technischer Namen, aber der Nutzer wird damit ja auch im Einrichtungsprozess konfrontiert. Die Einrichtunganleitung ist auch etwas schicker formuliert. Der Prozess mit dem neuen Tab ist natürlich noch optimierungsfähig. Wichtig ist aber erstmal, dass der Flow überhaupt funktioniert.

@lehmanju teste bitte noch mal ob das bei dir weiterhin funktioniert.

Aug 01 '25 10:08 naltatis

Autorisierungsstatus statt Oauth?

Aug 01 '25 10:08 andig

Autorisierungsstatus

Das ist so ein langes und kompliziertes Wort. Weitere vorschlage:

Verknüpfte Dienste / Linked Services
~Anbieter-Status / Provider Status~ (ist missverständlich. Verwechslungsgefahr mit Cloud Erreichbarkeit)
Service-Verbindungen / Service Connections

Aug 01 '25 10:08 naltatis

Hauptsache nicht OAuth

Aug 01 '25 11:08 andig

Ok "Authorization Status" / "Autorisierungsstatus" it is.

Aug 01 '25 13:08 naltatis

grafik

Funktioniert noch, ich hab die callback url noch berichtigt.

Das "skiptest" ist nur notwendig, weil ich den Vehicle Namen im Code verwende und da gab es keinen example value für in der yaml. Also entweder "skiptest" beibehalten oder example: My favourite EV wieder hinzufügen.

Aug 01 '25 13:08 lehmanju

Funktioniert noch, ich hab die callback url noch berichtigt.

Ok, das kling doch gut.

Das example: My favourite EV habe ich rausgenommen da es sonst bei jedem Fahrzeug in den Docs und auch in allen Sprachen im UI angezeigt wird.

Aug 05 '25 20:08 naltatis

Tausend Dank- grossartiger PR!

Aug 05 '25 21:08 andig

Leider ist die UI nach dem Merge jetzt kaputt. Ich schau mal warum.

Aug 06 '25 08:08 lehmanju