Captive Portal mit pfSense
Teil 5 - Captive Portal anpassen
Mit der freien Software pfSense lassen sich Router, Firewalls, VPN-Gateways, Proxys und Hot Spots realisieren.
Im diesem Teil geht es um die Anpassung der Anmeldeseite des Portals für den Hot Spot.
Anmeldeseite anpassen
Die Anmeldeseite ist eine ganz normale HTML-Seite. Sie kann zuerst auf dem PC erstellt und getestet werden.
Für die Benutzung in der HTML-Seite können Bilder auf die Firewall hochgeladen werden.
Unter Services / Captive portal steht dafür der File Manager zur Verfügung. Alle Dateinamen müssen mit
captiveportal- beginnen. PHP-Scripte lassen sich auf dem selben Weg verfügbar machen.
Alle Dateien dürfen zusammen 256 KB groß sein.
In der HTML-Seite muss ein Formular in der Form:
<form method="post" action="$PORTAL_ACTION$">
<input name="auth_user" type="text">
<input name="auth_pass" type="password">
<input name="auth_voucher" type="text">
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
<input name="accept" type="submit" value="Continue">
</form>
enthalten sein. Der Rest ist frei gestaltbar.
Sie sollten die erstellte Seite mit allen gängigen Browsern testen.
Eine Anmeldeseite könnte wie folgt aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>network lab Hot Spot</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body bgcolor="#b3b3b3">
<img src="captiveportal-logo.png" align="right" style="margin-left:40px" alt="Logo">
<h1><font face="Arial">Internetzugang network lab</font></h1>
<p><font face="Arial">
Um unseren Internetzugang nutzen zu können, müssen
Sie sich anmelden. Bitte geben Sie Ihren Benutzernamen
und das Kennwort ein.</font>
</p>
<form method="post" action="$PORTAL_ACTION$">
<table border="0" cellpadding="5">
<tr>
<td><font face="Arial">Benutzername</font></td>
<td><input name="auth_user" type="text"></td>
</tr>
<tr>
<td><font face="Arial">Kennwort</font></td>
<td><input name="auth_pass" type="text"></td>
</tr>
<tr>
<td></td>
<td><input name="accept" type="submit" value="Anmelden"></td>
</tr>
</table>
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
</form>
<p><font face="Arial">
Für Besucher sind die Dienste HTTP, POP3, IMAP und SMTP freigeschaltet.
Nach 60 Minuten ist eine erneute Anmeldung erforderlich.
Bitte beachten Sie die Groß- und Kleinschreibung bei Ihren Eingaben.</font>
</p>
<p style="clear:both">
</p>
<p align="center"><font face="Arial" size="-2">
pfSense hotspot at network lab<br>www.nwlab.net</font>
</p>
<p align="center">
<img src="captiveportal-valid-html.gif" alt="html">
</p>
</body>
</html>
Nach dem Upload sieht die Anmeldeseite so aus:
Angepasste Anmeldeseite des Captive Portals
Fehlerseite anpassen
Die Fehlerseite kann ebenfalls angepasst werden. Eine eventuelle Fehlermeldung
des RADIUS-Servers kann über die Variable $PORTAL_MESSAGE$ in die Ausgabe integriert werden.
Die Fehlerseite kann auch wieder das Anmeldeformular enthalten.
Hier ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>network lab Hot Spot</title>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body bgcolor="#b3b3b3">
<img src="captiveportal-logo.png" align="right" style="margin-left:40px" alt="Logo">
<h1><font face="Arial">Internetzugang network lab</font></h1>
<h2><font face="Arial" color="red">Es ist ein Problem bei der Anmeldung aufgetreten.</font></h2>
<p><font face="Arial">
Um unseren Internetzugang nutzen zu können, müssen
Sie sich anmelden. Bitte geben Sie Ihre Zugangsdaten
erneut ein.</font>
</p>
<form method="post" action="$PORTAL_ACTION$">
<table border="0" cellpadding="5">
<tr>
<td><font face="Arial">Benutzername</font></td>
<td><input name="auth_user" type="text"></td>
</tr>
<tr>
<td><font face="Arial">Kennwort</font></td>
<td><input name="auth_pass" type="text"></td>
</tr>
<tr>
<td></td>
<td><input name="accept" type="submit" value="Anmelden"></td>
</tr>
</table>
<input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
</form>
<p><font face="Arial">
Für Besucher sind die Dienste HTTP, POP3, IMAP und SMTP freigeschaltet.
Nach 60 Minuten ist eine erneute Anmeldung erforderlich.
Bitte beachten Sie die Groß- und Kleinschreibung bei Ihren Eingaben.</font>
</p>
<p style="clear:both">
</p>
<p align="center"><font face="Arial" size="-2">
pfSense hotspot at network lab<br>www.nwlab.net</font>
</p>
<p align="center">
<img src="captiveportal-valid-html.gif" alt="html">
</p>
</body>
</html>
Im Browser sieht ein Anmeldefehler dann so aus:
Die angepasste Fehlerseite
Die Verwendung von JavaScript in den Anmeldeseiten ist ebenfalls möglich.
Alle Teile des pfSense-Tutorials
Weiterführende Informationen zu pfSense
| 
