Zum Inhalt

Neuer Hotspot - Aruba Controller

Im Folgenden wird beschrieben, wie Sie einen Aruba Controller (OS 8.10) konfigurieren und mit unserer Hotspot-Lösung SyCes verbinden.

Hinweis: Dies ist eine frühe Version der SyCes2-Software. Weitere Softwarefunktionen und die Unterstützung weiterer Hotspot-Router-Geräte werden derzeit entwickelt. Diese Seite dokumentiert den aktuellen Status und die Einsatzmöglichkeiten von Aruba Controllern für die Hotspot-Lösung SyCes.

Voraussetzungen

Um den Router zu konfigurieren, benötigen Sie Administratorzugriff. Dieses Tutorial zeigt die Konfiguration über die GUI-Weboberfläche. Alternativ kann die Konfiguration auch über die CLI erfolgen.

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

Um den Router für SyCes einzurichten, muss der Standort, der diesen Router verwaltet, in der neuen Datenbank vorhanden sein. Für die Konfiguration werden die Mandanten-ID und der für den Standort erstellte Token benötigt. Zum Auslesen dieser Werte 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 neben dem Token im Feld Token auf die Kopieren-Schaltfläche.

Schritt 1: Netzwerk einrichten und Softwareversion prüfen

Bevor Sie fortfahren, stellen Sie sicher, dass der Aruba Controller und mindestens ein angeschlossener Access Point ordnungsgemäß im Netzwerk eingerichtet sind. Der Aruba Controller sollte über ein konfiguriertes VMGateway erreichbar sein.

Hinweis: Dieses Tutorial behandelt nicht die grundlegende Netzwerkeinrichtung. Wenden Sie sich bitte an das Netzwerkteam, um sicherzustellen, dass die erforderliche Infrastruktur vorhanden ist und ordnungsgemäß funktioniert.

Sobald das Netzwerk bereit ist, prüfen Sie die Softwareversion des VMGateways. Navigieren Sie zu:

Maintenance > Software Management

Diese Anleitung basiert auf ArubaOS Version 8.10.0.13. Wenn Sie eine andere Version verwenden, beachten Sie, dass die Konfigurationsschritte oder das GUI-Layout leicht abweichen können. Wir empfehlen ein Update auf die neueste stabile Version, um die Kompatibilität mit den hier bereitgestellten Anweisungen sicherzustellen.

Image - Aruba Controller Version

Schritt 2: RADIUS-Server und Servergruppe einrichten

In diesem Schritt konfigurieren Sie den RADIUS-Server und weisen ihn zur Authentifizierung einer Servergruppe zu.

Für diese Konfiguration benötigen Sie die RADIUS-IP und das RADIUS-Secret. Beide finden Sie bei SyCes.

Navigieren Sie zum Reiter Configuration > Authentication.

Den RADIUS-Server hinzufügen

  1. Klicken Sie unter All Servers auf das Symbol ➕, um einen neuen Servereintrag zu erstellen.
  2. Geben Sie einen aussagekräftigen Namen ein.
  3. Wählen Sie als Type RADIUS aus.
  4. Geben Sie die RADIUS-IP des SyCes2-Servers ein. Image - Aruba Add RADIUS Server

Nachdem Sie den Eintrag erstellt haben:

  1. Wählen Sie ihn in der Liste All Servers aus.
  2. Geben Sie das RADIUS-Secret in die Felder Shared key und Retype key ein. Image - Aruba Edit RADIUS Server

Servergruppe erstellen und zuweisen

  1. Suchen Sie im Reiter Authentication den Bereich Server groups.
  2. Klicken Sie auf das Symbol ➕, um eine neue Servergruppe zu erstellen und ihr einen aussagekräftigen Namen zu geben. Image - Aruba Create Server Group
  3. Wählen Sie die neu erstellte Gruppe aus der Liste Server Groups aus.
  4. Klicken Sie auf das untere Symbol ➕, wählen Sie Add existing server und wählen Sie den zuvor konfigurierten RADIUS-Server aus. Image - Aruba Add Server Group

Schritt 3: WLAN einrichten

In diesem Schritt erstellen und konfigurieren Sie ein neues WLAN für den Gastzugriff über eine benutzerdefinierte Seite im lokalen Captive Portal des Aruba Controllers.

