Zum Inhalt

Neuer Hotspot - Fortinet

Im Folgenden wird beschrieben, wie Sie einen Fortinet-Router/Firewall vom Typ FortiGate 40f (FortiOS 7.4.6) konfigurieren und wie man diesen/diese mit unserer Hotspot-Lösung SyCes verbindet.

Hinweis: Dies ist eine frühe Version der SyCes2-Software. Zusätzliche Softwarefunktionen und Unterstützung für zusätzliche Hotspot-Router-Geräte werden derzeit entwickelt. Diese Seite dokumentiert den aktuellen Stand und Einsatzmöglichkeiten von Fortinet-Firewalls (FortiGate) für die Hotspot Solution SyCes.

Voraussetzungen

Um den Router zu konfigurieren, benötigen Sie Administratorzugriff darauf. Dieses Tutorial zeigt die Konfiguration über die GUI-Weboberfläche der Firewall. Diese Konfiguration könnte auch über die CLI erfolgen.

Für die Konfiguration benötigen Sie außerdem Informationen über die RADIUS-IP und das Geheimnis des neuen Systems. Diese Informationen können aus SyCes ausgelesen werden.

Um den Router für SyCes einzurichten, muss der Stadort, der diesen Router verwaltet, in der neuen Datenbank vorhanden sein. Für die Konfiguration werden die Mandant-ID und der für den Standort erstellte Token benötigt. Wenn Sie diese Werte auslesen möchten, benötigen Sie gültige Zugangsdaten für SyCes.

Navigieren Sie zur Standortseite des entsprechenden Mandanten und klicken Sie auf der Karte Angaben zum Standort auf den Kopieren Button neben dem Token im Feld Token. Der Link im URL-Feld sollte wie folgt aussehen: /login/<tenant_id>/<location_id>/.

Schritt 1: Die Netzwerkschnittstelle einrichten

Im Reiter Network / Interfaces ist zunächst ein Interface zu konfigurieren. Die dazugehörige Schnittstelle des Geräts sollte mit einem Wireless Access Point (WAP) ausgestattet sein, sodass sich nach der Konfiguration die Kundengeräte über die Schnittstelle verbinden können.

Hierzu ist das Interface so eingerichtet, dass beim Verbindungsaufbau das lokale Captive Portal aufgerufen wird. Der Zugriff auf das Interface ist auf eine User Group beschränkt, die die Anmeldeinformationen bei einem eingerichteten RADIUS-Server überprüft.

Besonders wichtig sind die Einstellungen Role: LAN, der DHCP Server, Security mode: Captive Portal, die User Groups sowie die Excluded destinations/services: FQDN-backend.syces.de. Es ist nicht erforderlich, ein Kästchen unter Administrative Access zu aktivieren. RADIUS Accounting wird im RADIUS Server Eintrag in Schritt 2 eingerichtet. Eine User Group kann erst nach dem Erstellen zugewiesen werden (siehe Schritt 3). Daher ist nach Schritt 3 eine Aktualisierung der Interface-Einstellungen erforderlich.

Die finalen Einstellungen sind in den folgenden Bildern zu sehen:

Image - Netzwerk Interface 1

Image - Netzwerk Interface 2

Schritt 2: Den RADIUS-Server einrichten

Unter dem Reiter User & Authentication / RADIUS Servers wird der RADIUS Server auf den SyCes2-Webserver eingestellt.

Hierzu müssen die RADIUS IP und das RADIUS Secret angegeben werden. Diese Informationen können unter SyCes gefunden werden.

Nach Eingabe der Werte in die entsprechenden Felder (Primary Server > IP/Name und Secret) kann ein Konnektivitätstest durchgeführt werden, um die Verbindung zu validieren.

Image - Fortinet RADIUS Server

Um den zeit- oder volumenbegrenzten Accountzugriff von SyCes nutzen zu können, kann es erforderlich sein, manuell eine RADIUS Accounting-Konfiguration einzurichten. Dazu können Sie den soeben erstellten RADIUS Server Eintrag in der Fortinet-GUI öffnen. In der Ansicht Edit RADIUS Server können Sie auf der rechten Seite auf die Schaltfläche Edit in CLI klicken.

In den Einstellungen des konfigurierten RADIUS-Servers müssen folgende Variablen gesetzt werden:

config accounting-server
    edit 1
        set status enable
        set server "<RADIUS_IP>"
        set secret ENC <hashed_secret>
    next
