Alura > Cursos de Programação > Cursos de .NET > Conteúdos de .NET > Primeiras aulas do curso Segurança com ASP.NET Core: coordene aplicações e centralize a segurança

Segurança com ASP.NET Core: coordene aplicações e centralize a segurança

Integração do projeto MVC com a Web API - Apresentação

Apresentando o curso e o instrutor

Olá! Seja bem-vindo ao curso Segurança com a ASP.NET Core Parte 3. Já nos perguntamos o que é necessário para integrar várias aplicações da ASP.NET Core com segurança. Neste curso, continuaremos nossa jornada com foco na integração entre MVC, Web API e autenticação centralizada com login social e resiliência com segurança.

Meu nome é Marcelo Oliveira, faço parte da Escola de Programação e, para fins de acessibilidade, vou me autodescrever.

Audiodescrição: Marcelo é um homem branco, com cabelos e barba pretos, olhos escuros e usa óculos. Ele veste uma camisa preta e está diante de uma parede iluminada por tons de azul e roxo.

Requisitos e público-alvo do curso

Antes de começarmos, é importante que já tenhamos concluído os cursos anteriores desta formação, que são Segurança com a ASP.NET Core Proteja Aplicações Web e Segurança com a ASP.NET Core Parte 2, onde tratamos da segurança da Web API. Além disso, precisamos ter um conhecimento básico de ASP.NET Core MVC, Web API, autenticação, cookies e JWT, que serão de grande ajuda durante este curso. Se possuímos esse conhecimento, ele será bastante útil.

Este curso é destinado a pessoas desenvolvedoras de software que desejam aplicar integração segura entre aplicações ASP.NET Core, autenticar usuários com provedores de identidade externos, controlar a sessão de forma adequada e proteger as aplicações utilizando mecanismos de resiliência.

Explorando os tópicos do curso

Vamos explorar juntos os seguintes tópicos neste curso:

Vamos começar com a integração entre MVC e Web API. Aprenderemos a consumir uma Web API protegida em uma aplicação MVC utilizando HTTP Client. Além disso, integraremos a autenticação via JWT nas APIs com autenticação via cookie no MVC, tudo conectado por um único provedor de identidade.

Também aprenderemos a implementar o login social, permitindo que usuários façam login com um provedor externo, como o Google, ou através de provedores como o Facebook e a Microsoft. Implementaremos um mecanismo de logout seguro para limpar os cookies de sessão nos três projetos de forma segura.

Aplicaremos estratégias de retentativa e limitação de taxa para proteger os serviços contra instabilidades ou ataques de força bruta. Tudo isso será feito na mesma solução da clínica Volmed, com seus três projetos separados: o MVC, o Web API e o Identity.

Utilizando recursos adicionais

Aproveitemos os recursos da plataforma. Além dos vídeos, temos também as atividades práticas e o apoio da comunidade no fórum e no Discord.

Vamos começar?

Integração do projeto MVC com a Web API - Comunicação entre MVC e Web API

Integrando segurança e boas práticas em projetos AspNet Core

Na Aula 1, abordamos a integração do projeto MVC com a Web API. Neste novo curso, parte 3, vamos integrar segurança e utilizar boas práticas em projetos AspNet Core, evoluindo a arquitetura da clínica Volmed.

Temos três projetos separados: o projeto MVC, denominado medvol.web, que foi apresentado na parte 1 da formação de segurança com AspNet Core; o projeto medvol.web.api, que é o serviço de dados introduzido na parte 2 do curso anterior; e um novo projeto, medvol.identity, responsável pela identidade e segurança da nossa solução. Esta solução do Visual Studio já foi baixada como projeto inicial deste curso na etapa de preparação do ambiente.

Comunicando entre projetos MVC e Web API

Agora que temos esses três projetos criados e configurados, é hora de começar a comunicação entre os projetos MVC e Web API. Sem uma integração adequada, o nosso MVC não consegue se comunicar corretamente com o projeto Web API. Para resolver isso, vamos abrir o projeto medvol.web e localizar na pasta "Controllers" o arquivo medvocontroller.cs.