Beispiel-HTML-Code für verschiedene benutzerdefinierte Anmeldeseiten finden Sie am Ende dieses Schritts.

Neues WLAN erstellen

  1. Navigieren Sie zu Configuration > WLANs.
  2. Klicken Sie auf ➕, um ein neues WLAN zu erstellen.

Image - Aruba WLAN

Allgemeine Einstellungen

Im Reiter General: - Geben Sie einen aussagekräftigen Namen für das WLAN ein. - Legen Sie Primary Usage auf Guest fest. - Wählen Sie unter Broadcast on: den/die Access Point(s) aus, an dem/denen das WLAN verfügbar sein soll.

Image - Aruba New WLAN 1

VLAN-Zuweisung

Weisen Sie im Reiter VLANs das WLAN dem Ziel-VLAN für Ihr Gastnetzwerk zu.

Image - Aruba New WLAN 2

Security & Captive Portal

Im Reiter Security: 1. Wählen Sie Internal Captive Portal with authentication. 2. Wählen Sie Custom HTML als Anmeldeseitentyp. 3. Laden Sie Ihre HTML-Datei über die Schaltfläche Browse hoch.

Beispiel-HTML-Code für benutzerdefinierte Anmeldeseiten finden Sie weiter unten im Abschnitt Benutzerdefinierte Anmeldeseite.

Image - Aruba New WLAN 3 Internal

Benutzerdefinierte Anmeldeseite

Nachfolgend finden Sie Beispielvorlagen für benutzerdefinierte Captive-Portal-Seiten. Anmeldeseiten in englischer Sprache finden Sie unter New Hotspot - Aruba Controller.