end

Sie können die RADIUS IP und das Hashed Secret aus den vorherigen RADIUS Server-Einstellungen kopieren. Eine funktionierende RADIUS Accounting-Konfiguration ist hier zu sehen:

Image - Fortinet RADIUS Server Accounting

Schritt 3: Die Benutzergruppe einrichten

Unter dem Reiter User & Authentication / User Groups wird eine neue Gruppe angelegt, die dem RADIUS-Server als Remote Groups zugewiesen wird, wie in der Abbildung gezeigt.

Image - Fortinet User Groups

Schritt 4: Das lokale Captive-Portal anpassen (optional)

Im Reiter System / Replacement Messages wird das lokale Captive-Portal angepasst. Hierzu klickt mann doppelt auf den Eintrag Login Page um ein Fenster mit der HTML Datei zu öffnen.

Image - Fortinet Replacement Messages 1

Die Anmeldeseite wird auf der linken Seite des neuen Fensters angezeigt. Um diese Seite anzupassen, können Sie den Code auf der rechten Seite bearbeiten. Die Anmeldeseite auf der linken Seite sollte entsprechend aktualisiert werden.

Als Beispiel für eine Anpassung finden Sie hier eine Seite, die die anonyme Anmeldefunktion von SyCes2 zusammen mit einem Anmeldeframework für bereits vorhandene Account verwendet:

Image - Fortinet Replacement Messages 2

Auch andere Seiten des Captive-Portals und die Logos können in diesem Tab angepasst werden. In den folgenden Abschnitten finden Sie Beispiele für benutzerdefinierte Anmeldeseiten und eine „Anmeldung fehlgeschlagen“-Seite mit einem Link zurück zur Anmeldeseite.

Anmeldeseite

Nachfolgend finden Sie den Website-Code für die oben gezeigte angepasste Anmeldeseite. Dort finden Sie auch den Code für Seiten, die nur die Funktion Anonym oder Login nutzen. Anmeldeseiten auf Englisch finden Sie unter New Hotspot - Fortinet

