Plantillas de proyectos

PowerPortalsPro ofrece dos plantillas de proyecto que estructuran un portal completo — conectividad Dataverse, autenticación, gestores de seguridad, localización y páginas de identidad predefinidas — listas para funcionar en minutos. Ambas están disponibles una aplicación de página única de React (recomendada) y una app web de Blazor , y el conjunto de funciones de PowerPortalsPro es idéntico en ambas. Elige la pila de front-end que se adapte a tu equipo.

Instalación de las plantillas

Instala el paquete PowerPortalsPro.AspNetCore.Templates de NuGet usando la CLI de .NET. Ambas plantillas vienen en este único paquete:

Elegir una plantilla

Una vez instalado, crea un proyecto desde la CLI de .NET o desde el diálogo "Nuevo proyecto" de Visual Studio (busca "Power Portals Pro"). Hay dos plantillas disponibles — elige la que se ajuste a tu stack front-end:

React (Recomendado)

Un host ASP.NET Core combinado con una aplicación de página única React + Vite + TypeScript basada en Fluent UI React. Recomendado para nuevos portales: herramientas modernas de front-end, un bucle de desarrollo de recarga rápida y el conjunto de componentes más amplio.

Blazor

Una aplicación web ASP.NET Core Blazor construida sobre Fluent UI Blazor, con un modo de renderizado que eliges en el momento del andamiaje mediante --interactivity. Es una gran opción cuando tu equipo trabaja principalmente en C# y prefiere quedarse completamente en la pila de interfaz de .NET.

Recomendado

Ambas plantillas exponen las mismas capacidades de PowerPortalsPro: grids, editores, seguridad, localización e identidad. Sugerimos React para proyectos nuevos a menos que tu equipo tenga una razón específica para mantenerse completamente en C#, en cuyo caso la plantilla de Blazor está totalmente soportada.

La plantilla de React

La powerportalspro-react plantilla genera dos proyectos que se ejecutan juntos:

