[GELÖST] Captive Portal - rediurl und signin mit voucher

[Oxygen61]

hey hey,

habe jetzt heute etwas am Captive Portal schrauben können wobei mir ein paar Dinge aufgefallen sind.

=== Was ist mir aufgefallen: ===

1) Ein Captive Portal mit Benutzername & Passwort (Local Database) und ZUSÄTZLICH einem Vouchercode Feld ohne Voucher-Password, also 3 Felder sind nicht länger gewollt (seit ver. 16.x) und nicht auf einfachen Wege mehr umsetzbar. Schade! Hätte ich gern gehabt.
Siehe: https://github.com/opnsense/core/issues/688

2.) Da ich mich dank überragender HTML Kenntnisse total auskenne  (Achtung Sarkasmus) fing ich damals mal an das Captive Portal anhand der Template Vorlage aufzubauen die man im OPNsense Wiki findet.
Hat man nun zwei Felder in seinem Template für Benutzername und Password und lässt diese aber leer und bestätigt dann die leere "Eingabe" mit dem Button:

Code: [Select]

<input class="btn btn-lg btn-success btn-block" id="signin" name="accept" type="submit" value="Benutzer anmelden">stürzt die WLAN Verbindung sofort ab (getestet am Samsung S7 Android - nicht gerooted), anstatt mit

Code: [Select]

window.location = 'http://'+getURLparams()['redirurl']+'?refresh';das Captive Portal zu refreshen.
So wie ich das herausfinden konnte liegt das wohl daran, dass man bei "Services>Captive Portal>Administration" als Authenticate using die local Database und/oder den Voucher Server genommen hat aber folgenden Code NICHT auskommentierte:

Code: [Select]

/**
*login anonymous, only applicable when server is configured without authentication
*/   
[.....]Kommentiert man diesen Abschnitt aus ist der Fehler weg.
Nur damit andere nicht in die selbe Falle tappen vielleicht.

=== Meine Fragen: ===

1.) Ich hab ähnlich wie bei der (Advanced - Session popup) Vorlage in https://docs.opnsense.org/manual/how-tos/guestnet.html versucht eine Error.html Seite zu erstellen, die die aktuelle Captive Portal Seite  neu laden sollte mit einer Fehlermeldung:

Code: [Select]

<div class="alert alert-warning">
<strong>Error:</strong>&nbsp;Fehler bei der Anmeldung. Bitte überprüfen sie Benutzername und Passwort.
</div>Klappt auch alles ganz gut, nur habe ich Probleme den "rediurl" Inhalt über mehrere Error Seiten hinweg zu behalten. Angenommen ein User vertippt sich zweimal, dann wird also beim zweiten Mal laden der error.html Seite aus der redirection URL "?rediurl=<http Seite.de>" nämlich nur noch "?rediurl=undefined".
Der Code den ich dafür verändert hatte im Script war folgender:

Code: [Select]

// redirect on successful login
[.....]
                        } else {
                            $("#errorMSGtext").html("authentication failed");
                            $("#alertMSG").removeClass("hidden");
window.location = 'https://foo.foobar.de:8080/error.html'+'?rediurl='+getURLparams()['redirurl'];
                        }
[.....]Wie gesagt, einmal vertippen geht (Der Sprung von index.html zu error.html), beim zweiten (error.html zu error.html) mal ist die rediurl = undefined 
Hat einer ne Idee?
EDIT: Grade nochmal getestet, die rediurl wird nach dem Wechsel von index.html zu error.html zwar mitgenommen, aber nicht als Variable gespeichert --> ein redirect funktioniert dann trotzdem nicht obwohl da die vorherige redirect url in der Captive Portal URL mit drinne steht. Sehr komisch. :/

2.)
Ich muss bedingt durch das Design des Captive Portals insgesamt 4 Felder (jeweils 2 für Local Database und 2 für Voucher) in meine Webseite einbauen, obwohl man es auch in 2 Feldern umsetzen könnte.
Nun dachte ich mir ich kopiere einfach das was schon für den Benutzernamen+Password für die Local Database funktionierte und wechsel einfach die Variablen aus.
Siehe:

Code: [Select]

/**
* logon action 2 - Voucher
*/
      $("#signin2").click(function (event) {
      [.....]
      data:{ user: $("#inputVouchername").val(), password: $("#inputVoucherpassword").val() }
[......]Im HTML Teil schrieb ich folgendes:

Code: [Select]

<label for="inputUsername" class="sr-only">Benutzer Login</label>
   <input name="auth_user" type="text" id="inputUsername" class="form-control" placeholder="Benutzername" required autofocus>
            <input name="auth_pass" type="password" id="inputPassword" class="form-control" placeholder="Passwort" required>
             <input class="btn btn-lg btn-success btn-block" id="signin" name="accept" type="submit" value="Benutzer anmelden">
<p></p>
                    <p>
bla bla bla Text Text
          </p>
<label for="inputVoucher" class="sr-only">Vouchercode</label>
                <input name="auth_voucher_user" id="inputVouchername" type="text" placeholder="Voucher Name" class="form-control">
<input name="auth_voucher_pass" id="inputVoucherpassword" type="password" placeholder="Passwort" class="form-control">
                <input class="btn btn-lg btn-success btn-block" id="signin2" name="accept" type="submit" value="Vouchercode anmelden">Ich hab also die "id's" neu gesetzt und ausgetauscht was nicht funktionierte. Gebe ich in die Felder Vouchername und Passwort Daten ein und drücke auf den zweiten Voucher anmelde Button startet die session nicht und ich lande wieder auf der selben error.html seite wie zu vor.

Hoffe mir kann da jemand helfen.

Schöne Grüße
Oxy

[guest15032]

Hallo Oxy,

ich bin zwar Entwickler (und verstehe somit technisch die Details) aber es ist schwer, da mit solchen Code Fragmenten viel zu sagen. Meist ziehen sich solche Fehler durch mehrere Fuktionalitäten. Wenn Du z.B. eine einzige JavaScript Variable an einer Stelle änderst bzw. kopierst, wirst Du damit nicht zwangsläufig eine komplette Funktionalität erschaffen haben.

Im Gegenteil, oft führt das als erstes schnell zu Fehlern, weil da z.B. nicht initialisierte Werte durch die Gegend fliegen oder weil irgendwo ein EventListener an eine JS Funktion gebunden ist und beim Aufruf bestimmter anderer Funktionen dann getriggert wird (mit Werten, die dann evtl. nicht vorgesehen sind, usw.).

Also ohne viel davon zu kennen, nur meine spontanen Ideen...

Zu 1.

Code: [Select]

window.location = 'https://foo.foobar.de:8080/error.html'+'?rediurl='+getURLparams()['redirurl'];

Da holst Du Dir den Parameter aus der URL, der Parameter heißt rediurl, du greifst aber auf redi__r__url zu (das "r" ist zu viel, hab nur die Unterstriche mit eingebaut um das ersichtlich zu machen). Ist das so gewollt? Ansonsten wäre das mein erster Ansatz, in JS sind Variablen, die nicht initialisiert wurden, als "undefined" deklariert.

Zu 2.

Hast Du mal im Browser deine Debug Konsole geöffnet und dort nachgesehen, welche Fehler Dir ausgegeben werden? Da sollte eigentlich ein entsprechend lesbarer Fehler Stack zu sehen sein.

Gruß
Chris

[Oxygen61]

Hey ne0h,

vielen vielen Dank für die Erklärung zu den Hintergründen. Ich tappse da im dunkeln von Zeile zu Zeile. Da ist es immer schwer zu verstehen warum etwas nicht geht.

zu 1.)
Du wirst es nicht glauben, aber es lag tatsächlich an dem "r" 
Als ich

Code: [Select]

window.location = 'https://foo.foobar.de:8080/error.html'+'?rediurl='+getURLparams()['redirurl'];zu

Code: [Select]

window.location = 'https://foo.foobar.de:8080/error.html'+'?redi____r___url='+getURLparams()['redirurl'];änderte,
funktionierte es plötzlich einwandfrei.. Die error Seite läd sich immer wieder und nimmt die redirurl jedes mal mit und wenn ich dann (angenommen beim dritten Fehlversuch) mich dann doch richtig authentifiziere lande ich tatsächlich auf der redirect Seite. Schöne Sache!  Darauf wär ich im Leben nicht gekommen. Danke!

zu 2.) Danke für den Tipp. Da setz ich mich jetzt mal ran und schau mal ob ich da ein paar neue Erkenntnisse bekomme. Wenn sich was ändert oder ich etwas herausfinde schreibe ich es hier rein.

Danke erstmal für die Mühe und schöne Grüße
Oxy

[guest15032]

Hi,

