sudo: Jack of all trades, master of some

Personalizar login del portal cautivo de pfSense

9 comentarios

Recientemente se realizó la asamblea constitutiva de la Unión de Informáticos de Cuba en mi provincia. Una de las cosas que quizá generó muchas expectativas fue el hecho de que habría servicio de internet Wi-Fi que afortunadamente me asignaron para administrar.

Este servicio temporal requería que solo los usuarios registrados pudieran usarlo, casi que instantáneamente espeté que se haría a través de un portal cautivo (me gusta más captivo) y claro, usando mi sistema operativo favorito para firewall: pfSense.

El servicio del portal cautivo es muy sencillo de configurar, sin embargo había algo que no me gustaba, la página del login es funcional pero gráficamente no se ajustaba al evento. Entonces me dispuse a personalizarla.

Login original

Login original

La página del login del portal cautivo de pfSense se personaliza a través de un archivo html simple y con la posibilidad de utilizar un logo. Para esto es necesario incluir, como bien indica pfSense, los siguientes campos en el formulario:

<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>

Husmeé varios ejemplos en internet para no tener que pasar mucho tiempo en esta tarea, pero todos se basaban el obsoleto layout de tablas. En esta ocasión se utilizaron otras variantes y por supuesto se aprovecharon las ventajas del HTML5/CSS3:

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Acceso a Internet | Unión de Informáticos de Cuba</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   body {
    background-color: #4a225f;
    color: #fff;
    font-family: sans-serif;
    padding: 2em;
    text-align: center;
    margin: 0 auto;
   }
   input {
    background-color: transparent;
    display: block;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #666;
    width: 100%;
    padding: .5em 0;
    font-size: 1.25em;
    color: #fff;
    margin-bottom: 1.5em;
    transition: border .2s ease;
   }
   input:focus {
    border-bottom: 2px solid #fff;
   }
   input[type="submit"] {
    background-color: #420a5f;
    display: inline-block;
    font-size: 0.75em;
    text-transform: uppercase;
    border-bottom: 2px solid #4a225f;
    width: auto;
    margin: 0;
    padding: 1em;
    transition: border .2s ease;
   }
   input[type="submit"]:hover {
    border-bottom: 2px solid #fff;
    cursor: pointer;
   }
   .disclaimer {
    font-size: .75em;
    margin: 0;
    margin-top: 2em;
   }
   @media only screen and (min-device-width: 480px) {
    body {
     padding: 4em;
     width: 66.66%;
    }
   }
   @media only screen and (min-device-width: 768px) {
    body {
     padding: 4em;
     width: 50%;
    }
   }
   @media only screen and (min-device-width: 1024px) {
    body {
     padding: 4em;
     width: 33.33%;
    }
   }
  </style>
 </head>
 <body>
  <img src="captiveportal-logo.png" width="160" height="160" alt="Unión de Informáticos de Cuba">
  <form method="post" action="$PORTAL_ACTION$">
   <input id="user" name="auth_user" type="text" placeholder="Usuario">
   <input id="pass" name="auth_pass" type="password" placeholder="Contraseña">
   <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
   <input name="accept" type="submit" value="Continuar">
  </form>
  <p class="disclaimer">Al hacer click/tap en CONTINUAR está de acuerdo con hacerse responsable de su actividad en internet.</p>
 </body>
</html>

Una vez terminado de conformar el documento HTML simplemente queda subirlo incluyendo el logo. Ir a Services / Captive Portal y en la pestaña Captive portal(s), buscar el apartado Portal page contents hacer clic en Browse y seleccionar el archivo HTML.

Para el logo ir a la pestaña File Manager y subir el archivo de imagen. Es importante aclarar que todos los archivos que se suban a través de esta vía tendrán como prefijo captiveportal- por lo que al subir un archivo logo.png debe utilizarse en el HTML como captiveportal-logo.png.

Login personalizado

Login personalizado