Dieser Code kann für die Funktionalität kopiert werden; folgende Felder müssen jedoch noch ersetzt werden:

  • <tenant_id> (Ersetzen Sie dies durch Ihre Mandanten-ID in SyCes)
  • <location_identification_token> (Ersetzen Sie dies durch den Token des konfigurierten Standorts in SyCes mit Routertyp Fortinet. Dies ist für die Anonym Funktion erforderlich)
  • const tenant_domain = ""; (Variable setzen, um das automatische Anhängen der Mandanten-Domäne an den Benutzernamen vor der Anmeldung zu ermöglichen. Dadurch wird die Anmeldung mit "Accountname" anstelle von "Accountname@Mandantendomäne" ermöglicht. Die Domäne kann von der Mandantenseite in [SyCes] (https://frontend.syces.de/) kopiert werden.)
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        height: 100%;
        font-family: Helvetica, Arial, sans-serif;
        color: #6a6a6a;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
        color: #262626;
        vertical-align: baseline;
        margin: .2em;
        border-style: solid;
        border-width: 1px;
        border-color: #a9a9a9;
        background-color: #fff;
        box-sizing: border-box;
        padding: 2px .5em;
        appearance: none;
        border-radius: 0;
      }
      input:focus {
        border-color: #646464;
        box-shadow: 0 0 1px 0 #a2a2a2;
        outline: 0;
      }
      button {
        padding: .5em 1em;
        border: 1px solid;
        border-radius: 3px;
        min-width: 6em;
        font-weight: 400;
        font-size: .8em;
        cursor: pointer;
      }
      button.primary {
        color: #fff;
        background-color: #4698CB;
        border-color: #4698CB;
      }
      button.primary:hover {
        color: #fff;
        background-color: #005587;
        border-color: #005587;
      }
      button.primary:disabled{
        cursor:default;
        background-color: #E0E0E0;
        border-color: #E0E0E0;
      }
      .message-container {
        height: 500px;
        width: 500px;
        padding: 0;
        margin: 10px;
      }
      .logo {
        background: url(%%IMAGE:logo_v3_fguard_app%%) no-repeat left center;
        height: 267px;
        object-fit: contain;
      }
      .field {
        display: table-row;
      }
      .field > :first-child {
        display: table-cell;
        width: 20%;
      }
      .field.single > :first-child {
        display: inline;
      }
      .field > :not(:first-child) {
        width: auto;
        max-width: 100%;
        display: inline-flex;
        align-items: baseline;
        vertical-align: top;
        box-sizing: border-box;
        margin: .3em;
      }
      .field > :not(:first-child) > input {
        width: 230px;
      }
      .form-footer {
        display: inline-flex;
        justify-content: flex-start;
      }
      .form-footer > * {
        margin: 1em;
      }
      .text-scrollable {
        overflow: auto;
        height: 150px;
        border: 1px solid rgb(200, 200, 200);
        padding: 5px;
        font-size: 1em;
      }
      .text-centered {
        text-align: center;
      }
      .text-container {
        margin: 1em 1.5em;
      }
      .flex-container {
        display: flex;
      }
      .flex-container.column {
        flex-direction: column;
      }
    </style>
    <title>
      SyCes ® - Hotspot
    </title>
  </head>
  <body>
    <div class="message-container">
      <div class="logo"></div>
      <h1>
        Anonym registrieren
      </h1>
      <form id="anon_login" >
        <div>
          <input type="checkbox" name="tos" id="tos_check_reg" onclick="handleTOSClick(this)">
          Ich akzeptiere die <a href="https://backend.syces.de/login/<tenant_id>/tos/">Geschäftsbedingungen</a>
        </div>
        <div class="form-footer">
          <button class="primary" type="submit" id="submit_btn_reg" disabled>
            Absenden
          </button>
        </div>
      </form>
      <form
        id="default_login"
        action="%%AUTH_POST_URL%%"
        method="post"
      >
        <input type="hidden" name="%%REDIRID%%" value="%%PROTURI%%">
        <input type="hidden" name="%%MAGICID%%" value="%%MAGICVAL%%">
        <input type="hidden" name="%%METHODID%%" value="%%METHODVAL%%">
        <h1>
          Login
        </h1>
        <div class="field">
          <label for="ft_un">
            Benutzername
          </label>
          <div>
            <input name="%%USERNAMEID%%" id="ft_un" type="text" autocorrect="off" autocapitalize="off">
          </div>
        </div>
        <div class="field">
          <label for="ft_pd">
            Passwort
          </label>
          <div>
            <input name="%%PASSWORDID%%" id="ft_pd" type="password" autocomplete="off">
          </div>
        </div>
        <div>
          <input type="checkbox" name="tos" id="tos_check_login" onclick="handleTOSClick(this)">
          Ich akzeptiere die <a href="https://backend.syces.de/login/<tenant_id>/tos/">Geschäftsbedingungen</a>
        </div>
        <div class="form-footer">
          <button class="primary" type="submit" id="submit_btn_login" disabled>
            Absenden
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    const url = "https://backend.syces.de/login/token_login/<location_identification_token>/"

    const anon_form = document.getElementById("anon_login");
    const default_form = document.getElementById("default_login");

    const tos_checkbox_reg = document.getElementById("tos_check_reg");
    const tos_checkbox_login = document.getElementById("tos_check_login");
    const submit_button_reg = document.getElementById("submit_btn_reg");
    const submit_button_login = document.getElementById("submit_btn_login");

    function handleTOSClick(cb) {
      if (cb.checked === true) {
        tos_checkbox_reg.checked = true;
        tos_checkbox_login.checked = true;
        submit_button_reg.disabled = false;
        submit_button_login.disabled = false;
      } else {
        tos_checkbox_reg.checked = false;
        tos_checkbox_login.checked = false;
        submit_button_reg.disabled = true;
        submit_button_login.disabled = true;
      }
    }

    function sendRequest() {
      fetch(url)
      .then(response => response.json())
      .then(data => {
        let field_username = document.getElementById("ft_un");
        let field_password = document.getElementById("ft_pd");
        field_username.value = data.login_name;
        field_password.value = data.password;
        default_form.submit();
      })
      .catch(error => console.error(error));
    }

    function appendDomainIfMissing() {
      const tenant_domain = "";
      let form_input_user = document.getElementById("ft_un");
      let username = form_input_user.value;

      if (tenant_domain!== "" && !username.includes("@") && !username.endsWith("@" + tenant_domain)) {
        form_input_user.value = username + "@" + tenant_domain;
      }
    }

    anon_form.addEventListener('submit', function(e) {
      e.preventDefault();
      sendRequest();
    })

    default_form.addEventListener('submit', function(e) {
      appendDomainIfMissing();
    })
  </script>
</html>

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        height: 100%;
        font-family: Helvetica, Arial, sans-serif;
        color: #6a6a6a;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
        color: #262626;
        vertical-align: baseline;
        margin: .2em;
        border-style: solid;
        border-width: 1px;
        border-color: #a9a9a9;
        background-color: #fff;
        box-sizing: border-box;
        padding: 2px .5em;
        appearance: none;
        border-radius: 0;
      }
      input:focus {
        border-color: #646464;
        box-shadow: 0 0 1px 0 #a2a2a2;
        outline: 0;
      }
      button {
        padding: .5em 1em;
        border: 1px solid;
        border-radius: 3px;
        min-width: 6em;
        font-weight: 400;
        font-size: .8em;
        cursor: pointer;
      }
      button.primary {
        color: #fff;
        background-color: #4698CB;
        border-color: #4698CB;
      }
      button.primary:hover {
        color: #fff;
        background-color: #005587;
        border-color: #005587;
      }
      button.primary:disabled{
        cursor:default;
        background-color: #E0E0E0;
        border-color: #E0E0E0;
      }
      .message-container {
        height: 500px;
        width: 500px;
        padding: 0;
        margin: 10px;
      }
      .logo {
        background: url(%%IMAGE:logo_v3_fguard_app%%) no-repeat left center;
        height: 267px;
        object-fit: contain;
      }
      .field {
        display: table-row;
      }
      .field > :first-child {
        display: table-cell;
        width: 20%;
      }
      .field.single > :first-child {
        display: inline;
      }
      .field > :not(:first-child) {
        width: auto;
        max-width: 100%;
        display: inline-flex;
        align-items: baseline;
        vertical-align: top;
        box-sizing: border-box;
        margin: .3em;
      }
      .field > :not(:first-child) > input {
        width: 230px;
      }
      .form-footer {
        display: inline-flex;
        justify-content: flex-start;
      }
      .form-footer > * {
        margin: 1em;
      }
      .text-scrollable {
        overflow: auto;
        height: 150px;
        border: 1px solid rgb(200, 200, 200);
        padding: 5px;
        font-size: 1em;
      }
      .text-centered {
        text-align: center;
      }
      .text-container {
        margin: 1em 1.5em;
      }
      .flex-container {
        display: flex;
      }
      .flex-container.column {
        flex-direction: column;
      }
    </style>
    <title>
      SyCes ® - Hotspot
    </title>
  </head>
  <body>
    <div class="message-container">
      <div class="logo"></div>
      <form
        id="default_login"
        action="%%AUTH_POST_URL%%"
        method="post"
      >
        <input type="hidden" name="%%REDIRID%%" value="%%PROTURI%%">
        <input type="hidden" name="%%MAGICID%%" value="%%MAGICVAL%%">
        <input type="hidden" name="%%METHODID%%" value="%%METHODVAL%%">
        <h1>
          Login
        </h1>
        <div class="field">
          <label for="ft_un">
            Benutzername
          </label>
          <div>
            <input name="%%USERNAMEID%%" id="ft_un" type="text" autocorrect="off" autocapitalize="off">
          </div>
        </div>
        <div class="field">
          <label for="ft_pd">
            Passwort
          </label>
          <div>
            <input name="%%PASSWORDID%%" id="ft_pd" type="password" autocomplete="off">
          </div>
        </div>
        <div>
          <input type="checkbox" name="tos" id="tos_check_login" onclick="handleTOSClick(this)">
          Ich akzeptiere die <a href="https://backend.syces.de/login/<tenant_id>/tos/">Geschäftsbedingungen</a>
        </div>
        <div class="form-footer">
          <button class="primary" type="submit" id="submit_btn_login" disabled>
            Absenden
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    const default_form = document.getElementById("default_login");

    const tos_checkbox_login = document.getElementById("tos_check_login");
    const submit_button_login = document.getElementById("submit_btn_login");

    function handleTOSClick(cb) {
      if (cb.checked === true) {
        tos_checkbox_login.checked = true;
        submit_button_login.disabled = false;
      } else {
        tos_checkbox_login.checked = false;
        submit_button_login.disabled = true;
      }
    }

    function appendDomainIfMissing() {
      const tenant_domain = "";
      let form_input_user = document.getElementById("ft_un");
      let username = form_input_user.value;

      if (tenant_domain!== "" && !username.includes("@") && !username.endsWith("@" + tenant_domain)) {
        form_input_user.value = username + "@" + tenant_domain;
      }
    }

    default_form.addEventListener('submit', function(e) {
      appendDomainIfMissing();
    })
  </script>