Dieser Code kann zur Gewährleistung der Funktionalität kopiert werden. Folgende Felder müssen jedoch noch ersetzt werden:

  • <tenant_id> (Ersetzen Sie dies durch die ID Ihres Mandanten in SyCes.)
  • <location_identification_token> (Ersetzen Sie dies durch das Token des konfigurierten Standorts in SyCes mit dem Routertyp Aruba Controller. Dies ist für die Funktion Anonym registrieren erforderlich)
  • const tenant_domain = ""; (Legen Sie die Variable fest, um die automatische Anfügung der Mandantendomäne an den Benutzernamen vor der Anmeldung zu aktivieren. Dadurch wird die Anmeldung mit "account_name" anstelle von "account_name@tenant_domain" aktiviert. Die Domäne kann von der Mandantenseite in SyCes kopiert werden.)
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>SyCes® - Hotspot</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://backend.syces.de/static/login/css/styles.css">
  </head>
  <body>
    <div class="left">
      <img
        src="https://backend.syces.de/static/login/img/logo2.png"
        alt="SyCes-Logo"
        width="500"
        height="139"
        class="img"
      />
    </div>
    <div class="center block"></div>
    <p></p>
    <div class="center window">
      <h1>Benutzer-Login</h1>
      <form id="default_login" action="/cgi-bin/login" method="post">
        <input name="email" type="hidden" value="" />
        <input name="cmd" type="hidden" value="authenticate" />
        <table>
          <tr>
            <td><label for="ar_un">Benutzername:</label></td>
            <td><input name="user" type="text" id="ar_un" /></td>
          </tr>
          <tr>
            <td><label for="ar_pd">Passwort:</label></td>
            <td><input name="password" type="password" id="ar_pd" /></td>
          </tr>
          <tr>
            <td>
              <label for="tos_check_login"
              >Ich akzeptiere die
              <a href="https://backend.syces.de/login/<tenant_id>/tos/"
                >Geschäftsbedingungen</a
              >:</label
              >
            </td>
            <td>
              <label class="checkbox">
                <input
                  type="checkbox"
                  name="tos"
                  id="tos_check_login"
                  onclick="handleTOSClick(this)"
                />
                <span class="checkmark"></span>
              </label>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button
                class="primary"
                type="submit"
                id="submit_btn_login"
                disabled
              >
              Absenden
              </button>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <p></p>
    <div class="center window">
      <h1>Anonym registrieren</h1>
      <form id="anon_login">
        <table>
          <tr>
            <td>
              <label for="tos_check_reg">
              Ich akzeptiere die
              <a href="https://backend.syces.de/login/<tenant_id>/tos/"
                >Geschäftsbedingungen</a
              >:
              </label>
            </td>
            <td>
              <label class="checkbox">
              <input
                type="checkbox"
                name="tos"
                id="tos_check_reg"
                onclick="handleTOSClick(this)"
              />
              <span class="checkmark"></span>
              </label>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button
                class="primary"
                type="submit"
                id="submit_btn_reg"
                disabled
              >
              Absenden
              </button>
            </td>
          </tr>
        </table>
      </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("ar_un");
        let field_password = document.getElementById("ar_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("ar_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>
    <title>SyCes® - Hotspot</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://backend.syces.de/static/login/css/styles.css">
  </head>
  <body>
    <div class="left">
      <img
        src="https://backend.syces.de/static/login/img/logo2.png"
        alt="SyCes-Logo"
        width="500"
        height="139"
        class="img"
      />
    </div>
    <div class="center block"></div>
    <p></p>
    <div class="center window">
      <h1>Benutzer-Login</h1>
      <form id="default_login" action="/cgi-bin/login" method="post">
        <input name="email" type="hidden" value="" />
        <input name="cmd" type="hidden" value="authenticate" />
        <table>
          <tr>
            <td><label for="ar_un">Benutzername:</label></td>
            <td><input name="user" type="text" id="ar_un" /></td>
          </tr>
          <tr>
            <td><label for="ar_pd">Passwort:</label></td>
            <td><input name="password" type="password" id="ar_pd" /></td>
          </tr>
          <tr>
            <td>
              <label for="tos_check_login"
              >Ich akzeptiere die
              <a href="https://backend.syces.de/login/<tenant_id>/tos/"
                >Geschäftsbedingungen</a
              >:</label
              >
            </td>
            <td>
              <label class="checkbox">
                <input
                  type="checkbox"
                  name="tos"
                  id="tos_check_login"
                  onclick="handleTOSClick(this)"
                />
                <span class="checkmark"></span>
              </label>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button
                class="primary"
                type="submit"
                id="submit_btn_login"
                disabled
              >
              Absenden
              </button>
            </td>
          </tr>
        </table>
      </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("ar_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>
    <title>SyCes® - Hotspot</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://backend.syces.de/static/login/css/styles.css">
  </head>
  <body>
    <div class="left">
      <img
        src="https://backend.syces.de/static/login/img/logo2.png"
        alt="SyCes-Logo"
        width="500"
        height="139"
        class="img"
      />
    </div>
    <div class="center block"></div>
    <p></p>
    <div class="center window" style="display:none">
      <h1>Benutzer-Login</h1>
      <form
        id="default_login"
        action="/cgi-bin/login"
        method="post"
        style="display:none"
      >
        <input name="email" type="hidden" value="" />
        <input name="cmd" type="hidden" value="authenticate" />
        <table>
          <tr>
            <td><label for="ar_un">Benutzername:</label></td>
            <td><input name="user" type="text" id="ar_un" /></td>
          </tr>
          <tr>
            <td><label for="ar_pd">Passwort:</label></td>
            <td><input name="password" type="password" id="ar_pd" /></td>
          </tr>
          <tr>
            <td>
              <label for="tos_check_login"
              >Ich akzeptiere die
              <a href="https://backend.syces.de/login/<tenant_id>/tos/"
                >Geschäftsbedingungen</a
              >:</label
              >
            </td>
            <td>
              <label class="checkbox">
                <input
                  type="checkbox"
                  name="tos"
                  id="tos_check_login"
                  onclick="handleTOSClick(this)"
                />
                <span class="checkmark"></span>
              </label>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button
                class="primary"
                type="submit"
                id="submit_btn_login"
                disabled
              >
              Absenden
              </button>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <p></p>
    <div class="center window">
      <h1>Anonym registrieren</h1>
      <form id="anon_login">
        <table>
          <tr>
            <td>
              <label for="tos_check_reg">
              Ich akzeptiere die
              <a href="https://backend.syces.de/login/<tenant_id>/tos/"
                >Geschäftsbedingungen</a
              >:
              </label>
            </td>
            <td>
              <label class="checkbox">
              <input
                type="checkbox"
                name="tos"
                id="tos_check_reg"
                onclick="handleTOSClick(this)"
              />
              <span class="checkmark"></span>
              </label>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button
                class="primary"
                type="submit"
                id="submit_btn_reg"
                disabled
              >
              Absenden
              </button>
            </td>
          </tr>
        </table>
      </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("ar_un");
        let field_password = document.getElementById("ar_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>

Schritt 4: Zieldomäne für Backend zulassen

Damit die benutzerdefinierten HTML-Anmeldeseiten (aus dem vorherigen Schritt) mit dem SyCes2-Backend kommunizieren können, müssen Sie die Backend-Domäne über den Aruba Controller zulassen.

Netzwerkalias erstellen

  1. Navigieren Sie zu Roles & Policies > Aliases.
  2. Klicken Sie auf das Symbol ➕, um einen neuen Netzwerkalias zu erstellen.

Image - Aruba Network Alias

Alias konfigurieren

  1. Geben Sie dem Alias einen aussagekräftigen Namen (z.B. SyCes2Backend).
  2. Klicken Sie im neu geöffneten Bereich auf das Symbol ➕, um ein Ziel (Destination) hinzuzufügen.

Backend-Domäne hinzufügen

Im Fenster Add New Destination:

  1. Legen Sie den Rule type: fest: Name.
  2. Geben Sie die Domäne des Backend-Servers ein: 
    backend.syces.de

Und speichern Sie die Konfiguration.

Image - Aruba Network Alias add URL

Schritt 5: Einstellungen den Authentifizierungsprofilen zuweisen

In diesem Schritt verknüpfen Sie die zuvor erstellte RADIUS-Servergruppe und den Netzwerkalias mit den von Ihrem WLAN verwendeten Authentifizierungsprofilen. Dadurch wird Folgendes sichergestellt:

  • RADIUS-Authentifizierungsanfragen werden an die richtige Servergruppe gesendet.
  • Die SyCes2-Backend-Domäne ist in der Zulassungsliste des Captive Portals enthalten.

AAA-Profil konfigurieren

  1. Navigieren Sie zu Authentification > AAA Profile.
  2. Öffnen Sie das Ihrem WLAN zugewiesene AAA Profile (erstellt in Schritt 3).
  3. Wählen Sie im Feld RADIUS Accounting Server Group die zuvor erstellte Servergruppe aus.

Image - Authentication AAA Profile

Captive-Portal-Authentifizierung konfigurieren

  1. Navigieren Sie zu Authentication > L3 Authentication.
  2. Öffnen Sie das Ihrem WLAN zugewiesene Captive Portal Authentication Profil. Image - L3 Authentication
  3. Scrollen Sie nach unten zum Abschnitt Allow List.
  4. Klicken Sie auf das Symbol ➕, um einen neuen Eintrag in der Zulassungsliste zu erstellen.
  5. Wählen Sie den Network alias aus, den Sie in Schritt 4 erstellt haben.

Image - L3 Authentication Allow List

Servergruppe zuweisen

Abschließend:

  1. Suchen Sie im Captive-Portal-Authentifizierungsprofil die Einstellung Server Group.
  2. Wählen Sie die zuvor erstellte Servergruppe aus.

Image - L3 Authentication Server Group

Schritt 6: Änderungen ausrollen

Damit die Konfiguration wirksam wird, müssen Sie die Änderungen über die Oberfläche Pending Changes bereitstellen.

  1. Öffnen Sie Pending Changes.
  2. Wählen Sie den Controller aus, auf dem Sie das neu konfigurierte WLAN-Netzwerk bereitstellen möchten.
  3. Bestätigen Sie die Änderungen und stellen Sie sie diese per deploy the changes bereit.

Image - Deploy Pending Changes

Schritt 7: Anmeldung testen

Sobald die Konfiguration bereitgestellt ist, verbinden Sie ein Testgerät mit dem neu erstellten WLAN.

  • Das Gerät sollte automatisch das benutzerdefinierte Captive Portal öffnen, das Sie in Schritt 3 hochgeladen haben.
  • Überprüfen Sie, ob alle Hotspot-Funktionen wie erwartet funktionieren, einschließlich:
    • Anmeldung über alle konfigurierten Authentifizierungsmethoden
    • Registrierung oder Self-Service-Optionen (falls aktiviert)
    • Styling und SyCes2-Logo im Portal

Tipp: Testen Sie mit mehreren Geräten und Browsern, um die vollständige Kompatibilität sicherzustellen.

Problembehebung

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