LANCOM Systems Support KnowledgeBase - Support Information
Document No: 1312.1812.3736.RHOO

Implementierung eigener Webseiten für die LANCOM Public Spot Option
Beschreibung:

Dieses Dokument beschreibt die Vorgehensweise, eigene Webseiten im Public Spot Modul zu hinterlegen, um somit das Layout den eigenen Wünschen entsprechend anzupassen. Für die Gestaltung werden Ihnen Templates zur Verfügung gestellt. Das Dokument erläutert dann wie die selbst gestalteten Webseiten auf dem LANCOM abgelegt werden und wie in der Konfiguration die eigenen Webseiten eingebunden werden.

Ferner werden Lösungen aufgezeigt, wie die im Browser angezeigte Sicherheitswarnung zum SSL-Zertifikat bei HTTPS-Zugriff auf dem LANCOM unterbunden werden können.


Voraussetzungen:


Vorgehensweise:

Gestaltung der Webseiten:

Für die Gestaltung der Public-Spot-Webseiten können Sie folgende Webseiten-Templates nutzen und das Design entsprechend Ihren Wünschen verändern.
  • Willkommen (willkommen.htm)
  • Anmeldung (anmeldung.htm)
  • Fehler (fehler.htm)
  • Start (start.htm)
  • Status (status.htm)
  • Abmeldung (abmeldung.htm)
  • Hilfe (hilfe.htm)
  • Kein Proxy (kein_proxy.htm)
  • Voucher (voucher.html, Voucher_Non_Internet Explorer.htm)
  • Nutzungsbedingungen (nutzungsbedingungen.htm)
  • Allgemeine Geschäftsbedingungen (geschäftsbedingungen.htm)
  • Rückfall-Fehler (rueckfall_fehler.htm)
    Diese Templates sind ab LCOS-Version 8.84 verwendbar:
  • Registrierung (E-Mail) (registrierung_email.htm)
  • Anmeldung (E-Mail) (anmeldung_email.htm)
  • Registrierung (E-Mail zu SMS) (registrierung_sms.htm)
  • Anmeldung (E-Mail zu SMS) (anmeldung_sms.htm)

    Info:
    Wenn Sie den LANCOM Public Spot an ein PMS-System angebunden haben und z.B. auf der Public Spot Anmelde-Seite PMS-spezifische Parameter einbinden möchten, so müssen Sie diese Parameter händisch in das Anmelde-Template einfügen.





Anpassen der Templates:

Zum Bearbeiten der Templates benötigen Sie einen Editor. Diverse Editoren mit html/CSS - Syntax-Highlighting, wie z.B. Notepad++ oder PSPad, sind frei verfügbar. Um RGB-Farbwerte von vorhandenen Logos oder Webseiten zu bestimmen, empfiehlt sich das Freeware-Programm Color Detector.

Generell gliedern sich die Templateseiten in die drei Bereiche Header, Content und Footer.

BereichBeschreibung
HeaderÜberschriften und Kopfbild
ContentInhalt der Seite
FooterFußzeile



Diese drei Bereiche finden sich auch im Quellcode wieder, so dass Sie sich bei der Seitengestaltung daran orientieren können. Wichtige Bereiche für Anpassungen sind in der Form /* Kommentar */ (im CSS-Bereich) bzw. <!-- Kommentar --> (im html-Bereich) kommentiert.

Das Layout und die Farbgebung der Seite kann im oberen Bereich der Quellcodes, innerhalb des <style>-Tags bestimmt werden.




Der Textinhalt der Seite wird im unteren Bereich innerhalb des <body>-Tags definiert.



Schriftart sowie Text- und Hintergrundfarben können leicht angepasst werden. Farben werden als hexadezimale RGB-Werte angegeben.
    Info:
    Es gibt diverse Elemente, die nur vom LANCOM Router interpretiert werden (<pbelem>, <pblink>, etc.). So erscheint z.B. das Kopfbild oder das Login-Formular erst, wenn die Seite über den internen Webserver aufgerufen werden. Die Funktion dieser Tags ist im Quellcode dokumentiert.


Einfügen von Bildern

Im LANCOM-Router kann ein Kopfbild für die Public Spot Seiten abgelegt werden. Das Bild wird im Quellcode durch das Element <pbelem voucherimg> in die Seite eingebunden. Sobald ein Kopfbild hochgeladen wurde, wird dieses auch von den bereits vorgegebenen Standard-Seiten genutzt.
    Info:
    Die möglichen Auflösungen werden durch die CSS-Datei des Gerätes vorgegeben. Für die vorinstallierten Standardgrafiken betragen sie 800x150 px für das Großbild und 258x52 px für das Kleinbild. Der Dateityp muss entweder JPG, GIF oder PNG sein. Die Dateigröße darf maximal 64 kB betragen, dies gilt jedoch nur für Geräte mit NOR Speicher (die Design Beschränkung der Bildgröße in Pixeln gilt für alle Geräte).

    Wenn Sie kein Kopfbild verwenden möchten, können Sie die folgende Platzhalter-Grafik in den LANCOM laden.

    pixel.pngpixel.png


