Categoria: html

Categorias
api hotspot html integra????o ip linux mikrotik rede ssl tcp windows

Adicionando uma p??gina de cadastro de usu??rios (Hotspot) em ASP.NET no Mikrotik

Cada projeto que pego, ?? uma aventura nova a ser encarada! Dessa vez me adentrei no universo de Linux, rede, SSH, infra e tudo o que ?? direito. Quem n??o conhece, a Mikrotik ?? uma empresa de grande refer??ncia no que tange em equipamentos para redes de computadores. Seu principal destaque ?? o RouterOS que ?? sistema operacional que torna o roteador um poderoso gerente de rede. Dentro do Mikrotik (irei me referenciar sempre dessa forma generalizando como um produto), h?? o HotSpot. Com ele pode-se gerenciar quem ir?? autenticar na rede para usar a internet (ou apenas a intranet), banda usada, taxa de transfer??ncia e outras funcionalidades por usu??rio ou de forma geral. Um exemplo de uso desse sistema ?? de quando voc?? vai a uma rede corporativa onde precisa autenticar-se para usar a internet… ?? isso!

Qual ?? o objetivo desse artigo ent??o? A princ??pio ?? apenas obter as p??ginas originais de hotspot do Mikrotik, colocar um redirecionador para uma p??gina externa, criar uma p??gina externa de cadastro de usu??rio (para que possa acessar a rede) e fazer funcionar. N??o ensinarei como configurar ou criar o hotspot. Pela net h?? v??rios tutoriais muito bons sobre o assunto e tamb??m n??o ?? de minha ??rea. Recomendo fortemente o f??rum da Under-Linux que l?? o pessoal manja muito no assunto.

Nesse artigo usei o Mikrotik MKBR100 que ?? bem f??cil de usar: basta plugar o cabo de rede da internet, do servidor e da energia. Pronto!

Para acessar seu SO, deve-se utilizar o Winbox como se fosse um daqueles players de m??quina virtual ou OpenSSH. Vamos l?? colocar a m??o na massa!

Conecte o cabo de rede de seu PC (ou servidor) na porta (interface) ether2 do Mikrotik. Agora conecte outro cabo na ether1 para os outros computadores da rede (ou roteador simples). Porqu?? na ether1? Estou considerando que o hotspot est?? configurado para monitorar essa interface enquanto a ether2 ser?? utilizado para que o servidor de comunique com o aparelho. Seria algo do tipo:

V?? em IP > Address no Mikrotik para que sejam configuradas as interfaces e sejam endere??ados conforme os exemplos abaixo:

  • ether1: 192.168.88.1
  • ether2: 192.168.88.2

Somente atrav??s de IP que ser?? poss??vel enviar os arquivos do hotspot. Se ficar conectando, via MAC, pelo Winbox, voc?? ter?? a mensagem de erro: “router has been disconnected” (logo, conecte-se usando a ether2 – 192.168.88.2). E outra coisa ??: se n??o seguir o esquema acima, outros erros voc?? ter??, como:

could not connect to … no response
could not connect to … connection refused

could not connect to … network is unreachable
could not fetch index from … not found

Tudo isso por causa de configura????o apenas! ?? bom deixar o IP do servidor fixo para que possa dar permiss??o de porta, firewall, etc. No caso deixei como 192.168.88.30 (que no caso era minha pr??pria m??quina). Uma dica: ??s vezes d?? um reboot no aparelho!

O pr??ximo passo ?? ativar a porta da API que o Mikrotik disp??e para integra????o com linguagens de programa????o. ?? atrav??s dela que iremos conectar e fazer a comunica????o. S?? que precisamos ativ??-la. V?? em IP > Services e ative a API na porta 8728.

Tamb??m libere, no Firewall, as portas para conex??o tanto do sistema quanto do Winbox (pelo IP), sen??o quando estiver acessando pela p??gina de cadastro, ir?? surgir o erro: “nenhuma conex??o p??de ser feita porque a m??quina de destino as recusou ativamente ..:8728.”.

Para permitir a navega????o e envio de informa????es, adicione as permiss??es no Walled Garden.

Vejam que at?? o momento tudo ?? configura????o e nada de programa????o. Continuemos…

Agora vamos em Files e selecione todos os arquivos da pasta hotspot, arraste para sua ??rea de trabalho que ser?? copiado. Para enviar fa??a o processo inverso… Se estiver acessando pelo IP vai dar certo, sen??o cair?? a conex??o (lembra que disse acima?).

Abra o HTML da p??gina login.html e acione um link para a p??gina de cadastro que ficar?? hospedada no servidor. Adicionei o link <a href=“http://192.168.88.30/mikrotik/cadastro.aspx”>cadastre-se</a> . Customize as demais p??ginas como desejar e as envie de volta. Praticamente terminamos de trabalhar no Mikrotik.

Agora vem o mais simples: criar a p??gina ASP.NET. Voc?? pode utilizar qualquer linguagem de programa????o que possa usar TCP na comunica????o e que a API suporte: PHP, Delphi, C, C++, C#, Flash, Ruby on Rails, Java, Python, VB.NET, etc.

Fa??a o download da classe MK, em C# (eles j?? disp??e de classes prontas para outras linguagens tamb??m), nesse link aqui e adicione no seu projeto. Agora crie um Web Form adicionando os campos que queira trabalhar. No meu exemplo, s?? quis login (username) e senha. Adicione um Button e um m??todo para executar o cadastro do usu??rio conforme exemplo abaixo:

             // Autentica????o
            MK mikrotik = new MK(“192.168.88.2”);
            if (!mikrotik.Login(“admin”, “”))
            {
                ScriptManager.RegisterStartupScript(Page, typeof(Page), “alert”, “alert(‘Houve um problema de comunica????o com o Hotspot! Por favor, tente mais tarde.’);”, true);
                mikrotik.Close();
                return;
            }

            // Requisi????o
            mikrotik.Send(“/ip/hotspot/user/add”);
            mikrotik.Send(“=name=” + nome.Text);
            mikrotik.Send(“=password=” + senha.Text, true);

            //Retorno
            string retorno = string.Empty;
            foreach (string h in mikrotik.Read())
            {
                if (retorno != string.Empty)
                    retorno += “, “;
                retorno += h;
            }

            // Fecha objeto
            mikrotik.Close();

            // Valida????o
            if (retorno.ToLower().Contains(“!done=ret=”))
                ScriptManager.RegisterStartupScript(Page, typeof(Page), “alert”, “alert(‘Cadastro realizado com sucesso!’); location.href=’http://192.168.88.1/login.html’;”, true);
            else if (retorno.ToLower().Contains(“message=failure: already have user with this name for this server”))
                ScriptManager.RegisterStartupScript(Page, typeof(Page), “alert”, “alert(‘J?? existe um usu??rio com esse nome!’);”, true);
            else
                ScriptManager.RegisterStartupScript(Page, typeof(Page), “alert”, “alert(‘Falha no cadastro: “ + retorno + “!’);”, true);

Voc?? poderia n??o s?? fazer o cadastro de usu??rio no hotspot como tamb??m executar qualquer comando (SSH) no Mikrotik. Lembrando que eu atropelei muita coisa a?? no que diz respeito a configura????o do dispositivo na qual disse logo no in??cio que n??o era minha finalidade. Voc??s observaram que a parte de programa????o ?? bem simples do que configura????o… e com certeza ??! Agora nunca ir?? sair de minha cabe??a a palavra Mikrotik Mikrotik Mikrotik Mikrotik Mikrotik … Por favor, qualquer erro ou informa????o adicional me avise!

[]’s

UPDATE: disponibilizei uma implementa????o no post http://thiagomarcal.blogspot.com.br/2016/09/implementacao-do-aspnet-c-com-o.html

Categorias
dll handler html thumbnail

Gerar Thumbnail de um HTML

Nesse artigo veremos como gerar um Thumbnail (ou Screenshot) de um HTML. Por exemplo: ??s vezes queremos ter uma pr??via de uma p??gina e n??o temos como v??-la a n??o ser abrindo-a. Ent??o geremos o thumb delas e coloquemo-as em um DataList. No caso n??o colocarei no DataList… apena mostrarei como gerar o thumb. Usaremos o componente WebsitesScreenshot. Essa DLL permite:

  • Gerar um thumb atrav??s de um arquivo HTML local (indicando o arquivo ou inserindo o c??digo-fonte);
  • Gerar um thumb atrav??s de uma URL;
  • Salvar o thumb gerado ou exibir na tela, etc.
?? um poderoso componente que voc?? pode manipular de v??rias formas e chegar a bons resultados. Irei mostrar algo bem simples: gerarei um thumb de uma URL e exibirei em uma imagem. Vamos?
Crie uma p??gina (Web Form) qualquer onde ser?? exibida o thumb. Adicione um Image e no seu atributo ImageUrl indique o valor Thumb.ashx. Agora criemos um Generic Handler chamado Thumb.ashx no projeto. Dentro do ProcessRequest coloque o seguinte trecho de c??digo ficando da seguinte forma:
public void ProcessRequest (HttpContext context) {
        WebsitesScreenshot.WebsitesScreenshot ComponenteThumb = new WebsitesScreenshot.WebsitesScreenshot();
        WebsitesScreenshot.WebsitesScreenshot.Result ResultadoCaptura = ComponenteThumb.CaptureWebpage(“http://www.google.com.br/”);
        if (ResultadoCaptura == WebsitesScreenshot.WebsitesScreenshot.Result.Captured)
        {
            System.Drawing.Image thumb = ComponenteThumb.GetImage().GetThumbnailImage(140, 110, null, new IntPtr());
            MemoryStream ms = new MemoryStream();
            context.Response.ContentType = “image/png”;
            thumb.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
            ms.WriteTo(context.Response.OutputStream);
        }
        ComponenteThumb.Dispose();
    }
N??o se esque??a de adicionar o namespace System.IO; l??. O resultado seria algo do tipo:
A depender dos par??metros que voc?? trabalhar e qualidade dos objetos, o resultado final vem a ser melhor do que isso. O que mostrei foi o b??sico do componente!
Se fosse para gerar o thumb de um arquivo HTML local ou c??digo-fonte, bastaria inserir o seu conte??do em uma string e depois usar o seguinte m??todo:
string HtmlArquivo = “Voc?? visitou o blog de Thiago Mar??al!”;
WebsitesScreenshot.WebsitesScreenshot.Result ResultadoCaptura = ComponenteThumb.CaptureHTML(HtmlArquivo);
E o resultado seria:
Est?? pequenininho, mas ?? thumb! Mais informa????es voc?? pode obter no site oficial.
Categorias
ajax html javascript

Refresh autom??tico ou execu????o de script em ciclos

Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situa????es:

  • P??gina dar refresh automaticamente a cada x segundos;
  • Executar um bloco de script (JavaScript) a cada x segundos;
  • Executar um bloco de c??digo (ASP.NET) a cada x segundos sem refresh na p??gina.

Creio que s??o essas as principais situa????es que s??o mais comumentes buscadas afim de atingir o objetivo de atualiza????o autom??tica. Pois bem, nesse artigo irei demonstrar como solucion??-las de maneira r??pida e eficaz.

Situa????o 1: Atualizar p??gina automacatimente

Para essa situa????o, que ?? a mais simples, basta inserir a seguinte tag no head da p??gina especificando a quantidade de segundos que deve aguardar para dar o refresh:

<META HTTP-EQUIV=“Refresh”
CONTENT=“10;URL=http://thiagomarcal.blogspot.com”>

Situa????o 2: Executar uma fun????o JavaScript a cada x segundos

Se derem uma olhada no post anterior do chat, ver??o que uso uma fun????o chamada setTimeout() que ir?? registrar qual fun????o ir?? executar e qual o tempo de espera. Ent??o, coloque o seguinte c??digo JS:

window.onload = function() {
    setTimeout(“FuncaoJS()”, 10000);
}
 
function FuncaoJS(){
    // Instru????es
    setTimeout(“FuncaoJS()”, 10000);
}

De forma similar, pode-se usar tamb??m a fun????o setInterval().

Situa????o 3: Executar um m??todo ASP.NET a cada x segundos sem dar refresh

J?? para o ASP.NET podemos usar o AJAX. Para isso utilizaremos um Timer e um UpdatePanel. Na p??gina, adicione o ScriptManager e insira o Timer dentro do ContentTemplate do UpdatePanel. Atribua um m??todo no evento OnTick do Timer ficando da seguinte forma:

<Ajax:ScriptManager ID=“ScriptManagerAjax” runat=“server”>
</Ajax:ScriptManager>
<Ajax:UpdatePanel ID=“Painel” runat=“server”>
<ContentTemplate>
<Ajax:Timer ID=“Temporizador” runat=“server” Interval=“10000” OnTick=“ExecutaScript_Tick”>
</Ajax:Timer>
</ContentTemplate>
</Ajax:UpdatePanel>

Se voc?? deixar o Timer fora do UpdatePanel ele ir?? realizar a execu????o do bloco de script, mas ir?? dar PostBack e, consequentemente, refresh na p??gina. Por isso, e mais amig??vel, deve-se deixar dentro.
Agora basta criar o m??todo no Code-Behind contendo o c??digo a ser executado:

protected void ExecutaScript_Tick(object sender, EventArgs e)
{
}

Tranquilo, n???