• ASP.NET Host Core — sirve a los datos y los endpoints de autenticación del framework bajo /api/* y aloja el SPA construido. Está Program.cs configurado de forma similar al host Blazor (conexión Dataverse, localización, gestores de seguridad) y expone los endpoints de autenticación JSON mediante MapAuthEndpoints<PortalUser>().
• Cliente React (.Client) — un SPA Vite + TypeScript construido sobre Fluent UI React, que consume los @powerportalspro/core, @powerportalspro/react, @powerportalspro/react-fluent, y @powerportalspro/react-charts paquetes para la capa de transporte, ganchos y componentes.
• Bucle de desarrollo — pulsa F5 (o ejecuta dotnet run) en el host y el SpaProxy lanza el servidor de desarrollo Vite por ti, con recarga en el módulo caliente en las ediciones del cliente. No se requiere terminal separada.
• La misma superficie que Blazor — ejemplos de páginas de cuentas / contactos, páginas de identidad y gestión de cuentas, manejadores de permisos de tablas, navegación y configuración de temas / sitios, todo reconstruido con componentes de React.

Modos de interactividad Blazor

La plantilla de Blazor además acepta --interactivity Server, --interactivity WebAssembly, o --interactivity Auto elegir su modo de renderizado (la plantilla de React siempre es una aplicación de una sola página, así que no tiene una opción equivalente). Elegir un modo desde el principio solo afecta al diseño generado del proyecto: PowerPortalsPro funciona correctamente en los tres. Consulta la página de Interactividad de Blazor para una comparación completa.

• Servidor — páginas interactivas que se ejecutan en el servidor a través de una conexión SignalR. Despliegue más sencillo y descarga de cliente más pequeña. Buen default cuando no estás seguro.
• WebAssembly — páginas interactivas que se ejecutan en el navegador como código compilado .NET. Estructura un proyecto separado .Client ; el servidor aloja los endpoints API consumidos por el cliente. Ideal para una experiencia de usuario rica en el lado del cliente y para descargar trabajo de interacción desde el servidor.
• Auto — renderiza la primera pintura en el servidor para una carga rápida percibida, y luego la entrega de forma transparente a WebAssembly una vez descargado el paquete cliente. Combina lo mejor de ambos a costa de un diseño de proyecto un poco más complejo.

Propina

La --interactivity bandera coincide con la bandera de la plantilla dotnet new blazor original del mismo nombre, así que todo lo que ya sepas sobre los modos de renderizado de Blazor se conserva.

Opciones de plantilla

Ambas plantillas exponen dotnet new opciones para que puedas personalizar el proyecto generado desde el principio. Pásalos en la línea de comandos, o elijalos en la pantalla de creación de proyectos de Visual Studio (y en la dotnet new interfaz interactiva). Las opciones más útiles:

• --user-audience (External | Internal | Both, por defecto Both) — quién inicia sesión. Los usuarios externos obtienen cuentas locales (registro, inicio de sesión, restablecimiento de contraseña) además de cualquier proveedor externo que habilites; Los usuarios internos inician sesión solo a través de Microsoft / Entra; Ambos permiten a cada uno.
• --include-microsoft-login — añade Iniciar sesión con Microsoft. Activado por defecto (y obligatorio para el público interno y ambos). Guarda las credenciales bajo Authentication:Microsoft.
• --include-google-login — añade Iniciar sesión con Google para usuarios externos. Proporciona credenciales OAuth y guárdalas bajo Authentication:Google.
• --include-facebook-login — añade Continuar con Facebook para usuarios externos. Provisiona una aplicación y almacena sus credenciales bajo Authentication:Facebook.
• --include-machine-translation + --machine-translation-provider (Azure | DeepL | Google) — conecta un proveedor de traducción automática para que la página de Administración de Localización pueda traducir archivos de localización. Cuando se omite, el panel de traducción permanece oculto y el registro se envía como una guía comentada.
• --include-sample-content (por defecto activado) / --empty — incluye u omite las páginas de muestra y el estilo que demuestran patrones básicos de uso.
• --interactivity (Server | WebAssembly | Auto) — el modo de renderizado Blazor (véase Modos de Interactividad arriba). No aplicable a la plantilla de React.
• --use-program-main — generar un método explícito Program.Main en lugar de sentencias de nivel superior.
• --framework (net10.0 | net9.0) — el marco objetivo.

Por ejemplo, un portal Blazor autorenderizado para ambos públicos, con inicio de sesión de Google y traducción automática de Azure:

Propina

Ejecuta dotnet new powerportalspro -h (o dotnet new powerportalspro-react -h) para listar todas las opciones y su valor predeterminado. En Visual Studio aparecen como casillas de verificación y desplegables en la pantalla de creación de proyectos.

Lo que incluye

La plantilla genera un proyecto de portal totalmente funcional con lo siguiente:

• Páginas de ejemplo — Páginas de listas de cuentas y contactos con MainGrid, además de páginas de detalle con RecordContext, editores y SubGrids.
• Páginas de identidad — Completa ASP.NET integración de Identidad Core con páginas de inicio de sesión, registro, olvidado contraseña, restablecer contraseña, autenticación en dos pasos, confirmación de correo electrónico y gestión de cuentas.
• Gestores de seguridad — Manejadores de permisos predefinidos para las tablas de Cuenta y Contacto que demuestran patrones de seguridad a nivel de tabla y registro.
• Diseño — Un MainLayout con PageLayout, menús de navegación de escritorio y móvil, configuración del sitio y soporte para temas.
• Localización — Un archivo de localización JSON (app.en.json) con etiquetas de navegación y cadenas específicas de página.
• Configuración — appsettings.json con marcadores de posición para la configuración de conexión Dataverse.

Comprender Program.cs

El Program.cs archivo es donde se registran todos los servicios y se configura la tubería de aplicaciones. Aquí tienes un desglose de cada sección:

Plantilla de React

La guía a continuación describe la plantilla Program.csde Blazor. El host de la plantilla React registra los mismos servicios centrales — AddPowerPortalsProWebServer(), el DataverseConnectionOptions, localización, manejadores de seguridad y correo electrónico — pero omite el registro específico AddPowerPortalsProWebBlazorFluentUI() de Blazor, sirve a React SPA en su lugar y expone los endpoints de autenticación mediante MapAuthEndpoints<PortalUser>() en lugar de MapAdditionalIdentityEndpoints().

Caché distribuida

La plantilla registra una caché distribuida basada en memoria. En producción, sustituye esto por una caché persistente como Redis o SQL Server para mejorar el rendimiento en varias instancias.

Registro de Fluent UI

AddPowerPortalsProWebBlazorFluentUI() registra todos los componentes de Fluent UI Blazor usados por los editores, cuadrículas y componentes de layout de PowerPortalsPro.

Servicios de servidor

AddPowerPortalsProWebServer() registra los servicios principales del lado del servidor, incluyendo la capa de acceso a datos Dataverse, la aplicación de seguridad, la tubería interceptor y la carga de localización.

Conexión Dataverse

La ConnectionOptions configuración especifica cómo se autentica el portal con Dataverse. La plantilla utiliza autenticación por secreto de cliente con credenciales almacenadas en appsettings.json o secretos de usuario.

Propina

Para las mejores prácticas de seguridad, guarda tus credenciales en Secretos de Usuario durante el desarrollo y en Azure Key Vault o en variables de entorno en producción. Nunca comprometas secretos con el control de versiones.

Configuración de localización

AddLocalizationDirectory registran directorios que contienen archivos JSON de localización. Por defecto LocalizeAllAvailableTables es true, por lo que las etiquetas, nombres de columnas y nombres de vistas se extraen automáticamente de cada tabla Dataverse. Configúralo y false usar AddTableToLocalize / AddTablesToLocalize restringir la localización a una lista explícita.

Opciones de identidad

La IdentityOptions sección configura ASP.NET configuración de Identidad Principal, como requerir confirmación por correo electrónico antes de iniciar sesión.

Traducción automática (opcional)

Genera el proyecto para --IncludeMachineTranslation conectar la traducción automática para la página de Administración de Localización en el panel de archivos Translate a panel. La plantilla añade el paquete del PowerPortalsPro.Web.Server.Translation.* proveedor elegido y su registro a continuación; elige el proveedor con --MachineTranslationProvider: Azure (el predeterminado), DeepL, o Google. Proporciona la clave del proveedor mediante configuración / secretos de usuario bajo Azure:Translation:Key, DeepL:Translation:Key, o Google:Translation:Key para que coincida.

Propina

Sin la opción, la página de Administración de Localización sigue funcionando — la visión general del pipeline y las descargas por fuente o fusionadas no se ven afectadas; Solo el panel de traducción permanece oculto, y el registro se envía como una guía comentada para que puedas activarlo manualmente más adelante.

Registro de Manejadores de Seguridad

Los manejadores de permisos se registran en el contenedor DI para controlar el acceso CRUD de cada tabla. La plantilla incluye manejadores para Cuenta (acceso completo) y Contacto (solo lectura con actualizaciones basadas en el propietario).

Configuración del correo electrónico

Configura EmailServiceOptions la dirección de correo electrónico del remitente utilizada para la confirmación de cuentas y el restablecimiento de contraseña. Esto se envía a través del servicio de correo electrónico Dataverse.

Autenticación de Microsoft (opcional)

La plantilla incluye código comentado para añadir la autenticación Microsoft Entra ID (Azure AD). Elimina los comentarios y configura tu ID de cliente y secreto para habilitar el inicio de sesión externo a través de cuentas Microsoft.

Middleware Pipeline

UsePowerPortalsProWebServer() añade el middleware PowerPortalsPro. UseLocalization() activa el sistema de localización. MapAdditionalIdentityEndpoints() Registra el punto final de inicio de sesión basado en cookies que usan las páginas de identidad.

Autenticación en dos pasos (opcional)

La plantilla incluye código comentado para habilitar la autenticación de dos factores mediante códigos basados en correo electrónico. Quita el comentario de la AuthenticatorTokenProvider opción y la AddDefaultTokenProviders() llamada para activarla.

Personalizaciones comunes

Después de dar paso al proyecto, estos son los siguientes pasos habituales:

• Añade gestores de permisos para cualquier tabla adicional de Dataverse a la que acceda tu portal.
• Cada tabla de Dataverse está localizada por defecto. Para optar por una huella más pequeña, configura LocalizeAllAvailableTables y false lista las tablas que quieres a través de AddTableToLocalize.
• Registrar ITableRecordInterceptor implementaciones para lógica de negocio que se ejecute antes o después de las operaciones de registro.
• Actualiza los menús de navegación en NavMenu.razor, DesktopNavMenu.razor, y MobileNavMenu.razor para que coincidan con las páginas de tu portal.
• Añade nuevas páginas con RecordContext, editores y cuadrículas para tus tablas personalizadas de Dataverse.