jau, kein Problem.

Nach so vielen Jahren in dem Bereich behaupte ich, dass es kaum was unangenehmeres gibt, als JavaScript Fehler nachzuverfolgen und die Trace Stacks zu verstehen. Vor allem, wen man in die berühmte "Callback Hell" kommt. ES6 macht da einiges schon besser.

Du hast bei Punkt 1. jetzt aber nur die Unterstriche mit reinkopiert, um das hervorzuheben, oder?  Sonst würde ich mich wundern. 

Ein Tipp zu Punkt 2.:

Du kannst mit der JS Console (die ist ja in den Developer Tools beim Chrome und Firefox)  ganz gut arbeiten, wenn es um rudimentäre Probleme geht. Z.B. kannst Du dir in deinem JS die Variablenwerte ausgeben lassen, wenn Du wissen willst, wo welche Werte stehen sollen, z.B. so:

Code: [Select]

console.log(myVarName)
Das ganze geht auch interaktiv in der Console, also du kannst da direkt rumspielen und testen. Wenn Du z.B. ein

Code: [Select]

alert('hallo')
eingibst und Enter drückst, dann rufst du auch direkt aus der Console diese JS Funktion auf.

So kannst Du Dich zumindest mal bisschen durchhangeln und schauen, ob da irgendwo Werte nicht passen.

Inzwischen sind die Developer Tools schon sehr mächtig geworden, Du kannst also (wenn Du weißt, an welcher Stelle du ansetzen möchtest) sogar Breakpoints in jeder geladenen JS Datei setzen und dann mit dem Debugger die Aufrufe durchlaufen und z.B. diverse Parameter beobachten lassen, usw.

Gruß
Chris

[DokuKäfer]

Auch wenn es funktioniert, ich glaub wenn ich ne0h richtig verstanden habe gehören die "Unterstriche" nicht rein! 

Code: [Select]

window.location = 'https://foo.foobar.de:8080/error.html'+'?rediurl='+getURLparams()['rediurl'];

Im hinteren rediurl war ein R zuviel!

[Oxygen61]

Hey hey,

ja die Unterstriche nur wieder um zu veranschaulichen.
@DokuKäfer ne das R am Ende ist nicht zu viel (zumindestens laut dem OPNsense Template aus der doku).
Dort ist in der Vorlage auch ein R dabei. Bei meiner selbstgebastelten Code Zeile hatte ich bloß das R vergessen.

@ne0h tut mir wirklich leid aber das sind böhmische Dörfer für mich leider.
Ich versteh schon was du meinst, aber ob ich das so umgesetzt krieg... puhh

Was mir inzwischen aufgefallen ist, ist das der Voucher generell abgelehnt wird. Ob ich den Voucher in den Benutzname/Passwort Feld eintrage und bestätige oder in den Voucher feldern und bestätige... Beide male ladet die error Seite und im Captive Portal Log steht auch ein DENY Eintrag zu meinem Voucher.
Voucher Server ist aber im Captive Portal als Authenticate using eingestellt.
Hab gerade das Gefühl, dass es nicht an dem Code sondern an was anderem liegt hm. :/

Ich schau mal ob ich das mit dem Debugger hinkrieg, noch nie ernsthaft damit gearbeitet bis jetzt :/

[guest15032]

@ne0h tut mir wirklich leid aber das sind böhmische Dörfer für mich leider.
Ich versteh schon was du meinst, aber ob ich das so umgesetzt krieg... puhh

Sorry, sollte nicht zu viel werden.

Steht denn in deinem Portal Log mehr, als nur das DENY? Also irgendein anderer Hinweis auf den Fehler?

Der Debugger wid dir echt nur weiterhelfen, wenn Du glaubst, dass der Fehler in der JavaScript Verarbeitung liegt.

Mein persönlicher Ansatz wäre, sich vom einfachsten Fall langsam hoch zu arbeiten. Also erst Mal das nehmen, was funktioniert. Und dann Schrittweise das hinzufügen, was Du benötigst und dabei in jedem Zwischenschritt prüfen, ob Dir ein Fehler auffällt.