</html>

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        height: 100%;
        font-family: Helvetica, Arial, sans-serif;
        color: #6a6a6a;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
        color: #262626;
        vertical-align: baseline;
        margin: .2em;
        border-style: solid;
        border-width: 1px;
        border-color: #a9a9a9;
        background-color: #fff;
        box-sizing: border-box;
        padding: 2px .5em;
        appearance: none;
        border-radius: 0;
      }
      input:focus {
        border-color: #646464;
        box-shadow: 0 0 1px 0 #a2a2a2;
        outline: 0;
      }
      button {
        padding: .5em 1em;
        border: 1px solid;
        border-radius: 3px;
        min-width: 6em;
        font-weight: 400;
        font-size: .8em;
        cursor: pointer;
      }
      button.primary {
        color: #fff;
        background-color: #4698CB;
        border-color: #4698CB;
      }
      button.primary:hover {
        color: #fff;
        background-color: #005587;
        border-color: #005587;
      }
      button.primary:disabled{
        cursor:default;
        background-color: #E0E0E0;
        border-color: #E0E0E0;
      }
      .message-container {
        height: 500px;
        width: 500px;
        padding: 0;
        margin: 10px;
      }
      .logo {
        background: url(%%IMAGE:logo_v3_fguard_app%%) no-repeat left center;
        height: 267px;
        object-fit: contain;
      }
      .field {
        display: table-row;
      }
      .field > :first-child {
        display: table-cell;
        width: 20%;
      }
      .field.single > :first-child {
        display: inline;
      }
      .field > :not(:first-child) {
        width: auto;
        max-width: 100%;
        display: inline-flex;
        align-items: baseline;
        vertical-align: top;
        box-sizing: border-box;
        margin: .3em;
      }
      .field > :not(:first-child) > input {
        width: 230px;
      }
      .form-footer {
        display: inline-flex;
        justify-content: flex-start;
      }
      .form-footer > * {
        margin: 1em;
      }
      .text-scrollable {
        overflow: auto;
        height: 150px;
        border: 1px solid rgb(200, 200, 200);
        padding: 5px;
        font-size: 1em;
      }
      .text-centered {
        text-align: center;
      }
      .text-container {
        margin: 1em 1.5em;
      }
      .flex-container {
        display: flex;
      }
      .flex-container.column {
        flex-direction: column;
      }
    </style>
    <title>
      SyCes ® - Hotspot
    </title>
  </head>
  <body>
    <div class="message-container">
      <div class="logo"></div>
      <h1>
        Anonym registrieren
      </h1>
      <form id="anon_login" >
        <div>
          <input type="checkbox" name="tos" id="tos_check_reg" onclick="handleTOSClick(this)">
          Ich akzeptiere die <a href="https://backend.syces.de/login/<tenant_id>/tos/">Geschäftsbedingungen</a>
        </div>
        <div class="form-footer">
          <button class="primary" type="submit" id="submit_btn_reg" disabled>
            Absenden
          </button>
        </div>
      </form>
      <form
        id="default_login"
        action="%%AUTH_POST_URL%%"
        method="post"
        style="display:none"
      >
        <input type="hidden" name="%%REDIRID%%" value="%%PROTURI%%">
        <input type="hidden" name="%%MAGICID%%" value="%%MAGICVAL%%">
        <input type="hidden" name="%%METHODID%%" value="%%METHODVAL%%">
        <h1>
          Login
        </h1>
        <div class="field">
          <label for="ft_un">
            Benutzername
          </label>
          <div>
            <input name="%%USERNAMEID%%" id="ft_un" type="text" autocorrect="off" autocapitalize="off">
          </div>
        </div>
        <div class="field">
          <label for="ft_pd">
            Passwort
          </label>
          <div>
            <input name="%%PASSWORDID%%" id="ft_pd" type="password" autocomplete="off">
          </div>
        </div>
        <div>
          <input type="checkbox" name="tos" id="tos_check_login" onclick="handleTOSClick(this)">
        </div>
        <div class="form-footer">
          <button class="primary" type="submit" id="submit_btn_login" disabled>
            Absenden
          </button>
        </div>
      </form>
    </div>
  </body>
  <script>
    const url = "https://backend.syces.de/login/token_login/<location_identification_token>/"

    const anon_form = document.getElementById("anon_login");
    const default_form = document.getElementById("default_login");

    const tos_checkbox_reg = document.getElementById("tos_check_reg");
    const tos_checkbox_login = document.getElementById("tos_check_login");
    const submit_button_reg = document.getElementById("submit_btn_reg");
    const submit_button_login = document.getElementById("submit_btn_login");

    function handleTOSClick(cb) {
      if (cb.checked === true) {
        tos_checkbox_reg.checked = true;
        tos_checkbox_login.checked = true;
        submit_button_reg.disabled = false;
        submit_button_login.disabled = false;
      } else {
        tos_checkbox_reg.checked = false;
        tos_checkbox_login.checked = false;
        submit_button_reg.disabled = true;
        submit_button_login.disabled = true;
      }
    }

    function sendRequest() {
      fetch(url)
      .then(response => response.json())
      .then(data => {
        let field_username = document.getElementById("ft_un");
        let field_password = document.getElementById("ft_pd");
        field_username.value = data.login_name;
        field_password.value = data.password;
        default_form.submit();
        }
      )
      .catch(error => console.error(error));
    }

    anon_form.addEventListener('submit', function(e) {
      e.preventDefault();
      sendRequest();
    })
  </script>
