Задать вопрос

Captive Portal | Html+CSS+bash | OpenWrt?

Всем доброго времени суток, установил пакет nodogsplash в прошивку OpenWrt на роутере Archer C20 v5
Цель: Создание портала авторизации с вводом логина и пароля.
Прочитав документалку по nodogplash узнал что можно сделать авторизацию через BinAuth использовав скрипт bash
Подключил этот скрипт в конфиге nodogsplash
Пример скрипта с документалки:

#!/bin/sh

# EXAMPLE 1
# This is an example script for BinAuth
# It verifies a client username and password and sets the session length.
#
# If BinAuth is enabled, NDS will call this script as soon as it has received an authentication request
# from the web page served to the client's CPD (Captive Portal Detection) Browser by one of the following:
#
# 1. splash_sitewide.html
# 2. PreAuth
# 3. FAS
#
# The username and password entered by the clent user will be included in the query string sent to NDS via html GET
# For an example, see the file splash_sitewide.html

METHOD="$1"
CLIENTMAC="$2"

case "$METHOD" in
       auth_client)
               USERNAME="$3"
               PASSWORD="$4"
               if [ "$USERNAME" = "Staff" -a "$PASSWORD" = "weneedit" ]; then
                       # Allow Staff to access the Internet for the global sessiontimeout interval
                       # Further values are reserved for upload and download limits in bytes. 0 for no limit.
                       echo 0 0 0
                       exit 0
               elif [ "$USERNAME" = "Guest" -a "$PASSWORD" = "thanks" ]; then
                       # Allow Guest to access the Internet for 10 minutes (600 seconds)
                       # Further values are reserved for upload and download limits in bytes. 0 for no limit.
                       echo 600 0 0
                       exit 0
               else
                       # Deny client access to the Internet.
                       exit 1
               fi

               ;;
       client_auth|client_deauth|idle_deauth|timeout_deauth|ndsctl_auth|ndsctl_deauth|shutdown_deauth)
               INGOING_BYTES="$3"
               OUTGOING_BYTES="$4"
               SESSION_START="$5"
               SESSION_END="$6"
               # client_auth: Client authenticated via this script.
               # client_deauth: Client deauthenticated by the client via splash page.
               # idle_deauth: Client was deauthenticated because of inactivity.
               # timeout_deauth: Client was deauthenticated because the session timed out.
               # ndsctl_auth: Client was authenticated by the ndsctl tool.
               # ndsctl_deauth: Client was deauthenticated by the ndsctl tool.
               # shutdown_deauth: Client was deauthenticated by Nodogsplash terminating.
               ;;
esac


И html взял там же:
HTML с документалки

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/images/splash.jpg" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/splash.css">

<title>$gatewayname Captive Portal.</title>

<!--
Content:
       Nodogsplash (NDS), by default, serves this splash page (splash.html)
       when a client device Captive Portal Detection (CPD) process
       attempts to send a port 80 request to the Internet.

       You may either embed css in this file or use a separate .css file
       in the same directory as this file, as demonstrated here.

       It should be noted when designing a custom splash page
       that for security reasons many CPD implementations:
               Immediately close the browser when the client has authenticated.
               Prohibit the use of href links.
               Prohibit downloading of external files
                       (including .css and .js).
               Prohibit the execution of javascript.

Authentication:
       A client is authenticated on submitting an HTTP form, method=get,
       passing $authaction, $tok and $redir.

       It is also possible to authenticate using an href link to
       $authtarget but be aware that many device Captive Portal Detection
       processes prohibit href links, so this method may not work with
       all client devices.

Available variables:
       error_msg: $error_msg
       gatewayname: $gatewayname
       tok: $tok
       redir: $redir
       authaction: $authaction
       denyaction: $denyaction
       authtarget: $authtarget
       clientip: $clientip
       clientmac: $clientmac
       clientupload: $clientupload
       clientdownload: $clientdownload
       gatewaymac: $gatewaymac
       nclients: $nclients
       maxclients: $maxclients
       uptime: $uptime

Additional Variables that can be passed back via the HTTP get,
or appended to the query string of the authtarget link:
       username
       password
-->

</head>

<body>
<div class="offset">
<med-blue>$gatewayname Captive Portal.</med-blue>
<div class="insert">
<img style="height:60px; width:60px; float:left;" src="/images/splash.jpg" alt="Splash Page: For access to the Internet.">
<big-red>Welcome!</big-red>
<hr>
<br>
<italic-black>For access to the Internet, please enter your Username and Password.</italic-black>
<br><br>
<hr>

<form method="get" action="$authaction">
<input type="hidden" name="tok" value="$tok">
<input type="hidden" name="redir" value="$redir">
<input type="text" placeholder="Enter Username" name="username" value="" size="12" maxlength="12">
<br>Username<br><br>
<input type="password" placeholder="Enter Password" name="password" value="" size="12" maxlength="10">
<br>Password<br><br>
<input type="submit" value="Continue">
</form>

<hr>
<copy-right>Copyright &copy; The Nodogsplash Contributors 2004-2019.<br>This software is released under the GNU GPL license.</copy-right>

</div></div>
</body>
</html>



Убрал лишнее и сделал + - нормально оформление страницы:
HTML+CSS

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Портал авторизации - $gatewayname</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            text-align: center;
            max-width: 400px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
        }
        .container img {
            width: 80px;
            height: 80px;
        }
        .container h1 {
            color: #0056b3;
            font-size: 24px;
        }
        .container p {
            font-size: 14px;
            color: #555;
        }
        form {
            margin-top: 20px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background: #0056b3;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 5px;
            width: 100%;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background: #004494;
        }
        .footer {
            margin-top: 20px;
            font-size: 12px;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="/images/splash.jpg" alt="Логотип">
        <h1>$gatewayname</h1>
        <p>Для доступа к интернету введите имя пользователя и пароль.</p>
        <form method="get" action="$authaction">
            <input type="hidden" name="tok" value="$tok">
            <input type="hidden" name="redir" value="$redir">
            <input type="text" name="username" placeholder="Имя пользователя" required>
            <input type="password" name="password" placeholder="Пароль" required>
            <input type="submit" value="Войти">
        </form>
        <div class="footer">
            &copy; The Nodogsplash Contributors 2004-2019. Выпущено под лицензией GNU GPL.
        </div>
    </div>
</body>
</html>



Всё отлично работает, хотелось бы добавить функционал который при не правильном вводе логина или пароля, под формой авторизации выводился текст "Неверный логин или пароль"
Пожалуйста помогите с реализацией
  • Вопрос задан
  • 534 просмотра
Подписаться 3 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы