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:

https://developers.google.com/maps

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:

dotnet new sln

1	dotnet new sln

Abra a pasta do projeto MVC:

cd .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

1	cd .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

Crie um projeto C# do tipo MVC:

dotnet new mvc

1	dotnet new mvc

Volte a pasta raiz:

cd ..\..\

cd ..\..\

Adicione o projeto MVC na solução:

dotnet sln add .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

1	dotnet sln add .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

Execute o site e veja no navegador:

dotnet run --project .\src\CSharpMvcGoogleMapWithMarkers.Mvc\CSharpMvcGoogleMapWithMarkers.Mvc.csproj

1	dotnet run --project .\src\CSharpMvcGoogleMapWithMarkers.Mvc\CSharpMvcGoogleMapWithMarkers.Mvc.csproj

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.

using Microsoft.AspNetCore.Mvc;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Controllers
{
    public class StoreController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Detail()
        {
            return View();
        }        
    }
}

using Microsoft.AspNetCore.Mvc;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Controllers

{

public class StoreController : Controller

{

public IActionResult Index()

{

return View();

}

public IActionResult Detail()

{

return View();

}

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

using System;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Models
{
    public class StoreViewModel
    {
        public Guid Id { get; set; }
        public String Name { get; set; }
        public String Address { get; set; }
        public String Phone { get; set; }
        public String Latitude { get; set; }
        public String Longitude { get; set; }
    }
}

using System;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Models

{

public class StoreViewModel

{

public Guid Id { get; set; }

public String Name { get; set; }

public String Address { get; set; }

public String Phone { get; set; }

public String Latitude { get; set; }

public String Longitude { get; set; }

}

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.

(...)

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
        <li><a asp-area="" asp-controller="Store" asp-action="Index">Know our stores</a></li>
    </ul>
</div>

(...)

(...)

<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>

<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>

<li><a asp-area="" asp-controller="Store" asp-action="Index">Know our stores</a></li>

</ul>

</div>

(...)

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.

@{
    ViewData["Title"] = "Map";
}
<h2>@ViewData["StoreName"]</h2>
<h3>@ViewData["Message"]</h3>

<style>
    #map {
    height: 600px;
    }
</style>

<h2>Stores</h2>

<div id="map"></div>
<script>
    var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -30.060821, lng: -51.181687},
        zoom: 14
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.059737, -51.164658),
            title:"Store 1"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.064746, -51.157816),
            title:"Store 2"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.066648, -51.155412),
            title:"Store 3"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.051898, -51.194615),
            title:"Store 4"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.052617, -51.181038),
            title:"Store 5"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.071457, -51.191396),
            title:"Store 6"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.059410, -51.207637),
            title:"Store 7"
        });
        marker.setMap(map);
    };
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

ViewData["Title"] = "Map";

}

<h2>@ViewData["StoreName"]</h2>

<h3>@ViewData["Message"]</h3>

<style>

#map {

height: 600px;

}

</style>

<h2>Stores</h2>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

var marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059737, -51.164658),

title:"Store 1"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.064746, -51.157816),

title:"Store 2"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.066648, -51.155412),

title:"Store 3"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.051898, -51.194615),

title:"Store 4"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.052617, -51.181038),

title:"Store 5"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.071457, -51.191396),

title:"Store 6"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059410, -51.207637),

title:"Store 7"

});

marker.setMap(map);

};

</script>

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.

var map;
function initMap()
{

};

var map;

function initMap()

{

};

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.

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -30.060821, lng: -51.181687},
            zoom: 14
        });
};

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

};

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().

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -30.060821, lng: -51.181687},
            zoom: 14
        });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.059737, -51.164658),
        title:"Store 1"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.064746, -51.157816),
        title:"Store 2"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.066648, -51.155412),
        title:"Store 3"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.051898, -51.194615),
        title:"Store 4"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.052617, -51.181038),
        title:"Store 5"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.071457, -51.191396),
        title:"Store 6"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.059410, -51.207637),
        title:"Store 7"
    });
    marker.setMap(map);
};

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

var marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059737, -51.164658),

title:"Store 1"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.064746, -51.157816),

title:"Store 2"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.066648, -51.155412),

title:"Store 3"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.051898, -51.194615),

title:"Store 4"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.052617, -51.181038),

title:"Store 5"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.071457, -51.191396),

title:"Store 6"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059410, -51.207637),

title:"Store 7"

});

marker.setMap(map);

};

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.

USE [master];
GO

CREATE DATABASE [VendasDb];
GO

USE [VendasDb];
GO

CREATE TABLE [dbo].[Usuario]
	(
		[Id] INT IDENTITY(1,1) NOT NULL PRIMARY KEY, 
		[Usuario] VARCHAR(50) NOT NULL, 
		[Senha] VARCHAR(50) NOT NULL
	);
GO

INSERT 
	INTO [dbo].[Usuario]([Usuario], [Senha])
	VALUES ('tiagopariz', '123456'), 
		   ('jonatanvies', '789012'), 
		   ('alineloas', '345678');
GO

USE [master];

CREATE DATABASE [VendasDb];

USE [VendasDb];

CREATE TABLE [dbo].[Usuario]

(

[Id] INT IDENTITY(1,1) NOT NULL PRIMARY KEY,

[Usuario] VARCHAR(50) NOT NULL,

[Senha] VARCHAR(50) NOT NULL

);

INSERT

INTO [dbo].[Usuario]([Usuario], [Senha])

VALUES ('tiagopariz', '123456'),

('jonatanvies', '789012'),

('alineloas', '345678');

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.

using System;
using Microsoft.AspNetCore.Mvc;
using System.Data.SqlClient;

namespace EvitandoAInjecaoDeSQL.Web.Controllers
{
    public class ContaController : Controller
    {
        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Login(string usuario, string senha)
        {
            var connectionString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=VendasDb;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
            var consulta = "SELECT COUNT(*) FROM Usuario WHERE Usuario = '" + usuario + "' AND Senha = '" + senha + "'";

            try
            {
                using (var conexao = new SqlConnection(connectionString))
                {
                    conexao.Open();

                    using (SqlCommand comando = new SqlCommand(consulta, conexao))
                    {
                        var resultado = (int)comando.ExecuteScalar();
                        if (resultado > 0)
                            ViewBag.Mensagem = "Login efetuado com sucesso";
                        else
                            ViewBag.Mensagem = "Falha no login";
                    }
                }
            }
            catch (Exception e)
            {
                ViewBag.Mensagem = "Erro: " + e.Message;
            }

            return View();
        }
    }
}

using System;

using Microsoft.AspNetCore.Mvc;

using System.Data.SqlClient;

namespace EvitandoAInjecaoDeSQL.Web.Controllers

