Construindo um aplicativo PhotoSharing com Blazor Web Assembly hospedado, API Web, gRPC e Duende Identity Server
Vamos construir um site simples onde as pessoas possam postar fotos e comentários.
- Todos podem navegar pelas fotos e comentários existentes.
- Somente usuários autenticados podem fazer upload de novas fotos e comentários.
- Somente o proprietário da imagem pode editar ou excluir uma imagem.
- Somente o proprietário do comentário pode excluir ou atualizar um comentário.
Vamos construir 3 partes.
- O FrontEnd , um aplicativo Web cliente Blazor emparelhado com seu próprio host Web ASP.NET Core .
- O Backend , construído em .NET 7.0, consistirá em
- Um serviço REST para gerenciamento das imagens
- Um serviço gRPC para os comentários
- O Provedor de Identidade será nosso próprio projeto Duende .
1.1 - Cliente FrontEnd
- Cliente Blazor
- HTML5
- CSS3
- Abra o cliente Id Connect
Este projeto irá interagir com o usuário através de um navegador, construindo dinamicamente uma interface de usuário HTML e conversará com seu próprio servidor usando gRPC Web e HttpClient .
1.2 - Backend para Frontend (BFF)
- Host da Web ASP.Net Core
- YARP
- Duende.Bff.Yarp
Este projeto hospeda e atende o aplicativo Blazor Client. Ele também atua como um proxy reverso para encaminhar as chamadas para os back-ends REST e gRpc.
2.1 - Serviço REST de fotos
- Controlador de API da Web .NET 7
- Entidade Framework Núcleo 7.0
- Banco de dados SQLite
- Autenticação de cliente Duende
2.2 - Comentários do serviço gRPC
- Serviço gRPC .NET 7
- Entidade Framework Núcleo 7.0
- Banco de dados SQLite
- Autenticação de cliente Duende
Esses projetos serão responsáveis por armazenar os dados no servidor e responder às solicitações dos clientes através de http, json e protobuf.
- Servidor de autenticação
- Servidor de Identidade 4 (Duende)
- Núcleo do Entity Framework
Este projeto cuidará da parte de autenticação. Ele emitirá tokens JWT que serão usados pela aplicação cliente para obter acesso aos serviços.
O que você já precisa saber:
O que você vai aprender:
- DESCANSAR
- gRPC
- Blazor
- Controlador de API Web ASP.NET Core 7.0
- Serviço gRPC do ASP.NET Core 7.0
- Entidade Framework Núcleo 7.0
- Arrogância / OpenAPI
- CORS
- YARP
- Autenticação e Autorização
- OAuth 2 e Open Id Connect
- Servidor de Identidade 4 (Duende)
- Autorização Simples
- Autorização do proprietário do recurso
- Arquitetura LIMPA
- Teste de unidade com bUnit
- Interoperabilidade Javascript
Antes de começar
No momento da redação deste tutorial, o .NET Core 7.0 só pode ser usado com o Visual Studio 2022. É recomendável instalar a versão mais recente do Visual Studio 2022 para trabalhar com o .NET Core 7.0.
- Instale a versão mais recente do Visual Studio 2022 com o ASP.NET e a carga de trabalho de desenvolvimento web
- Instale o .NET Core 7.0 baixando o SDK do .NET Core 7.0
Você pode consultar a documentação de introdução para obter um conjunto atualizado de instruções.
Nosso fluxo de trabalho
Vamos seguir alguns passos simples. Cada etapa se concentrará em uma tarefa e será baseada na etapa anterior. Começaremos com projetos simples que se tornarão cada vez mais complexos ao longo do caminho. Por exemplo, inicialmente não nos concentraremos em autenticação e autorização. Iremos adicioná-lo em uma etapa posterior.
Como seguir este tutorial
Se você começar no Lab01 e seguir cada readme.md, poderá concluir cada laboratório e continuar no seguinte usando seu próprio código. Não há necessidade de abrir as pastas Start nem Solution fornecidas neste repositório.
- As pastas
Start são os pontos de partida de cada etapa. - As pastas
Solution são as versões finais de cada etapa, fornecidas a você caso você queira verificar como seu projeto deve se tornar ao final de cada laboratório.
O que você precisa fazer é abrir uma pasta Start correspondente ao laboratório que deseja experimentar ( Lab01/Start para começar do zero) e seguir as instruções que você encontra no arquivo readme.md . Quando terminar, fique à vontade para comparar seu trabalho com a solução fornecida na pasta Solution .
Para COMEÇAR
- Abra a pasta
Labs - Navegue até a subpasta
Lab01 - Navegue até a subpasta
Start - Siga as instruções contidas no arquivo
readme.md para continuar
Se você quiser ver a aplicação final
Crie o banco de dados do serviço REST de fotos
- Abra
Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln no Visual Studio - Construa a solução
- Certifique-se de ter vários projetos de inicialização:
- Servidor de Identidade
- Descansar
- gRPC
- Frontend.Servidor
Inicie o aplicativo
Para fazer logon
- Nome de usuário: alice
- Senha: Senha123$
Ou
- Nome de usuário: bob
- Senha: Senha123$
Uma última nota antes de começarmos
Presumo que você seja um programador C# interessado em construir um aplicativo web. Dependendo da sua idade, você pode já ter usado páginas asp, aspx, mvc e/ou razor e agora quer experimentar o blazor. Você já deve estar familiarizado com HTML e CSS e talvez até tenha brincado com algum framework javascript como Angular, React ou Vue.
Vou vincular uma tonelada de documentação sobre conceitos e tecnologias da web, então não se preocupe se você não for um especialista em desenvolvimento web, você pode aprender tudo ao longo do caminho. Você deve pelo menos ser fluente em C#, ou este tutorial será difícil de seguir. A maior parte do código que escreveremos será, na verdade, C#. Também vamos escrever um pouco de HTML, mas é fácil de aprender, então não será um problema.
Os laboratórios
- Laboratório 01 – O front-end do Blazor
- Explorando a estrutura de um projeto Blazor Web Assembly e criando nossa primeira página
- Laboratório 02 – Frontend: visualizações adicionais
- Arquitetura LIMPA
- Injeção de Dependência
- Usando bibliotecas Blazor adicionais por meio de pacotes NuGet
- Rotas
- Vinculação de dados
- Tratamento de eventos
- Laboratório 03 – Frontend: estilizando a UI com MatBlazor
- Design de materiais
- MatBlazor
- Layout de páginas
- Laboratório 04 - Frontend - Bibliotecas e componentes de classes do Razor
- Criando uma biblioteca de classes Razor
- Usando uma biblioteca de classes Razor de dentro de um projeto
- Componentes de navalha
- Componentes pai e filho
- Propriedades
- Retornos de chamadas de eventos
- Laboratório 05 - Backend: API Web com ASP.NET Core 7.0 e Visual Studio 2022
- Protocolo REST
- API Web Asp.NET Core
- Controladores
- Ações
- Rotas
- Vinculativo
- Núcleo do Entity Framework
- JSON
- Arrogância / OpenAPI
- Laboratório 06 – Frontend: conectando-se com o backend
- HttpCliente
- Configuração HttpClient
- GetFromJsonAsync
- PostAsJsonAsync
- PutAsJsonAsync
- ExcluirAsync
- ReadFromJsonAsync
- CORS
- YARP
- Laboratório 07 - Frontend: comentários
- Arquitetura mais LIMPA
- Mais componentes
- Laboratório 08 – Backend: gRPC com ASP.NET Core 7.0 e Visual Studio 2022
- Arquitetura mais LIMPA
- gRPC
- protobuf
- gRPC no Asp.Net Core
- Laboratório 09 – Frontend: conectando-se com o backend
- Web gRPC
- Web do cliente gRPC no .NET Core
- Configuração
- CORS
- YARP
- Laboratório 10 - Segurança: Autenticação e Autorização
- Servidor de identidade Duende
- Configurando o serviço REST para autenticação de portador JWT
- Configurando o serviço gRPC para autenticação de portador JWT
- Configurando o cliente Blazor para autenticação de portador JWT
- Autorização simples com o atributo Authorize
- Recuperando e passando JWT Bearer Tokens usando a estrutura
Duende.Bff.Yarp
- Laboratório 11 - Segurança: autorização baseada em recursos
- Serviço de Autorização
- Políticas
- Requisitos
- Manipuladores
- Laboratório 12 – Otimização de desempenho
- Divisão de tabela do Entity Framework
- Baixe um arquivo de um serviço REST Web API
- Cache do navegador
- Laboratório 13 - Validação
- Anotações de dados
- Validação Fluente no Serviço Principal
- Validação Fluente no Serviço REST ASP.NET Core
- Validação Fluente no Blazor com Blazored.FluentValidation
- Laboratório 14 - Teste de unidade de componentes do Blazor com bUnit
- Teste de unidade
- Zombando
- xUnidade
- Quantidade mínima
- bUnidade
- Laboratório 15 – Interoperabilidade Blazor/Javascript
- Tempo de execução IJS
- Chame uma função JavaScript no ASP.NET Core Blazor
- Chame métodos .NET de funções JavaScript no ASP.NET Core Blazor
- Isolamento de JavaScript do Blazor e referências de objetos
- Folheto
- exif.js
