C# e Mvc: mapa do Google com marcadores

Você já precisou colocar um mapa em seu site ou aplicativo? E este mapa precisaria mostrar vários locais, como unidades comerciais de um empresa com filiais? Neste artigo eu mostro como exibir um mapa usando a API Google e adicionar os devidos marcadores em um site feito em C# e MVC.

Mas primeiro, você vai precisar de uma chave do Google API Maps, que pode ser adquirida no endereço:

Chave na mãe, vamos criar uma pasta chamada CSharpMvcGoogleMapWithMarkers e dentro dela incluir outra chamada src e então abrir no Visual Studio Code.

Se você ainda não usou o VS Code e/ou ainda usa apenas o Visual Studio convencional, eu fiz um artigo para quebrar  o gelo com este editor opensource da Microsoft.

Dentro da pasta src, crie outra pasta chamada CSharpMvcGoogleMapWithMarkers.Mvc, volte na pasta raiz e abra esta pasta no terminal e vá digitando os comandos a seguir:

Crie uma solução, para que seja possível abrir no Visual Studio convencional:

Abra a pasta do projeto MVC:

Crie um projeto C# do tipo MVC:

Volte a pasta raiz:

Adicione o projeto MVC na solução:

Execute o site e veja no navegador:

A saída do terminal será esta, onde o VS Code vai informar a URL local para testar, normalmente https://localhost:5001 ou http://localhost:5000.

Copie e cole no navegador o endereço e confira a página:

Crie um novo controller, chamado StoreController, que será uma tela com um mapa e ponto onde há lojas de uma empresa. Para isso, clique o botão direito sobre a pasta Controllers, clique em New file e defina o nome como StoreController.cs.

Clique o botão direito sobre a pasta Models, clique em New file e defina o nome como StoreViewModel.cs.

Para facilitar, adicione um novo item de menu chamado Know our stores que abre a action Index do controller Store, para isto edite o arquivo Views/Share/_Layout.cshtml.

 

Clique o botão direito sobre a pasta Views, clique em New folder e digite Store, em seguida clique o botão direito sobre Store e em New file e defina o nome como Index.cshtml.

Explicando o código Javascript do mapa

Declaramos uma variável chamada map e criamos uma função initMap (), serão informadas as coordenadas inciais e logo após definido os marcadores.

Agora vamos definir a posição e o zoom do mapa, instanciando um novo objeto google.maps.Map, que recebe os parâmetros  que informa qual a div que será renderizado o mapa, as coordenadas e o zoom.

Se você quiser entender melhor como funciona o Zoom e demais opções, clique no link abaixo para a documentação do google:

https://developers.google.com/maps/documentation/javascript/tutorial

Agora, com o mapa pronto, é adicionar os marcadores, para isso é só instanciar um objeto do tipo google.maps.Marker e usar a função setMap().

Segue a documentação do Google sobre marcadores:

https://developers.google.com/maps/documentation/javascript/markers

Ao carregar o mapa, todas as lojas serão exibidas como marcadores no mapa.

Pronto, agora temos uma mapa com marcadores de locais.

Este projeto pode ser conferido no meu repositório do GitHub:

  • https://github.com/tiagopariz/CSharpMvcGoogleMapWithMarkers

C#: evitando a Injeção de SQL

A Injeção de SQL, ou em inglês SQL Injection, é uma vulnerabilidade que permite que algum usuário malicioso possa executar uma instrução em SQL dentro da aplicação, aproveitando uma brecha em uma consulta que permita acesso ao banco de dados.

Para demonstrar um exemplo desta vulnerabilidade, vamos criar um banco de dados de vendas, onde temos nossa tabela de usuários com alguns informações.

Abra o Visual Studio Code, e crie uma pasta chamada EvitandoAInjecaoDeSQL, e dentro dela outra chamada src. Em EvitandoAInjecaoDeSQL crie uma solução usando o comando dotnet new sln e logo em seguida abra a pasta src, adicione e logo abra um nova pasta chamada EvitandoAInjecaoDeSQL.Web e adicione um projeto do tipo MVC usando o comando dotnet new mvc, volte até a pasta EvitandoAInjecaoDeSQL e adicone o projeto na solução usando o comando  dotnet sln add .\src\EvitandoAInjecaoDeSQL.Web\EvitandoAInjecaoDeSQL.Web.csproj.