{

public class ContaController : Controller

{

[HttpGet]

public ActionResult Login()

{

return View();

}

[HttpPost]

public ActionResult Login(string usuario, string senha)

{

var connectionString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=VendasDb;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";

var consulta = "SELECT COUNT(*) FROM Usuario WHERE Usuario = '" + usuario + "' AND Senha = '" + senha + "'";

try

{

using (var conexao = new SqlConnection(connectionString))

{

conexao.Open();

using (SqlCommand comando = new SqlCommand(consulta, conexao))

{

var resultado = (int)comando.ExecuteScalar();

if (resultado > 0)

ViewBag.Mensagem = "Login efetuado com sucesso";

else

ViewBag.Mensagem = "Falha no login";

}

catch (Exception e)

{

ViewBag.Mensagem = "Erro: " + e.Message;

}

return View();

}

<h2>Login</h2>

@using (Html.BeginForm("Login", "conta", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <label>Usuario: </label>
    <input type="text" id="usuario" name="usuario" /><br />

    <label>Senha: </label>
    <input type="text" id="senha" name="senha" /><br />

    <input type="submit" value="Login" /><br />

    <label>@ViewBag.Mensagem</label>
}

<h2>Login</h2>

@using (Html.BeginForm("Login", "conta", FormMethod.Post, new { enctype = "multipart/form-data" }))

{

<label>Usuario: </label>

<label>Senha: </label>

<label>@ViewBag.Mensagem</label>

}

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:

SELECT COUNT(*)
    FROM Usuario 
    WHERE Usuario = 'tiagopariz' AND Senha = '123456'

SELECT COUNT(*)

FROM Usuario

WHERE Usuario = 'tiagopariz' AND Senha = '123456'

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:

SELECT COUNT(*)
    FROM Usuario 
    WHERE Usuario = 'tiagopariz' AND Senha = '' OR '1' = '1'

SELECT COUNT(*)

FROM Usuario

WHERE Usuario = 'tiagopariz' AND Senha = '' OR '1' = '1'

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:

using System;
using Microsoft.AspNetCore.Mvc;
using System.Data.SqlClient;

namespace EvitandoAInjecaoDeSQL.Web.Controllers
{
    public class ContaController : Controller
    {
        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Login(string usuario, string senha)
        {
            var connectionString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=VendasDb;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
            
            // Código com a vunerabilidade devido a concatenação
            //var consulta = "SELECT COUNT(*) FROM Usuario WHERE Usuario = '" + usuario + "' AND Senha = '" + senha + "'";

            // Forma mais segura, montando o SELECT que espera os parâmetros @usuario e @senha
            var consulta = "SELECT COUNT(*) " +
                                "FROM Usuario " +
                                "WHERE " +
                                    "Usuario = @usuario AND " +
                                    "Senha = @senha;";

            try
            {
                using (var conexao = new SqlConnection(connectionString))
                {
                    conexao.Open();

                    using (SqlCommand comando = new SqlCommand(consulta, conexao))
                    {
                        // Passando os parâmetros de SQL sem a necessidade de concatenar
                        comando.Parameters.Add(new SqlParameter("@usuario", usuario));
                        comando.Parameters.Add(new SqlParameter("@senha", senha));

                        var resultado = (int)comando.ExecuteScalar();
                        if (resultado > 0)
                            ViewBag.Mensagem = "Login efetuado com sucesso";
                        else
                            ViewBag.Mensagem = "Falha no login";
                    }
                }
            }
            catch (Exception e)
            {
                ViewBag.Mensagem = "Erro: " + e.Message;
            }

            return View();
        }
    }
}

using System;

using Microsoft.AspNetCore.Mvc;

using System.Data.SqlClient;

namespace EvitandoAInjecaoDeSQL.Web.Controllers

{

public class ContaController : Controller

{

[HttpGet]

public ActionResult Login()

{

return View();

}

[HttpPost]

public ActionResult Login(string usuario, string senha)

{

// Código com a vunerabilidade devido a concatenação

//var consulta = "SELECT COUNT(*) FROM Usuario WHERE Usuario = '" + usuario + "' AND Senha = '" + senha + "'";

// Forma mais segura, montando o SELECT que espera os parâmetros @usuario e @senha

var consulta = "SELECT COUNT(*) " +

"FROM Usuario " +

"WHERE " +

"Usuario = @usuario AND " +

"Senha = @senha;";

try

{

using (var conexao = new SqlConnection(connectionString))

{

conexao.Open();

using (SqlCommand comando = new SqlCommand(consulta, conexao))

{

// Passando os parâmetros de SQL sem a necessidade de concatenar

comando.Parameters.Add(new SqlParameter("@usuario", usuario));

comando.Parameters.Add(new SqlParameter("@senha", senha));

var resultado = (int)comando.ExecuteScalar();

if (resultado > 0)

ViewBag.Mensagem = "Login efetuado com sucesso";

else

ViewBag.Mensagem = "Falha no login";

}

catch (Exception e)

{

ViewBag.Mensagem = "Erro: " + e.Message;

}

return View();

}

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