</html>

„Anmeldung fehlgeschlagen“-Seite

Die „Anmeldung fehlgeschlagen“-Seite wird aufgerufen, wenn ein Authentifizierungsversuch der Anmeldeseite fehlschlägt. Für ein positives Benutzererlebnis sollte diese Seite entweder einen Link zurück zur Anmeldeseite oder eine andere Möglichkeit zur Anmeldung enthalten.

Daher empfehlen wir, den gleichen Code für beide Seiten oder eine Seite mit einem Weiterleitungslink zu kopieren, wie unten gezeigt.

Wenn Sie die automatische Weiterleitung mit dem folgenden Code aktivieren möchten, können Sie die Variable const seconds_to_redirect = 0; auf einen gewünschten Wert setzen. Für die Verzögerung empfehlen wir 5 - 10 Sekunden.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        height: 100%;
        font-family: Helvetica, Arial, sans-serif;
        color: #6a6a6a;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .message-container {
        height: 500px;
        width: 500px;
        padding: 0;
        margin: 10px;
      }
      .logo {
        background: url(%%IMAGE:logo_v3_fguard_app%%) no-repeat left center;
        height: 267px;
        object-fit: contain;
      }
      .text-scrollable {
        overflow: auto;
        height: 150px;
        border: 1px solid rgb(200, 200, 200);
        padding: 5px;
        font-size: 1em;
      }
      .text-centered {
        text-align: center;
      }
      .text-container {
        margin: 1em 1.5em;
      }
      .flex-container {
        display: flex;
      }
      .flex-container.column {
        flex-direction: column;
      }
    </style>
    <title>
      SyCes ® - Hotspotanmeldung fehlgeschlagen
    </title>
  </head>
  <body>
    <div class="message-container">
      <div class="logo">
      </div>
      <h1>
        Authentifizierung fehlgeschlagen
      </h1>
      <p>
        Die Benutzerauthentifizierung ist fehlgeschlagen. Bitte kehren Sie zur <a href="%%PROTURI%%">Anmeldeseite</a> zurück und versuchen Sie es erneut.
      </p>
    </div>
  </body>
  <script>
    const seconds_to_redirect = 0;
    if (seconds_to_redirect > 0) {
      window.setTimeout(function(){
          window.location.href = "%%PROTURI%%";
        }, seconds_to_redirect*1000
      );
    }
  </script>
</html>

Schritt 5: Loginversuch

Nachdem Sie eine Fortinet-Firewall mit diesen Einstellungen eingerichtet haben, sollte beim Verbinden eines Geräts mit dem WLAN der konfigurierten Schnittstelle das angepasste Captive-Portal geöffnet werden.

Wenn Sie auf den Absenden-Knopf der Anonym Funktion klicken, wird der SyCes-Webserver aufgefordert, ein Account zu erstellen, dessen Anmeldeinformationen an die Website zurückgesendet werden, damit diese versuchen kann, das Gerät mit den zurückgegebenen Anmeldeinformationen anzumelden.

Problembehebung

Sollten bei der Konfiguration Ihres Routers Probleme oder unerwartetes Verhalten auftreten, kontaktieren Sie uns bitte über tsp-ms-dev@concat.de.