Liberando o WebAPI

Liberando o WebAPI para o acesso do AngularJS

Olá pessoal, hoje eu vou falar um pouco sobre uma experiência que passei esses dias com WebAPI e o AngularJS. O que eu gostaria de fazer é deixar o AngularJS acessar o meu WebAPI (Web Service) não imporando onde estava o meu serviço e onde estava o meu AngularJS.

Como você já deve saber, o AngularJS basicamente é JavaScript e a execução dele é feita pelo browser. Quando você desenvolve um serviço, é necessário se preocupar com a segurança via token, acesso ao serviço, senha, mas também com a liberação de acesso direto por um JavaScript e endereço do servidor.

Quando você está no mesmo domínio, o acesso funciona perfeitamente, pois o serviço sabe quando o requisitou, mas quando você fala de outro domínio como por exemplo um localhost para um endereço www, o acesso será bloqueado e uma mensagem no AngularJS será mostrada.

A mensagem retornada para o seu JavaScript será No Access Control Allow Origin ou o famoso CORS muito falado na Internet. Para liberar o acesso, é necessário mexer na configuração do arquivo WebApiConfig.cs dentro do seu projeto.

Como a Microsoft trabalha bem e sabe desses possíveis problemas, ela desenvolveu um plugin que já cuida disso pra gente e eu vou mostrar como ele funciona.

O primeiro passo é acessar o NuGet pela ferramenta Visual Studio e procurar pelo nome Microsoft.AspNet.Cors. Veja a figura 1.1.

Figura 1.1 - Acessando o NutGet.

Instale o plugin dentro do seu projeto WebAPI e depois acesse a pasta App_Start/WebApiConfig.cs.

Normalmente, o acesso é liberado de um determinado domínio para acesso, não é aconselhável liberar para todo mundo, isso porque fogue um pouco da segurança.

Dentro do método Register(HttpConfiguration config) coloque o seguinte código. Código 1.1.

Código 1.1 - Configurando acesso

using System.Web.Http;
using System.Web.Http.Cors;

public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*",
            "*");
        config.EnableCors(cors);

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

Para fazer logo o teste de localhost eu descidi liberar todo o acesso no WebAPI, depois de fazer o teste eu fecho para um endereço específico.

As duas linhas de código que libera todo o acesso está logo no início, primeira parte do código. Veja o código 1.2.

Código 1.2 - Liberando acesso

using System.Web.Http;
using System.Web.Http.Cors;

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Você pode liberar por método, pode liberar por requisição, pode liberar por cabeçalho e muito mais. O primeiro asterisco pode ser colocado endereço de origem do acesso, depois o header e depois o método.

Como eu quis liberar tudo para testar coloquei o asterisco e coloquei para habilitar o CORS com o método EnableCors.

Fica bem simples fazer assim. Depois disso basta usar o seu JavaScript para acessar e tudo funciona.

Espero que tenha ajudado e qualquer dúvida pode entrar em contato pelo site www.mauriciojunior.org.