Creación de una aplicación PhotoSharing con Blazor Web Assembly Hosted, Web API, gRPC y Duende Identity Server
Vamos a construir un sitio web sencillo donde la gente pueda publicar fotografías y comentarios.
- Todos pueden explorar imágenes y comentarios existentes.
- Sólo los usuarios autenticados pueden subir nuevas imágenes y comentarios.
- Sólo el propietario de una imagen puede editar o eliminar una imagen.
- Sólo el propietario de un comentario puede eliminar o actualizar un comentario.
Vamos a construir 3 partes.
- El FrontEnd , una aplicación web cliente Blazor combinada con su propio servidor web ASP.NET Core .
- El Backend , construido con .NET 7.0, consistirá en
- Un servicio REST para la gestión de las fotografías.
- Un servicio gRPC para los comentarios.
- El Proveedor de Identidad será nuestro propio proyecto Duende .
1.1 - Cliente frontal
- Cliente Blazor
- HTML5
- CSS 3
- Abrir cliente de ID Connect
Este proyecto interactuará con el usuario a través de un navegador mediante la construcción dinámica de una interfaz de usuario HTML y hablará con su propio servidor mediante gRPC Web y HttpClient .
1.2 - Backend para Frontend (BFF)
- Alojamiento web ASP.Net Core
- YARP
- Duende.Bff.Yarp
Este proyecto aloja y sirve la aplicación Blazor Client. También actúa como un proxy inverso para reenviar las llamadas a los backends REST y gRpc.
2.1 - Fotos Servicio REST
- Controlador API web .NET 7
- Entidad Framework Core 7.0
- Base de datos SqLite
- Autenticación del cliente Duende
2.2 - Comentarios Servicio gRPC
- Servicio .NET 7 gRPC
- Entidad Framework Core 7.0
- Base de datos SqLite
- Autenticación del cliente Duende
Estos proyectos serán responsables de almacenar los datos en el servidor y responder a las solicitudes de los clientes a través de http, json y protobuf.
- Servidor de autenticación
- Servidor de identidad 4 (Duende)
- Núcleo del marco de entidad
Este proyecto se encargará de la parte de autenticación. Emitirá tokens JWT que serán utilizados por la aplicación cliente para obtener acceso a los servicios.
Lo que ya necesitas saber:
Lo que vas a aprender:
- DESCANSAR
- gRPC
- Blazor
- Controlador API web ASP.NET Core 7.0
- Servicio ASP.NET Core 7.0 gRPC
- Entidad Framework Core 7.0
- Arrogancia / OpenAPI
- CORS
- YARP
- Autenticación y autorización
- OAuth 2 y OpenId Connect
- Servidor de identidad 4 (Duende)
- Autorización sencilla
- Autorización del propietario del recurso
- Arquitectura LIMPIA
- Pruebas unitarias con bUnit
- Interoperabilidad de JavaScript
Antes de comenzar
Al momento de escribir este tutorial, .NET Core 7.0 solo se puede usar con Visual Studio 2022. Se recomienda instalar la última versión de Visual Studio 2022 para poder trabajar con .NET Core 7.0.
- Instale la última versión de Visual Studio 2022 con la carga de trabajo de desarrollo web y ASP.NET
- Instale .NET Core 7.0 descargando el SDK de .NET Core 7.0
Es posible que desees consultar la documentación de introducción para obtener un conjunto de instrucciones actualizado.
Nuestro flujo de trabajo
Vamos a seguir unos sencillos pasos. Cada paso se centrará en una tarea y se basará en el paso anterior. Comenzaremos con proyectos simples que se irán volviendo cada vez más complejos a lo largo del camino. Por ejemplo, al principio no nos centraremos en la autenticación y la autorización. Lo agregaremos en un paso posterior.
Cómo seguir este tutorial
Si comienza desde Lab01 y sigue cada archivo readme.md, puede completar cada laboratorio y continuar con el siguiente usando su propio código. No es necesario abrir las carpetas Start ni Solution proporcionadas en este repositorio.
- Las carpetas
Start son los puntos de partida de cada paso. - Las carpetas
Solution son las versiones finales de cada paso, que se le entregan en caso de que desee verificar en qué se supone que se convertirá su proyecto al final de cada práctica de laboratorio.
Lo que tienes que hacer es abrir una carpeta Start correspondiente al laboratorio que deseas probar ( Lab01/Start para comenzar desde cero) y seguir las instrucciones que encontrarás en el archivo readme.md . Cuando haya terminado, no dude en comparar su trabajo con la solución proporcionada en la carpeta Solution .
Para EMPEZAR
- Abra la carpeta
Labs - Navegue a la subcarpeta
Lab01 - Vaya a la subcarpeta
Start - Siga las instrucciones contenidas en el archivo
readme.md para continuar
Si quieres ver la aplicación final
Crear la base de datos del servicio REST de fotos
- Abra
Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln en Visual Studio - Construya la solución
- Asegúrese de tener varios proyectos de inicio:
- Servidor de identidad
- Descansar
- gRPC
- Servidor.frontend
Iniciar la aplicación
Para iniciar sesión
- Nombre de usuario: alicia
- Contraseña: Pase123$
O
- Nombre de usuario: bob
- Contraseña: Pase123$
Una última nota antes de comenzar
Supongo que eres un programador de C# interesado en crear una aplicación web. Dependiendo de la edad que tengas, es posible que ya hayas usado páginas asp, aspx, mvc y/o razor y ahora quieras probar blazor. Es posible que ya estés familiarizado con HTML y CSS y tal vez incluso hayas jugado con algún framework de JavaScript como Angular, React o Vue.
Voy a vincular un montón de documentación sobre conceptos y tecnologías web, así que no te preocupes si no eres un experto en desarrollo web, podrás aprender todo a lo largo del camino. Sin embargo, al menos deberías dominar C# o este tutorial será difícil de seguir. La mayor parte del código que vamos a escribir será, de hecho, C#. También vamos a escribir algo de HTML, pero es fácil de aprender, por lo que no será un problema.
Los laboratorios
- Laboratorio 01: La interfaz de Blazor
- Explorando la estructura de un proyecto Blazor Web Assembly y creando nuestra primera página
- Laboratorio 02 - Frontend: Vistas adicionales
- Arquitectura LIMPIA
- Inyección de dependencia
- Uso de bibliotecas Blazor adicionales a través de paquetes NuGet
- Rutas
- Enlace de datos
- Manejo de eventos
- Laboratorio 03: Frontend: diseñar la interfaz de usuario con MatBlazor
- Diseño de materiales
- matblazor
- Páginas de diseño
- Laboratorio 04 - Frontend - Bibliotecas y componentes de clases Razor
- Crear una biblioteca de clases de Razor
- Usar una biblioteca de clases de Razor desde dentro de un proyecto
- Componentes de maquinilla de afeitar
- Componentes padre e hijo
- Propiedades
- Devoluciones de llamadas de eventos
- Laboratorio 05 - Backend: API web con ASP.NET Core 7.0 y Visual Studio 2022
- Protocolo DESCANSO
- API web de Asp.NET Core
- Controladores
- Comportamiento
- Rutas
- Vinculante
- Núcleo del marco de entidad
- JSON
- Arrogancia / OpenAPI
- Laboratorio 06 - Frontend: Conexión con el Backend
- Cliente HTTP
- Configuración de HttpClient
- GetFromJsonAsync
- PostAsJsonAsync
- PutAsJsonAsync
- EliminarAsync
- LeerDeJsonAsync
- CORS
- YARP
- Laboratorio 07 - Frontend: Comentarios
- Arquitectura más LIMPIA
- Más componentes
- Laboratorio 08: Backend: gRPC con ASP.NET Core 7.0 y Visual Studio 2022
- Arquitectura más LIMPIA
- gRPC
- protobuf
- gRPC en Asp.Net Core
- Laboratorio 09 - Frontend: Conexión con el Backend
- Web gRPC
- Cliente web gRPC en .NET Core
- Configuración
- CORS
- YARP
- Laboratorio 10 - Seguridad: Autenticación y Autorización
- Servidor de identidad Duende
- Configuración del servicio REST para la autenticación de portador JWT
- Configuración del servicio gRPC para la autenticación de portador JWT
- Configuración del cliente Blazor para la autenticación de portador JWT
- Autorización simple con el atributo Authorize
- Recuperar y pasar tokens de portador JWT utilizando el marco
Duende.Bff.Yarp
- Laboratorio 11: Seguridad: autorización basada en recursos
- Servicio de autorización
- Políticas
- Requisitos
- Manipuladores
- Laboratorio 12: Optimización del rendimiento
- División de tablas de Entity Framework
- Descargar un archivo desde un servicio REST Web Api
- Almacenamiento en caché del navegador
- Laboratorio 13 - Validación
- Anotaciones de datos
- Validación fluida en el servicio principal
- Validación fluida en el servicio REST ASP.NET Core
- Validación fluida en Blazor con Blazored.FluentValidation
- Laboratorio 14: Pruebas unitarias de componentes Blazor con bUnit
- Pruebas unitarias
- Burlón
- xUnidad
- Cantidad mínima de pedido
- bUnidad
- Laboratorio 15 - Interoperabilidad Blazor/Javascript
- IJSRuntime
- Llamar a una función de JavaScript en ASP.NET Core Blazor
- Llame a métodos .NET desde funciones de JavaScript en ASP.NET Core Blazor
- Aislamiento de Blazor JavaScript y referencias a objetos
- Prospecto
- exif.js
