Tutorial:

Personalizando a pgina de Hotspot no WebMikrotik

Abril, 2011

Autores: Ariel Amarilio dos Santos Geraldo Teodoro dos Santos Junior Hendrios Amorin Matozo Jonas de Oliveira Neves Osmar Santos de Souza Rosana Areco Revisado por: Adrielle Fernandes Anschau

http://www.spidersofthouse.com 67 - 4063-9436

Como configurar uma tela de Hotspot O que Hotspot?

Hotspot um termo utilizado para se referir a uma rea pblica onde est disponvel um servio de acesso Internet, normalmente atravs de uma rede sem fio Wi-Fi. Aplicaes tpicas incluem o acesso em Hotis, Aeroportos, Shoppings, Universidades e em nosso caso, Provedores de Internet. O conceito de Hotspot pode ser usado no entanto para dar acesso controlado a uma rede qualquer, com ou sem fio, atravs de autenticao baseada em nome de usurio e senha.

Como Funciona?
Quando em uma rea de cobertura de um Hospot, um usurio que possua um Laptop e tente navegar pela WEB arremetido para uma pgina do Hotspot que pede suas credenciais, normalmente usurio e senha. Ao fornec-las e sendo um cliente autorizado pelo Hotspot o usurio ganha acesso Internet podendo sua atividade ser controlada e bilhetada.

Pgina Gratuita e Personalizvel do WebMikrotik!

O sistema WebMikrotik oferece a seus clientes um modelo de tela de hotspot j pronta e prconfigurada, com links de fcil acesso para cadastro de clientes interessados ou ao website da empresa, dando liberdade ao cliente de acessar a Central do Cliente sem ter efetuado a autenticao (interessante para impresso de boletos, por exemplo). NOTA: Para que seja possvel utilizr a tela de hotspot necessrio que o servio hotspot j esteja ativo e configurado corretamente, se houver problemas aps o upload da tela, resete para a tela original do RouterOS e verifique se o problema ainda persiste.

Como configurar uma tela de Hotspot

A edio propriamente dita ser do logotipo, das informaes do provedor e o comportamento da pgina antes e aps a autenticao dos usurios. Tambm possvel alterar totalmente o layout da pgina de Hotspot, desde que se tenha conhecimento em linguagens como HTML, CSS, JavaScript e o modo de como feita a integrao com o MikroTik RouterOS.

Personalizando a pgina de Hotspot no WebMikrotik

Primeiramente necessrio estar logado no sistema WebMikrotik, para que assim voc possa baixar a Tela Hotspot disponibilizada. Para salvar a tela em seu computador acesso o menu Controle da rede e localize o boto 'TELA HOTSPOT' Na seo Mikrotiks.

Voc poder salvar o arquivo em qualquer pasta do seu computador. Aps o download, descompacte o arquivo hotspot.rar, este arquivo na verdade, uma pasta compactada com vrios arquivos que servem para fazer a tela de hotspot funcionar. NOTA: O arquivo disponibilizado estar compactado no formato .rar, portanto necessrio ter instalado um software especfico para descompact-lo. Alguns softwares so listados a seguir: para Windows pode-se utilizar o Filzip, o 7zip ou o WinRAR; para sistemas GNU/Linux, UNIX, sistemas BSD e Mac OS possvel ver uma lista de softwares disponveis no seguinte endereo: http://sourceforge.net/search/?q=unrar O arquivo logo.gif a imagem exibida na tela de Hotspot, que dever ser substitudo pelo logotipo de seu provedor. O tamanho ideal de 150x153 pixels e arquivo deve estar em dos seguintes formatos: .bmp, .gif, .png ou .jpg. Aps descompactar o arquivo localize os dois arquivos que vamos editar, so eles: logo (ou logo.gif) e configuracao (ou configuracao.js). 3

Como configurar uma tela de Hotspot