Adicione um controller na pasta Controllers do projeto de MVC chamado ContaController.cs e uma view chamada Login.cshtml na pasta Views/Conta.

A tela de login deve ser semelhante a esta, após abrir o site e digitar uma senha válida:

O nosso site está funcionando, então agora vamos aplicar o SQL Injection para verificar a vulnerabilidade. Como vimos, o campo usuário e senha só efetua login se for digitado um nome de usuário e uma senha correta. Mas vamos tentar burlar isto.

Para entdenr o que acontece no lado do banco de dados ao digitar o usuário e senha da captura de tela, vamos analisar a intrução SQL montada pelo aplicativo:

Se executarmos a instrução acima no SQL Server, temos o resultado 1, que é a informação que permite que o sistema permita o acesso.

Mas esta instrução é facilmente alterada usando alguns caracteres de ‘ (apóstrofo), fazendo a consulta ficar assim:

Que retorna um valor positivo, mesmo sem informar a senha.

Mas como isto é possível sem editar o SQL que está no código? Simples, pois a forma a instrução foi montada, permite que seja alterada, pois o SELECT é uma concatenação dos campos que são enviados no post e a o corpo da instrução, o C# não sabe o que é filtro e o que é comando de banco, ele monta primeiro uma string e depois executa no banco. Sendo assim, vamos recriar esta consulta direto no campo de senha.

Antes, tente digitar uma senha errada, para conferir se formulário está funcionando e acessando os dados corretamente.

Agora vamos explorar a vulnerabilidades, digitando no campo de senha ‘ OR ‘1’ = ‘1 e clique em login.

E acabamos de ser invadidos por uma falha bem simples no site, pois é possivel “editar” a instrução SQL antes de enviar. Este tipo de falha, pode ser tão grave que é até pode permitir acessar e alterar informações do próprio sistema operacional, dependendo da configuração do banco de dados.

Mas como consertamos este caso específico? A solução a seguir vai resolver este tipo de abertura, mas há outros tipos de falahas que podem precisar uma solução mais avançada. O que vamos fazer é passar parâmetros para o banco de dados em vez de montar todo o sql de uma vez, para isso, em vez de usar uma concatenação, mas nomer estes dados usando um @ (arroba antes) antes, então, para isto, vou comentar o código vulnerável do arquivo ContaController.cs e adicionar a forma mais segura, como segue:

Com isto, temos um código mais seguro. Outra solução, seria usar frameworks ORM, como Entity Framework ou NHibernate.

O projeto completo está disponível no meu GitHub:

https://github.com/tiagopariz/EvitandoAInjecaoDeSQL

Obrigado e um bom dia a todos.

 

VB.NET MVC: traduzindo do C# as aulas do Cleyton Ferrari

Cleyton Ferrari foi um dos primeiros profissionais de desenvolvimento C# brasileiros que fez um curso bem estruturado sobre MVC e Entity Framework, explicando nos detalhes como funcionava cada elemento, e melhor, tudo gratuito no Youtube.

Na época eu trabalhava com VB.NET, e por isso eu precisei traduzir o projeto didático dele para a linguagem que eu usava. Foi uma tarefa com dois ganhos, o primeiro que serviu para eu treinar meu C# que ainda era bem básico e segundo para entender a fundo o conceito do MVC e ORM com Entity Framework.

Não havia me preocupado em criar um post em 2013, e mal sabia usar o GitHub, mas guardei os fontes lá, e eles existem até hoje, por isso resolvi escrever para registrar isso aqui. Mas antes de entrar no meu repositório você quiser conferir os cursos dele, que apesar de ser feito para o ASP.NET MVC 3 ainda é bem válido:

E acesse aqui os projetos traduzido para VB.NET:

https://github.com/tiagopariz/CleytonFerrari