Dentro deste arquivo, na linha 23, encontramos o método listar. Na parte 1 desta formação, o projeto medvol.web, na classe medcontroller, já possuía o método listar, que acessava o banco de dados para obter uma listagem de médicos e exibir para os usuários. Agora, na parte 3, o projeto MVC não conta mais com o banco de dados, sendo necessário acessar a Web API para realizar as operações.

Implementando a interface IMedVollApiService

Por exemplo, a listagem de médicos agora existe tanto no projeto MVC quanto na Web API. Portanto, o método listar do projeto MVC precisa se comunicar com o endpoint de listagem de médicos do projeto Web API. O código entre as linhas 25 e 30 foi modificado para acessar o projeto Web API. Na linha 25, há a referência de um objeto chamado medvol API Service, que pertence a uma interface existente no projeto, a imedvol API Service.

Vamos examinar essa interface. Na linha 13, temos a declaração do objeto medvol API Service. Navegando para a declaração com a tecla F12, encontramos a interface com os métodos que representam as operações de consulta e de médicos. Precisamos criar uma classe concreta que implemente essas operações.

Na pasta "Services", adicionamos uma nova classe chamada medvol API Service para implementar a interface imedvol API Service. Após criar a classe no Visual Studio, apagamos o código gerado e copiamos o código da transcrição do vídeo, que contém a implementação dos métodos da interface.

Construindo a classe MedVollApiService

Agora, temos a classe MedVollApiService que implementa a interface IMedVollApiService e também uma classe base chamada BaseHttpService. Vamos começar a construir essa classe passo a passo.

Primeiro, criamos a estrutura básica da classe MedVollApiService:

namespace MedVoll.Web.Services
{
    public class MedVollApiService
    {

    }
}

Em seguida, implementamos a interface IMedVollApiService e herdamos da classe BaseHttpService:

using MedVoll.Web.Dtos;
using MedVoll.Web.Interfaces;
using MedVoll.Web.Models;

namespace MedVoll.Web.Services
{
    public class MedVollApiService : BaseHttpService, IMedVollApiService
    {
        // Implementação dos métodos
    }
}

Definindo URIs e métodos na MedVollApiService

Dentro da classe MedVollApiService, definimos as URIs para os endpoints da API:

class ApiUris
{
    public static string ListarConsultas = "api/Consulta/Listar";
    public static string ObterFormularioConsulta = "api/Consulta/Formulario";
    public static string SalvarConsulta = "api/Consulta/Salvar";
    public static string ExcluirConsulta = "api/Consulta/Excluir";

    public static string ListarMedicos = "api/Medico/Listar";
    public static string ObterFormularioMedico = "api/Medico/Formulario";
    public static string SalvarMedico = "api/Medico/Salvar";
    public static string ExcluirMedico = "api/Medico/Excluir";
    public static string ListarMedicosPorEspecialidade = "api/Medico/especialidade";
}

Agora, vamos implementar o método ListarMedicos, que será utilizado para obter a listagem de médicos:

public async Task<PaginatedList<MedicoDto>> ListarMedicos(int? page)
{
    var uri = $"{ApiUris.ListarMedicos}?page={page}";
    return await GetAsync<PaginatedList<MedicoDto>>(uri);
}

Utilizando o HttpClient para requisições HTTP

Esse método utiliza o GetAsync da classe base BaseHttpService para realizar a requisição HTTP. Vamos ver como o GetAsync é implementado:

protected async Task<T> GetAsync<T>(string uri, params object[] param)
{
    var requestUri = string.Format(uri, param);

    foreach (var par in param)
    {
        requestUri += string.Format($"/{par}");
    }

    using HttpClient httpClient = await GetHttpClientAsync();

    var json = await httpClient.GetStringAsync(requestUri);
    return JsonConvert.DeserializeObject<T>(json);
}

Esse método monta a URI, cria um HttpClient, faz a requisição e deserializa a resposta JSON em um objeto do tipo especificado.

Conectando o MVC com a WebAPI