pfSense también nos permite personalizar la página de error y del logout del portal cautivo en los apartados Authentication error page contents y Logout page contents respectivamente. En esta ocasión solamente se personalizó la de error:

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Acceso a Internet, $PORTAL_MESSAGE$ | Unión de Informáticos de Cuba</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
   body {
    background-color: #4a225f;
    color: #fff;
    font-family: sans-serif;
    padding: 2em;
    text-align: center;
    margin: 0 auto;
   }
   input {
    background-color: transparent;
    display: block;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #666;
    width: 100%;
    padding: .5em 0;
    font-size: 1.25em;
    color: #fff;
    margin-bottom: 1.5em;
    transition: border .2s ease;
   }
   input:focus {
    border-bottom: 2px solid #fff;
   }
   input[type="submit"] {
    background-color: #420a5f;
    display: inline-block;
    font-size: 0.75em;
    text-transform: uppercase;
    border-bottom: 2px solid #4a225f;
    width: auto;
    margin: 0;
    padding: 1em;
    transition: border .2s ease;
   }
   input[type="submit"]:hover {
    border-bottom: 2px solid #fff;
    cursor: pointer;
   }
   .invalid {
    background-color: #420a5f;
    color: #eee;
    margin: 1em 0;
    padding: 1em 0;
   }
   .disclaimer {
    font-size: .75em;
    margin: 0;
    margin-top: 2em;
   }
   @media only screen and (min-device-width: 480px) {
    body {
     padding: 4em;
     width: 66.66%;
    }
   }
   @media only screen and (min-device-width: 768px) {
    body {
     padding: 4em;
     width: 50%;
    }
   }
   @media only screen and (min-device-width: 1024px) {
    body {
     padding: 4em;
     width: 33.33%;
    }
   }
  </style>
 </head>
 <body>
  <img src="captiveportal-logo.png" width="160" height="160" alt="Unión de Informáticos de Cuba">
  <p class="invalid">$PORTAL_MESSAGE$</p>
  <form method="post" action="$PORTAL_ACTION$">
   <input id="user" name="auth_user" type="text" placeholder="Usuario">
   <input id="pass" name="auth_pass" type="password" placeholder="Contraseña">
   <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
   <input name="accept" type="submit" value="Continuar">
  </form>
  <p class="disclaimer">Al hacer click/tap en CONTINUAR está de acuerdo con hacerse responsable de su actividad en internet.</p>
 </body>
</html>

Nótese el uso de la variable $PORTAL_MESSAGE$ que será sustituida por el mensaje de error que devuelve pfSense.

Página de error personalizada

Página de error personalizada

En los dos documentos HTML se hace uso del atributo placeholder que no está soportado por IE < 10 (MEH!). Para los puristas de UX y de accesibilidad: en ningún momento contemplé la posibilidad de usarse lectores de pantallas.

Y para adaptar el contenido en aquellos dispositivos con resoluciones de pantalla más populares se utilizaron varias media queries.

Comentarios desactivados
  1. Wundebar! Acá en Holguín se realizó en sábado creo, ya sabes, con la presencia del 1er secretario y demás. Es una lástima que la UIC esté tan politizada…, poer bueno, no es tema acá :D Excelente aporte! Kudos!!

    1. @Ozkar

      Por eso mismo es que yo, en cuanto escuché sobre UIC, me pareció lo mismo que UJC, PCC, y demás. Al final mucha Asamblea, mucho rollo, pero ¿que se ha dicho de verdad de interés para un Informático? En fin, este no es el lugar ni el hilo para debatir del asunto.

      Buena pincha colega!! ;)

  2. Se ve atractivo! vamos que dan ganas de loguearse…

  3. vaya que chevere
    optimizado y chulito para todos los gustos

  4. Hyuuga_Neji 4 años atrás

    El viernes toca el turno acá en Cfgos pero… estoy últimamente en el bando de los “pesimistas” y cuando escuche la opción de “afiliación voluntaria” decidí: “dejar que otros den el primer paso”

    Sobre tu modificación al HTML… mis respetos, realmente mola saber que al menos en otros lugares alguien le pone empeño a las cosas.

  5. Quiero montar un portal cautivo en un restaurant para que puedan usar wifi gratuito, el login seria usando una cuenta de facebook, y esta se almacenaria en mysql.
    Que es mejor, portal cautivo usando software(pfsense) o hardware?

    Gracias

  6. una pequeña pregunta, cuando uso pfsense con proxy transparente y portal captivo, los usuarios que pongan en el navegador la ip del pfsense como proxy y el puerto respectivo tienen salida sin pasar por el portal captivo. como resolviste esto?

    1. @nadili

      Realmente tendría que investigar con este escenario, porque en este caso pfSense no le tenía puesto proxy transparente, se conectaba a internet directo. Para mí vi un poco redundante poner un proxy.

  7. O sea, el mismo portal captivo hace de proxy?