Also einfacher gesagt, wenn Du z.B. einen kompletten Funktionsblock kopierst, dann weißt Du nicht zwangsläufig, ob Du da nicht Abhängigkeiten hast (durch anderen Code), der deinen eigentlichen Fehler verschleiert bzw. überschreibt, als Folgefehler, etc. Callbacks in JavaScript sind da so ein komplizierter Fall, da werden dann Funktionen aufgerufen, die wieder Funktionen aufrufen, die Funktionen aufrufen....usw. und die Return Werte werden dann genau so wieder durchgereicht, Schritt für Schritt. Das kann dann schnell mal ausarten und man sucht dann tatsächlich plötzlich an einem ganz anderen Ende.

Ich hab bisher noch immer kein Captive Portal aufgesetzt aber ich glaube, da ich das ja nur privat mache, werde ich deinen Anwendungsfall auch eher nicht haben. Aber daher habe ich auch noch keine Erfahrungswerte, leider.

Gruß
Chris

[Oxygen61]

Hey hey,

Leute!! Fehler gefunden! Und Franco is schuld haha

Ne ohne Spaß jetzt. Franco is wirklich Schuld. (Nich böse gemeint)
Durch das "Enforce Local Group" Feature was ich mir selber (!) mal gewünscht hatte,
werden Voucher Codes nicht mehr anerkannt, wenn man dort eine lokal erstellte Gruppe einträgt.
Tja.. Eigentor durch das Feature was ich mir selber mal gewünscht hatte. 

Fazit: Grade testweise mal die "enforce local group" ausgeschaltet und probiert.
Siehe da.. die Vouchers werden erkannt und sogar (!) an den zwei zusätzlichen Feldern,
die ich nur kopiert und umformuliert hatte, richtig verwertet (Captive Portal Log: AUTH).
Theoretisch müsste man die Voucher Codes als "User" sozusagen in die Gruppe einfügen,
die bei "enforce local group" eingetragen wurde und für Captive Portal berechtigt ist.
Oder man lässt Vouchercodes immer durch und beschränkt das "enforce local group" wirklich nur auf die local database (was wahrscheinlich mehr sinn macht an dieser Stelle).

Mein persönlicher Ansatz wäre, sich vom einfachsten Fall langsam hoch zu arbeiten. Also erst Mal das nehmen, was funktioniert. Und dann Schrittweise das hinzufügen, was Du benötigst und dabei in jedem Zwischenschritt prüfen, ob Dir ein Fehler auffällt.

Das sagt sich so leicht, wenn man programmieren gewohnt ist. Ich kann grundlegend verstehen und code lesen und ein bisschen Bash Scripte schreiben (durch zusammenbasteln von Code Schnipseln anderer).
Den Störungsfall den du beschreibst.... beim Besten Willen, da bin ich komplett überfragt. :/
Bin echt froh, dass es anscheinend doch nich daran lag.
Ich mach grad mal ein paar Tests um zu schauen wie sich die Voucher und das Captive Portal und das JavaScript/HTML jetzt verhalten.

Schöne Grüße
Oxy

[Oxygen61]

Hey hey,

Jetzt geht auch plötzlich die Umsetzung mit 3 Eingabe-Feldern,
wo nur ein Vouchercode Benutzername eingetragen werden muss ohne Passwort.
Hierfür hatte ich beim Voucher Server die Password Length auf 0 gesetzt.
Wenn ich jetzt den Vouchercode eintrage funktioniert es... genial

Aber wie schon gesagt (ich hatte gerade noch einmal getestet):
Enforce Local Group eingeschaltet und Gruppe ausgewählt: Voucher Codes werden nicht länger mehr akzeptiert
Enforce Local Group abgeschaltet: Voucher Codes werden wieder anerkannt.

Schöne Grüße
Oxy

[guest15032]

Hört sich das alles ganz gut an.

Wenn meins nicht läuft demnächst, schreib ich Dir. 

Gruß
Chris

[Oxygen61]

Hey hey,

Haha mach das! 
Mittlerweile hab ich außer ner RADIUS Implementation und LDAP und ner extra Session logout Seite alles umgesetzt in Richtung Captive Portal, was ich machen sollte. Klappt auch alles erstaunlich gut.
Wenn du da zur Einrichtung fragen hast sag bescheid.
Besonders das Zertifikatshandling war knifflig fand ich.

Schöne Grüße
Oxy

[guest15032]

So weit wird es bei mir bestimmt nie gehen.  Aber mache ich.

Gruß

[Oxygen61]

Die Enforce Local Group Problematik habe ich mal als Bug bei Github gemeldet.
Siehe: https://github.com/opnsense/core/issues/1503
Vielleicht bin ich da ja auch einfach nur allein mit dem Problem.