Hochladen der eigenen Webseiten:

Im WEBconfig unter Dateimanagement -> Zertifikat oder Datei hochladen können Sie die Public Spot - Seiten hochladen.




Verlinkung Ihrer Webseiten in der Konfiguration:

Nach erfolgreichem Upload muss in der Konfiguration ein Verweis auf die eigenen Seiten hinterlegt werden. Öffnen Sie über LANconfig die Konfiguration und fügen Sie unter Konfiguration -> Public-Spot -> Public-Spot -> Seiten-Tabelle jeweils folgende URLs ein:

BezeichungVerweis
Willkommenfile://pbspot_template_welcome
Anmeldungfile://pbspot_template_login
Fehlerfile://pbspot_template_error
Startfile://pbspot_template_start
Statusfile://pbspot_template_status
Abmeldungfile://pbspot_template_logoff
Hilfefile://pbspot_template_help
Voucherfile://pbspot_template_voucher
Proxyfile://pbspot_template_noproxy
Allgemeine
Geschäftsbedingungen
file://pbspot_template_agb
Registrierung (E-Mail)file://pbspot_template_reg_email
Anmeldung (E-Mail)file://pbspot_template_login_email
Registrierung (SMS)file://pbspot_template_reg_sms
Anmeldung (SMS)file://pbspot_template_login_sms
Rückfall Fehlerseitefile://pbspot_template_fallback




Nach erfolgreicher Einrichtung sowie Verlinkung werden Ihre Webseiten angezeigt.



Aufruf der Dateien über USB:

Vorbereitung des USB-Speichermediums:

So bereiten Sie ein USB-Medium für den Einsatz an einem LANCOM-Gerät vor:
  • Dateisystem: Formatieren Sie das USB-Medium mit FAT16 oder FAT32 Dateisystem.
  • Basisverzeichnis: Erstellen Sie auf dem USB-Medium ein Verzeichnis public_html. Der HTTP-Server von LCOS greift in der Default-Einstellung nur auf Dateien in diesem Verzeichnis und den evtl. vorhandenen Unterverzeichnissen (z.B. ein Unterverzeichnis mit dem Namen firmware) zu. Alle anderen Dateien auf dem USB-Medium werden ignoriert.
  • USB-Verbindung: Verbinden Sie das Massenspeichergerät mit dem USB-Anschluss des LANCOM-Gerätes.

Wenn die Template-Seite über einen USB-Stick angesprochen werden soll, muss die Referenzierung wie folgt aussehen:
http://127.0.0.1/filesrv/usb/Name.html



Soll auch das Bild des Templates über den USB-Stick in die HTML-Datei geladen werden, muss die Referenzierung im HTML wie folgt aussehen:

http://192.168.134.1/filesrv/usb/bild.jpeg



Sicherheitshinweis für das SSL-HTTPS Zertifikat:

Problem:

Die integrierte HTTPS-Seite ist mit einem SSL-Zertifikat ausgestattet, das Zertifikat ist auf http://www.lancom-systems.de als CN ausgestellt. Bei einem HTTPS-Zugriff auf den LANCOM gibt der Browser eine Sicherheitswarnung aus, da das SSL-Zertifikat nicht mit dem angesprochenen Namen oder der IP-Adresse übereinstimmt.

Lösung 1:

Auch hier können Sie unter Verwendung von WEBconfig ein eigenes SSL-Zertifikat nutzen und entsprechend hochladen. Dieses SSL-Zertifikat sollte dann von einer öffentlichen Zertifizierungsstelle, wie z.B. VeriSign, ausgestellt worden sein, da die Stamm-Zertifikate von öffentlichen Zertifizierungsstellen schon in vielen Web-Browsern hinterlegt sind.

Wählen Sie als Dateityp SSL-Zertifikat aus und und wählen Sie über Durchsuchen... unter Dateiname die Zertifikatsdatei aus:





Lösung 2:
In der Default-Einstellung wird die Public-Spot-Anmelde-Seite über HTTPS angeboten und angesprochen. Dies kann in der Konfiguration auf HTTP geändert werden, so dass nun keine Sicherheitswarnung im Browser erscheint, da kein SSL-Zertifikat übertragen und überprüft wird.
    Hinweis:
    Wird die Public-Spot-Anmelde-Seite über HTTP angesprochen, heißt dies, dass die Anmeldeinformation (Bernutzername und Passwort) unverschlüsselt übertragen werden.
Über das Einspielen des unten aufgeführten Skriptes können Sie den Zugriff auf Public Spot Anmeldeseite auf HTTP ändern.

set /Setup/Public-Spot-Module/Login-Page-Type HTTP

Zertifikat_HTTP.lcs

Das Script kann mit Hilfe von LANconfig hochgeladen werden. Markieren Sie hierzu das Gerät und wählen Sie im Kontextmenü (rechter Mausklick) in der Konfigurations-Verwaltung den Punkt Aus Skript-Datei wiederherstellen... aus.