Voltando à classe MedVollApiService, encontramos cada uma das operações, como na linha 36, listar consulta, e na linha 39, a chamada para o método getAsync, que vimos na classe BaseHttpService. A classe MedVollApiService cria uma ponte entre nosso projeto MVC e o projeto WebAPI. Isso é feito utilizando HttpClient para chamar cada um dos métodos, resolvendo as rotas e obtendo os valores da WebAPI, preparando-os para que o MVC possa trabalhar com eles.

Vamos analisar o fluxo que queremos concluir com a nova classe MedVollApiService. Tudo começa no controller MVC, que recebe uma requisição do usuário no navegador. O controller MVC chama, na classe MedVollApiService, cada um dos métodos necessários para interagir com médicos ou consultas. Para cada método, há um método HTTP subjacente, que pode ser get para obter valores, put ou post para criar um novo valor no banco de dados ou recuperar esse valor, ou delete para remover uma consulta ou um médico.

Configurando o HttpClient e finalizando a integração

Além disso, a classe MedVollApiService trabalha com o objeto HttpClient, responsável por fazer as requisições HTTP. Também temos uma configuração importante, que é o base URI. Esse base URI é o endereço base para o serviço que estamos criando, que é nossa WebAPI.

À direita, temos as operações get, put, post ou delete. Essas requisições precisam de um endereço, que é nossa URI. O MedVollApiService constrói essa URI, relativa ao projeto WebAPI. O objeto HttpClient faz a requisição, utilizando o método HTTP, chamando a WebAPI. Depois disso, a WebAPI traz a resposta, que pode ser um médico ou uma lista de médicos, por exemplo. A classe MedVollApiService converte o resultado, que é uma string JSON, em um DTO ou uma lista de médicos ou consultas. No final, esse valor ou lista é retornado ao controller MVC, que exibe, por exemplo, uma listagem de médicos.

Neste primeiro vídeo, vimos o uso do HttpClient para consumir a WebAPI. É necessário configurar e utilizar o HttpClient dentro do projeto MVC para realizar essas operações HTTP, utilizando a WebAPI como a ponta que responde a cada operação HTTP com o HttpClient. Também vimos a integração entre as camadas utilizando DTOs. Os dados trafegam da WebAPI para nosso projeto MVC, utilizando DTOs ou listas de DTOs. Isso garante uma separação clara das responsabilidades e facilita a manutenção e a segurança da aplicação.

Ao criar essa camada de serviço, separamos responsabilidades, o que facilita os testes, a manutenção e a segurança. No próximo vídeo, começaremos com um serviço que o MVC pode consumir para acessar os dados da nossa WebAPI.

Integração do projeto MVC com a Web API - Consumo de Web API com HttpClient

Explicando a integração entre projetos MVC e WebAPI

No último vídeo, explicamos a diferença entre os projetos MVC e WebAPI e também introduzimos uma nova classe de serviço, a classe BedVol API Service, que foi criada para fazer a ponte entre esses dois projetos. No entanto, o nosso projeto MVC ainda não está integrado ao projeto WebAPI. Além disso, a classe HTTP Client, que existe dentro do projeto MVC, ainda não está configurada corretamente.

Para resolver isso, vamos configurar o projeto MVC para que ele possa se conectar adequadamente com a WebAPI. Vamos abrir o projeto medvol.web e localizar, dentro da pasta "Service", o arquivo BaseHttpService. No final da classe, na linha 78, encontramos o método getHttpClientAsync, responsável pela criação de um objeto HTTP Client, que fará a comunicação com a WebAPI.

Configurando o método getHttpClientAsync

Primeiro, vamos definir o método getHttpClientAsync como assíncrono, pois ele irá lidar com operações de rede que podem demorar. Para isso, utilizamos o seguinte código:

private async Task<HttpClient> GetHttpClientAsync()

Na linha 80, observamos que a criação do objeto HTTP Client não utiliza o operador nil. Em vez disso, estamos utilizando uma classe chamada HTTP Client Factory, que significa "fábrica de HTTP Client" em inglês. Chamamos da classe HTTP Client Factory o método createClient, passando como argumento o nome da nossa API, que é definido por uma configuração: configuration medvol.webapi.name.