NOTA: O nome do arquivo com a logo do seu provedor dever estar salva com o nome logo para que o sistema reconhea. O tratamento do logotipo no ser abordado neste material, pois entendemos que o cliente j possua o logotipo no tamanho sugerido ou possua conhecimento suficiente para edit-lo a qualquer momento. Aps a substituio do logotipo vamos edio do prximo arquivo. No arquivo configuracao iremos definir as principais informaes do provedor, que sero exibidas na tela de autenticao. Este arquivo pode ser editado atravs de um editor de textos comum, o Bloco de Notas, por exemplo, caso utilize Windows, ou o gEdit/kEdit caso utilize sistemas GNU/Linux. Caso queira alterar comportamentos especficos da tela, as linhas de configuraes esto todas comentadas, sendo assim possvel fazer vrios tipos de modificaes. O comportamento alterado de acordo com a configurao das variveis do arquivo. Tais variveis podem ser: um texto, um domnio, s (para SIM) e n (para NO) dependendo de sua aplicao na pgina de Hotspot. NOTA: Na alterao de cada campo, certifique-se de que nenhuma das aspas simples ( ) esto faltando entre as informaes modificadas. Observe na imagem alguns dos campos que podem ser personalizados. O texto mostrado na cor rosa o texto que dever ser editado. Em azul esto apenas comentrios para ajudar na compreenso das funcionalidades de cada varivel.

Como configurar uma tela de Hotspot

Exemplo: Abaixo segue descrio dos campos que aparecero no cabealho.

var nome = 'Spider Informtica'; Este campo deve conter o nome fantasia do seu provedor. var dominio = 'spider.net.br'; Domnio do provedor, o qual deve estar registrado e cadastrado no sistema WebMikrotik, pois o boto cadastre-se utilizar ele como referncia. var endereco1 = 'Av.: Manoel da Costa Lima, 1917'; var endereco2 = 'Vila Piratininga - Campo Grande / MS'; Informaes completas de onde o provedor se localiza. var telefone = '(67) 3345-0200'; Telefone para contato. var site = 'www.spider.net.br'; Site do provedor, que pode ser um site externo ao sistema, podendo ser utilizado para a divulgao do mesmo.

Envio da tela para o Mikrotik RouterOS

Nesta etapa exitem duas formas de se prosseguir dependendo do sistema operacional utilizado. Segue abaixo a descrio dos procedimentos para importao da tela pelo Mikrotik RouterOS atravs dos sistemas operacionais Linux e Windows.

Importando tela de Hotspot pelo Linux

Para importar sua tela de Hotspot para o Mikrotik ROuterOS utilizando o sistema operacional Linux preciso conectar-se aravs de um cliente FTP e ento fazer a cpia dos arquivos de configurao da tela. Para isso, siga a sequencia de passos descrita abaixo. Primeiramente, clique no menu Locais e ento acesse o submenu Conectar ao servidor....

Como configurar uma tela de Hotspot

Ser aberto um janela para insero dos dados de acesso. Primeiramente escolha o tipo de acesso que ser feito, neste caso utilizaremos o FTP, preencha o campo Servidor com o IP do servidor em questo e em 'Nome de usurio' coloque o usurio que ir acessar seu servidor.

Como configurar uma tela de Hotspot

Aps preencher os dados, clique em 'Conectar'. Ser solicitado a senha de acesso, e, aps informada, clique novamente em 'Conectar'.

A pasta que ser aberta representa o 'Menu Files do seu Mikrotik Routeros. nesta pasta que dever ser colada a pasta hotspot com os arquivos que foram alterados.

Feito isso, sua tela de Hotspot j estar disponvel no seu Mikrotik RouterOS e seus clientes j podero visualiz-la.

Como configurar uma tela de Hotspot Importando tela de Hotspot pelo Windows
Faa o acesso ao seu RouterOS pelo Winbox, e acesse o menu FILES. Apague o diretrio hotspot contido na janela aberta (Em alguns casos acontece da excluso da hierarquia de arquivos contidos no acontecer instntaneamente, neste caso aguarde alguns segundos). Agora faa a cpia da pasta com os arquivos editados anteriormente e cole na janela aberta. Para isso, clique no boto Paste.

Feito isso, sua tela de Hotspot j estar disponvel no seu Mikrotik RouterOS e seus clientes j podero visualiz-la.