(Aporte) Logueo A Hotspot Con Mail (Para Wifi Libre en Plazas - Hoteles - Etc) - Comunidad Ryohnosuke.

Accede o regístrate
Portal Foros Manuales Tienda Área de Clientes
Buscar Mensajes recientes

Buscar...
Portal Foros MikroTik Guías y Manuales
[APORTE] Logueo a Hotspot con Mail (para Wifi libre en plazas, hoteles, etc)
Tema en 'Guías y Manuales' iniciado por yo_mono, 28 Oct 2016.
Etiquetas: hotspot login mail mysql php
Bueno, busque y busque una forma de hacer esto (Incluso abri un hilo en este mismo foro y nadie me contesto siquiera ).
Despues de mucho probar, logre que funcione.
Y como realmente me costo mucho y no encontre ningun tutorial en internet que haga lo que yo quiero, les muestro y enseño.
---------------------------------------------------------------------------------------------------------------------
La idea es:
-Cliente de restaurante, hotel, plaza, etc. Se conecta a nuestro Wifi libre
-Lo dejamos, pero antes tiene que colocar su mail para que nosotros lo agreguemos a nuestra base de datos (y asi poder enviarle mucho spam)
yo_mono -una vez colocado, click en "conectar" y wala! funcionando.
New Member
Me Gusta recibidos: 6 ---------------------------------------------------------------------------------------------------------------------

Como lograrlo:
Vamos a necesitar los siguientes ingredientes:

*Un servidor PHP con Mysql
*Un mikrotik
*Clientes que quieran conectarse
---------------------------------------------------------------------------------------------------------------------
PASO 1 - Apuntar mikrotik a servidor externo

Una vez dado de alta el hotspot (ya hay mucha informacion de como hacerlo en este mismo foro), modificar el archivo "login.html" para que redireccione a una
direccion externa, en donde nosotros vamos a tener cargado nuestro formulario.
EJ:
Spoiler: Login.html
<html>
<title>...</title>
<body>
<form name="redirect" action="http://tudominioexterno.com/formulario.php" method="post">
<input type="hidden" name="mac" value="$(mac)">
<input type="hidden" name="ip" value="$(ip)">
<input type="hidden" name="username" value="$(username)">
<input type="hidden" name="link-login" value="$(link-login)">
<input type="hidden" name="link-orig" value="$(link-orig)">
<input type="hidden" name="error" value="$(error)">
</form>
<script language="JavaScript">

</script>
</body>
</html>
Como ven, nuestro login.html apunta a un servidor externo.

Esto nos lleva al paso 2
PASO 2 - Preparar Mysql