HttpClient httpClient = _httpClientFactory.CreateClient(_configuration["MedVoll.WebApi.Name"] ?? "");

Adicionando configurações no appsettings.json

Para configurar a nossa comunicação, precisamos ter essa configuração no projeto MVC. Atualmente, não temos uma configuração chamada medvol.webapi.name, que é o nome da nossa WebAPI. Vamos copiar o nome dessa configuração e abrir o arquivo appsettings.json. Após a última configuração na linha 8, colocamos uma vírgula e, na linha 9, adicionamos, entre aspas, o nome da nova configuração, que será o nome do nosso HTTP Client, que trabalhará com a nossa WebAPI. Essa configuração será medvol.webapi.name, e o valor dela, entre aspas, será medvol.webapi. Assim, definimos o nome da nossa WebAPI.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "MedVoll.WebApi.Name": "MedVoll.WebApi"
}

Ainda falta o endereço base para a configuração. Vamos colocá-lo no final da linha 9, seguido de uma vírgula. A próxima configuração, entre aspas, será medvol.webapi.url, e depois o valor da configuração, dois pontos, entre aspas, onde será inserido o endereço base da nossa WebAPI. Qual será esse endereço? Esse endereço pode variar, então devemos localizá-lo no último projeto dessa solução, medvol.webapi. Vamos expandir esse projeto e encontrar, dentro da pasta "properties", um arquivo de configuração chamado launchsettings.json. Ao abrir esse arquivo, na linha 9, encontraremos a URL base da aplicação, application.url, e copiaremos o valor, que é https://localhost:6001. Em seguida, voltaremos para o arquivo appsettings.json do projeto MVC e colaremos o valor dessa configuração.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "MedVoll.WebApi.Name": "MedVoll.WebApi",
  "MedVoll.WebApi.Url": "https://localhost:6001"
}

Configurando a injeção de dependência

Agora, vamos configurar a injeção de dependência para a classe medvol.app.service. Para isso, abriremos o arquivo program.cs do projeto MVC. Na linha 21, quebraremos algumas linhas e colocaremos uma configuração para realizar a injeção de dependência da interface IMedvol.Api.Service com a classe Medvol.Api.Service. Na linha 22, utilizaremos builder.Services.AddTransient, e entre os sinais de menor e maior, colocaremos a interface e a classe concreta, ou seja, IMedvol.Api.Service, Medvol.Api.Service. No final, adicionaremos parênteses e ponto e vírgula.

builder.Services.AddTransient<IMedVollApiService, MedVollApiService>();

Finalizando a configuração do HTTP Client

Precisamos terminar de configurar o HTTP Client. Após a linha 22, quebraremos algumas linhas e, na linha 24, copiaremos e colaremos da transcrição deste vídeo o restante do código para completar essa configuração. Na linha 24, temos o nome do HTTP Client, que está pegando o valor da configuração medvol.webapi.name. Na linha 25, temos a URL do nosso HTTP Client, que será a URL base da nossa WebAPI, correspondente à configuração medvol.webapi.url. Nas linhas 27 até 33, configuramos o HTTP Client com o método HttpClient.AddHttpClient, onde, na linha 28, passamos o nome do nosso HTTP Client Name. Em seguida, passamos uma configuração e, na linha 32, colocamos o endereço base para a nossa API.

var httpClientName = builder.Configuration["MedVoll.WebApi.Name"];
var httpClientUrl = builder.Configuration["MedVoll.WebApi.Url"];

builder.Services.AddHttpClient(
    httpClientName,
    client =>
    {
        // Configura o endereço-base do cliente nomeado.
        client.BaseAddress = new Uri(httpClientUrl);
    });

Com isso, completamos a configuração necessária para que o projeto MVC se comunique corretamente com a WebAPI, utilizando o HTTP Client configurado através do HTTP Client Factory.

Sobre o curso Segurança com ASP.NET Core: coordene aplicações e centralize a segurança

O curso Segurança com ASP.NET Core: coordene aplicações e centralize a segurança possui 121 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de .NET em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda .NET acessando integralmente esse e outros cursos, comece hoje!

Conheça os Planos para Empresas