Ahora voy a explicar como poner a punto el servidor Mysql.
En mi caso, di de alta una cuenta en el hosting gratuito www.000webhost.com.
Ya que es una sola base de datos y ni siquiera va a usar pagina web, no necesito mas que eso.
Necesitamos una base de datos Mysql, con el nombre que quieran.
Acceder al phpmyadmin y ejecutar el siguiente comando:
Spoiler: Comando en Phpmyadmin
CREATE TABLE IF NOT EXISTS ùser` (

ìd` int(11) NOT NULL AUTO_INCREMENT,
ùsername` varchar(255) NOT NULL,
èmail` varchar(255) NOT NULL,
PRIMARY KEY (ìd`),
UNIQUE KEY ùsername` (ùsername`)
)
Listo. Ahora tenemos una tabla de nombre "user", con las filas "id", "username" y "email".
Cualquiera de estos nombres pueden cambiarlo si quieren. Solo lo deje asi porque para lograr que esto funcione recopile informacion de muchos lados, y asi quedó,
simplemente.
PASO 3 - Preparar formulario PHP

El siquiente paso es crear el archivo "formulario.php" (ese al que apunta nuestro login.html). O sea, el formulario en si donde la gente va a darnos amablemente su
email.
El mio luce mas o menos asi:
Spoiler: formulario.php
<?php
require('connect.php');
// Si tanto nombre como email estan escritos, se escriben en la base de datos
if (isset($_POST['username']) && isset($_POST['email'])){
$username = $_POST['username'];
$email = $_POST['email'];
$query = "INSERT INTO ùser` (username, email) VALUES ('$username', '$email')";
$result = mysqli_query($connection, $query);
if($result){
header('Location: http://10.5.50.1/login?username=admin2&password=admin2');
die();
}else{
$fmsg ="Hubo un error al conectarse, por favor intentelo de nuevo";
}
}
?>
<html>
<head>
<title>Restaurante La Casona del Nonno</title>


<link rel="stylesheet" href="bootstrap.min.css" >


<link rel="stylesheet" href="bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >


<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-signin" method="POST">
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<center>
<img src="Captura.PNG" border=0>
</center>
<h2 class="form-signin-heading">Bienvenido a la Casona del Nonno. Por favor, ingrese su mail para disfrutar de nuestro Wifi</h2>
<input type="text" name="username" class="form-control" placeholder="Nombre" required>

<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
<button class="btn btn-lg btn-primary btn-block" type="submit">Conectarse</button>

</form>
</div>
</body>
</html>
Este formulario en la web se va a ver asi:

Spoiler: Formulario web
(se ve algo
torcido porque tengo un monitor grande y solo recorte lo que interesaba)
Honestamente NO SE NADA DE PROGRAMACION WEB asi que no puedo ayudarlos si tienen dudas sobre lo que dice ahi adentro.
Solo voy a aclarar algunos puntos clave que son los que yo tuve que editar para que esto funcione.
Se los pongo uno por uno en este Spoiler asi es mas ordenado:
Spoiler: Aclaracion 1
require('connect.php'); ----> Aca lo que dice es que primero va a buscar otro archivo mas llamado "connect.php" que se va a conectar
a la base de datos creada en el punto 2. Esto lo voy a explicar en el punto siguiente
Spoiler: Aclaracion 2
if (isset($_POST['username']) && isset($_POST['email'])){

$username = $_POST['username'];
$email = $_POST['email'];
$query = "INSERT INTO ùser` (username, email) VALUES ('$username', '$email')";

$result = mysqli_query($connection, $query); ----------------> Aca, indica que SIEMPRE que el cliente haya colocado sus datos
correctamente, estos se van a insertar en la tabla que nosotros queremos
Spoiler: Aclaracion 3 (importante)
if($result){
header('Location: http://10.5.50.1/login?username=admin2&password=admin2');
die();
}else{
$fmsg ="Hubo un error al conectarse, por favor intentelo de nuevo"; ----------> esta parte es muy importante. Lo que dice esta
parte del codigo es que SI SE ESCRIBIO CORRECTAMENTE la tabla, va a redirigirnos a nuestro mikrotik y automaticamente loguearnos con el
usuario "admin2" y contraseña "admin2" al hotspot (el usuario a utilizar tiene que tener habilitada la opcion de shared user, ya que se va a
"conectar" simultaneamente decenas o centenas de veces). En caso contrario, si hubo algun error, va a mostrar el mensaje "Hubo un error
al conectarse, por favor intentelo de nuevo"
El resto, es codigo para darle estilos a la pagina (formato, que no sean solo textos en el aire) y mas abajo la pagina en si. Como dije antes y repito ahora: NO TENGO
IDEA DE PROGRAMACION WEB, solo recopile codigos que encontre hasta lograr uno funcional, fue todo deduccion y suerte, asi que no se ni la mitad de las cosas que
dice ese codigo que pegue arriba.
PASO 4 - ARCHIVO "CONNECT.PHP" PARA CONECTARSE A LA BASE DE

DATOS
Este archivo tiene que ir en el mismo directorio que el "formulario.php", ya que este lo invoca al principio de su codigo, para poder conectarse al servidor mysql que
va a utilizar.
Y dice asi:
Spoiler: Connect.php
<?php
$connection = mysqli_connect('localhost' (Si es local. Si no, la direccion de acceso), 'Nombre de usuario del mysql', 'Contraseña');
if (!$connection){
die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'Nombre de la base de datos creada en el punto 2');
if (!$select_db){
die("Database Selection Failed" . mysqli_error($connection));
}
PASO 5 - ARCHIVO ALOGIN.HTML EN EL MIKROTI

Cuando nuestro formulario nos direccione con exito de vuelta al Mikrotik, este va a acceder al archivo "alogin.html".
Este archivo contiene la pagina a la que vamos a ser redireccionados una vez que accedemos al Hotspot.
En mi caso, a la pagina del restaurante para el que cree todo esto.
Y dice mas o menos asi:
Spoiler: Alogin.html
<html>
<center>
<head>
<meta http-equiv="Refresh" content="0;url=www.paginadelrestauranteparaelquecreetodoesto.com" />
</head>
<body>
</body>
</center>
</html>
Muy bien!
Ya tenemos nuestro Hotspot funcionando!
Un par de aclaraciones para terminar:
-Recuerden habilitar el host donde tienen alojado el formulario en el walled garden para poder acceder.
Es mas o menos asi:
Spoiler: Walled Garden
/ip hotspot walled-garden

add action=allow disabled=no dst-host=www.servidordondetienensuphp.com
-La direccion a la que su PHP los va a redirigir luego de hacer el formulario (en este caso la http://10.5.50.1/login?username=admin2&password=admin2)
TIENE QUE APUNTAR A LA IP DEL SERVIDOR HOTSPOT, NO A LA IP LAN PRIVADA DEL ROUTER. Aclaro esto porque en principio yo queria apuntarlo a "192.168.88.1" y
me generaba un loop
-Para convertir al usuario "admin2" en un shared User, lo que tienen que modificar no es el usuario en si si no el PERFIL de usuario que este usa. Acceden al hotspot
--> User profiles --> elijen el perfil correcto, y ahi mismo tienen la opcion "shared users". En mi caso puse 99999. No se si es la opcion mas correcta pero funciona
bien.
Espero que haya servido, espero que alguien le de bola, y espero haber ayudado a alguien como me hubiese servido esta ayuda a mi hace algunos dias.
Saludos a todos!
Última edición: 28 Oct 2016
yo_mono, 28 Oct 2016 #1
addo huisman, T4T0, MChacon y 3 otros les gusta esto.
Excelente, luego lo probaré, muchas gracias por compartir esta info!! saludos
Emanuel M.
New Member
Emanuel M., 28 Oct 2016 #2
Me Gusta recibidos: 3
A yo_mono le gusta esto.
Excelente!!! Gracias por el aporte, era justo lo que necesitaba.
amaldonado
New Member
amaldonado, 18 Nov 2016 #3
A yo_mono le gusta esto.
amaldonado dijo: ↑
Excelente!!! Gracias por el aporte, era justo lo que necesitaba.
Me alegro que sirva. De paso te pregunto.. sabes como editar el tema?? No encuentro la opcion por ningun lado y me esta volviendo loco que en un lugar puse
"mikroti"
yo_mono
New Member
yo_mono, 18 Nov 2016 #4
yo_mono dijo: ↑
Me alegro que sirva. De paso te pregunto.. sabes como editar el tema?? No encuentro la opcion por ningun lado y me esta volviendo loco que en
un lugar puse "mikroti"
Buena informacion gracias!
grammont
Well-Known Member
grammont, 18 Nov 2016 #5
yo_mono dijo: ↑
Me alegro que sirva. De paso te pregunto.. sabes como editar el tema?? No encuentro la opcion por ningun lado y me esta volviendo loco que en
un lugar puse "mikroti"
yo_mono, hace varios dias que buscaba esa informacion.. MUCHAS GRACIAS!!
Ahora para editar el tema lo mejor seria el dreamwaver, si no tienes mucho conocimineto em html.
sebgale
New Member
sebgale, 23 Nov 2016 #6
Muy buena tu idea, yo tambien estaba buscando algo parecido a esto hace 2 meses (captar datos "nombre, celular, correo" para luego recién dar wifi gratis), yo lo
hice con la opción "HOTSPOT TRIAL", la cual puedo decidir por cuanto tiempo quiero que estén conectados los clientes, ya sea 1,2 o 3 horas al día y después ya no
tienen wifi.
JhorDy
New Member
JhorDy, 16 Dic 2016 #7
Tengo problema, con esta parte ya que no inicia seccion de esta forma:
http://192.168.25.1/login?username=admin2&password=admin2
esa es la ip del mikrotik y no inicia seccion ese es el problema que tengo ahorita
MChacon
New Member
MChacon, 21 Ene 2017 #8
MChacon dijo: ↑
Tengo problema, con esta parte ya que no inicia seccion de esta forma:
http://192.168.25.1/login?username=admin2&password=admin2
esa es la ip del mikrotik y no inicia seccion ese es el problema que tengo ahorita
MChacon
New Member Encontre el error, el problema es con la base de datos ejemplo:
Si "Juan" se loguea por primera vez todo va bien, el problema es cuando quiere volver a entrar le pide nuevamente el correo y es donde hay conflicto con la base de
datos y no deja pasar de ahi, ya que no reemplaza los datos la base de datos.
Adicional les dejo un codigo para hacer Responsivo el Portal ya que como lo dejo el amigo @yo_mono se ve super pequeñas las letras y no se logra ver en Moviles.
Insertar CODE, HTML o PHP:
<meta charset="utf‐8">
<meta name="viewport" content="width=device‐width, initial‐scale=1.0" />
<style>
.container {
width:996px;
margin:0px auto;
font‐size:1em;
}
section,aside {
padding: 10px;
background:#ccc;
‐moz‐border‐radius:5px;‐webkit‐border‐radius:5px;‐o‐border‐radius:5px;border‐radius:5px;
}
section {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
nav {
overflow: hidden;
}
nav ul {
list‐style‐type:none;
float:left;
padding:0px;
}
nav ul li {
float:left;
padding:3px 10px;
Eso va en la Viñeta HEAD
Como repito si alguien tiene una solucion para reemplazar datos en la base de datos, seria de gran aporte!
MChacon, 24 Ene 2017 #9
A sebgale le gusta esto.
se que quizas sea un poco antiguo el tema, pero siempre llego a la parte de que registra bien al mysql, pero no me redirige a la pagina que necesito o que de
internet, alguien puede saber por que pasa eso? o alguien ha hecho todo lo que dice la guia?
surakoru
New Member
surakoru, 24 Ago 2017 #10
(Debes acceder o registrarte para responder aquí.)
Compartir esta página

Recomendar Regístrate para ver qué recomiendan tus amigos.
Portal Foros MikroTik Guías y Manuales
Español (ES) Contactarnos Ayuda Portal Arriba
Forum software by XenForo™ ©2010-2017 XenForo Ltd. Términos y reglas

(Aporte) Logueo A Hotspot Con Mail (Para Wifi Libre en Plazas - Hoteles - Etc) - Comunidad Ryohnosuke.

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

(Aporte) Logueo A Hotspot Con Mail (Para Wifi Libre en Plazas - Hoteles - Etc) - Comunidad Ryohnosuke.

Transféré par

Droits d'auteur :

Formats disponibles

Accede o regístrate

Portal Foros Manuales Tienda Área de Clientes

Buscar Mensajes recientes

Portal Foros MikroTik Guías y Manuales

Etiquetas: hotspot login mail mysql php

Me Gusta recibidos: 6 ---------------------------------------------------------------------------------------------------------------------

Vamos a necesitar los siguientes ingredientes:

PASO 1 - Apuntar mikrotik a servidor externo

Como ven, nuestro login.html apunta a un servidor externo.

PASO 2 - Preparar Mysql

Spoiler: Comando en Phpmyadmin

CREATE TABLE IF NOT EXISTS `user` (

PASO 3 - Preparar formulario PHP

El mio luce mas o menos asi:

<link rel="stylesheet" href="styles.css" >

<input type="text" name="username" class="form-control" placeholder="Nombre" required>

<button class="btn btn-lg btn-primary btn-block" type="submit">Conectarse</button>

Este formulario en la web se va a ver asi:

if (isset($_POST['username']) && isset($_POST['email'])){

$query = "INSERT INTO `user` (username, email) VALUES ('$username', '$email')";

Spoiler: Aclaracion 3 (importante)

PASO 4 - ARCHIVO "CONNECT.PHP" PARA CONECTARSE A LA BASE DE

PASO 5 - ARCHIVO ALOGIN.HTML EN EL MIKROTI

Un par de aclaraciones para terminar:

/ip hotspot walled-garden

yo_mono, 28 Oct 2016 #1

addo huisman, T4T0, MChacon y 3 otros les gusta esto.

Excelente!!! Gracias por el aporte, era justo lo que necesitaba.

Excelente!!! Gracias por el aporte, era justo lo que necesitaba.

Buena informacion gracias!

Insertar CODE, HTML o PHP:

Eso va en la Viñeta HEAD

MChacon, 24 Ene 2017 #9

A sebgale le gusta esto.

(Debes acceder o registrarte para responder aquí.)

Compartir esta página

Portal Foros MikroTik Guías y Manuales

Español (ES) Contactarnos Ayuda Portal Arriba

Forum software by XenForo™ ©2010-2017 XenForo Ltd. Términos y reglas

Vous aimerez peut-être aussi