Modèles de projets

PowerPortalsPro propose deux modèles de projet qui échauffent un portail complet — connectivité, authentification, gestionnaires de sécurité Dataverse, localisation et pages d’identité préconstruites — prêts à fonctionner en quelques minutes. Une application React en page unique (recommandée) et une application web Blazor sont toutes deux disponibles, et les fonctionnalités PowerPortalsPro sont identiques sur les deux. Choisissez la stack front-end qui correspond à votre équipe.

Installation des modèles

Installez le package PowerPortalsPro.AspNetCore.Templates depuis NuGet en utilisant la ligne de commande .NET. Les deux modèles sont inclus dans ce seul paquet :

Choisir un modèle

Une fois installé, créez un projet à partir de la CLI .NET ou de la boîte de dialogue « Nouveau projet » de Visual Studio (cherchez « Power Portals Pro »). Deux modèles sont disponibles — choisissez celui qui correspond à votre pile front-end :

React (recommandé)

Un hôte ASP.NET Core associé à une application React + Vite + TypeScript en une seule page construite sur Fluent UI React. Recommandé pour les nouveaux portails — outils front-end modernes, boucle de développement à rechargement rapide à chaud, et le jeu de composants le plus large.

Blazor

Une application web ASP.NET Core Blazor construite sur Fluent UI Blazor, avec un mode de rendu que vous choisissez à l’étape de l’échafaudage via --interactivity. C’est un excellent choix quand votre équipe travaille principalement en C# et préfère rester entièrement dans la pile d’interface utilisateur .NET.

Recommandé

Les deux modèles exposent les mêmes capacités PowerPortalsPro — grilles, éditeurs, sécurité, localisation et identité. Nous recommandons React pour les nouveaux projets, sauf si votre équipe a une raison précise de rester entièrement C#, auquel cas le modèle Blazor est entièrement pris en charge.

Le modèle React

Le powerportalspro-react modèle génère deux projets qui s’exécutent ensemble :

• ASP.NET Core host — sert les données et les points d’authentification du framework sous /api/* et héberge le SPA intégré. Il Program.cs est configuré de manière similaire à l’hôte Blazor (connexion Dataverse, localisation, gestionnaires de sécurité) et expose les points d’authentification JSON via MapAuthEndpoints<PortalUser>().
• Client React (.Client) — un SPA Vite + TypeScript construit sur Fluent UI React, consommant les @powerportalspro/corepaquets , @powerportalspro/react, @powerportalspro/react-fluent, et @powerportalspro/react-charts les packages pour la couche de transport, les crochets et les composants.
• Boucle de développement — appuyez sur F5 (ou exécutez dotnet run) sur l’hôte et le SpaProxy lance le serveur de développement Vite pour vous, avec un rechargement du module chaud lors des modifications du client. Aucun terminal séparé n’est nécessaire.
• Même surface que Blazor — exemples de pages Comptes / Contacts, pages d’identité et de gestion de compte, gestionnaires de permissions de table, navigation et paramètres de thème / site, tous reconstruits avec des composants React.

Modes d’interactivité Blazor

Le modèle Blazor accepte --interactivity Serverégalement , --interactivity WebAssembly, ou --interactivity Auto choisir son mode de rendu (le modèle React est toujours une application à une seule page, donc il n’a pas d’option équivalente). Choisir un mode dès le départ n’affecte que la mise en page générée du projet — PowerPortalsPro lui-même fonctionne correctement sur les trois. Consultez la page Blazor Interactivity pour une comparaison complète.

• Serveur — des pages interactives s’exécutent sur le serveur via une connexion SignalR. Déploiement le plus simple et le plus petit téléchargement client. Bon défaut quand tu n’es pas sûr.
• WebAssembly — pages interactives exécutées dans le navigateur sous forme de code compilé .NET. Échafaudage un projet séparé .Client ; le serveur héberge les points de terminaison API consommés par le client. Idéal pour une expérience utilisateur riche côté client et le déchargement du travail d’interaction depuis le serveur.
• Auto — affiche la première peinture sur le serveur pour une charge perçue rapide, puis transmet de manière transparente à WebAssembly une fois le paquet client téléchargé. Combine le meilleur des deux au prix d’une mise en page de projet un peu plus complexe.

Conseil

Le --interactivity drapeau correspond à celui du modèle stock dotnet new blazor du même nom, donc tout ce que vous savez déjà sur les modes de rendu Blazor est conservé.

Options de modèles

Les deux modèles exposent dotnet new des options pour que vous puissiez personnaliser le projet généré dès le départ. Passez-les en ligne de commande, ou choisissez-les dans l’écran de création de projet de Visual Studio (et l’interface dotnet new interactive). Les options les plus utiles :

• --user-audience (External | Internal | Both, par défaut Both) — qui se connecte. Les utilisateurs externes obtiennent des comptes locaux (inscription, connexion, réinitialisation du mot de passe) ainsi que tous les fournisseurs externes que vous activez ; Les utilisateurs internes se connectent uniquement via Microsoft / Entra ; Les deux permettent à chacun de les deux de les déranger.
• --include-microsoft-login — ajoute Connexion avec Microsoft. Activé par défaut (et obligatoire pour les publics Interne et Both). Stockez les identifiants sous Authentication:Microsoft.
• --include-google-login — ajoute la connexion avec Google pour les utilisateurs externes. Fournir des identifiants OAuth et les stocker sous Authentication:Google.
• --include-facebook-login — ajoute Continuer avec Facebook pour les utilisateurs externes. Provisionnez une application et stockez ses identifiants sous Authentication:Facebook.
• --include-machine-translation + --machine-translation-provider (Azure | DeepL | Google) — connecte un fournisseur de traduction automatique afin que la page d’administration de la localisation puisse traduire les fichiers de localisation. Lorsqu’il est omis, le panneau de traduction reste caché et l’immatriculation est expédiée selon les indications commentées.
• --include-sample-content (par défaut activé) / --empty — inclure ou omettre les pages d’exemple et le style qui montrent les schémas d’utilisation de base.
• --interactivity (Server | WebAssembly | Auto) — le mode de rendu Blazor (voir Modes d’Interactivité ci-dessus). Pas applicable au modèle React.
• --use-program-main — générer une méthode explicite Program.Main au lieu d’instructions de premier niveau.
• --framework (net10.0 | net9.0) — le cadre de cible.

Par exemple, un portail Blazor auto-rendu pour les deux publics, avec connexion Google et traduction automatique Azure :

Conseil

Exécutez dotnet new powerportalspro -h (ou dotnet new powerportalspro-react -h) pour lister chaque option et leurs valeurs par défaut. Dans Visual Studio, ils apparaissent sous forme de cases à cocher et de menus déroulants sur l’écran de création de projet.

Ce qui est inclus

Le modèle génère un projet de portail pleinement fonctionnel avec les éléments suivants :

• Pages d’exemple — Pages de liste de comptes et contacts avec MainGrid, ainsi que des pages de détails avec RecordContext, éditeurs et sous-grilles.
• Pages d’identité — Intégrez ASP.NET intégration de l’identité principale avec les pages de connexion, d’inscription, de mot de passe oublié, de réinitialisation de mot de passe, d’authentification à deux facteurs, de confirmation par e-mail et de gestion de compte.
• Gestionnaires de sécurité — Gestionnaires d’autorisations pré-construits pour les tables de compte et de contact démontrant des motifs de sécurité au niveau des tables et des enregistrements.
• Mise en page — Un MainLayout avec PageLayout, menus de navigation sur ordinateur et mobile, paramètres du site et prise en charge des thèmes.
• Localisation — Un fichier de localisation JSON (app.en.json) avec des libelles de navigation et des chaînes spécifiques à chaque page.
• Configuration — appsettings.json avec des espaces réservés pour les paramètres de connexion Dataverse.

Comprendre Program.cs

Le Program.cs fichier est l’endroit où tous les services sont enregistrés et où le pipeline d’application est configuré. Voici un aperçu de chaque section :

Modèle React

La solution ci-dessous décrit le modèle Program.csBlazor. L’hébergeur du modèle React enregistre les mêmes services de base — le Dataverse ConnectionOptions, la localisation, les gestionnaires de sécurité et l’email — mais omet l’enregistrement spécifique AddPowerPortalsProWebBlazorFluentUI() à Blazor, sert plutôt le SPA React et expose les points d’authentification via MapAuthEndpoints<PortalUser>() plutôt que MapAdditionalIdentityEndpoints(). AddPowerPortalsProWebServer()

Cache distribué

Le modèle enregistre un cache distribué basé sur la mémoire. En production, remplacez-le par un cache persistant comme Redis ou SQL Server pour de meilleures performances sur plusieurs instances.

Inscription Fluent UI

AddPowerPortalsProWebBlazorFluentUI() enregistre tous les composants Fluent UI Blazor utilisés par les éditeurs, les grids et les composants de mise en page de PowerPortalsPro.

Services serveur

AddPowerPortalsProWebServer() enregistre les services principaux côté serveur, y compris la couche d’accès aux données Dataverse, l’application de la sécurité, le pipeline intercepteur et le chargement de localisation.

Connexion Dataverse

La ConnectionOptions configuration précise comment le portail s’authentifie avec Dataverse. Le modèle utilise l’authentification Client Secret avec des identifiants stockés dans appsettings.json ou User Secrets.

Conseil

Pour les meilleures pratiques de sécurité, stockez vos identifiants dans les Secrets d’utilisateur pendant le développement et Azure Key Vault ou les variables d’environnement en production. Ne confiez jamais de secrets au contrôle de version.

Configuration de localisation

AddLocalizationDirectory registres des répertoires contenant des fichiers JSON de localisation. Par défaut LocalizeAllAvailableTables , est true, donc les étiquettes, noms de colonnes et de vues sont automatiquement extraits de chaque table Dataverse. Régle-le sur false et utilise AddTableToLocalize / AddTablesToLocalize pour restreindre la localisation à une liste explicite.

Options d’identité

Cette IdentityOptions section configure ASP.NET paramètres d’identité principale, comme l’exigence d’une confirmation par e-mail avant la connexion.

Traduction automatique (optionnelle)

Générez le projet pour --IncludeMachineTranslation câbler la traduction automatique pour la page d’administration de la localisation Translate a Caste a Panel. Le modèle ajoute ci-dessous le package du PowerPortalsPro.Web.Server.Translation.* fournisseur choisi et son enregistrement ; choisissez le fournisseur avec --MachineTranslationProvider: Azure (par défaut), DeepL, ou Google. Fournir la clé du fournisseur via les secrets de configuration / utilisateurs sous Azure:Translation:Key, DeepL:Translation:Key, ou Google:Translation:Key pour correspondre.

Conseil

Sans cette option, la page Administration de la localisation fonctionne toujours — la vue d’ensemble du pipeline et les téléchargements par source / fusionnés ne sont pas affectés ; Seul le panneau de traduction reste caché, et l’enregistrement est livré comme un guide commenté pour que vous puissiez l’activer manuellement plus tard.

Enregistrement du gestionnaire de sécurité

Les gestionnaires de permissions sont enregistrés dans le conteneur DI pour contrôler l’accès CRUD pour chaque table. Le modèle inclut des gestionnaires pour le compte (accès complet) et le contact (lecture seule avec des mises à jour basées sur le propriétaire).

Configuration des e-mails

Il EmailServiceOptions configure l’adresse e-mail de l’expéditeur utilisée pour la confirmation de compte et la réinitialisation du mot de passe. Cela est envoyé via le service de messagerie Dataverse.

Authentification Microsoft (optionnelle)

Le modèle inclut un code commenté pour ajouter l’authentification Microsoft Entra ID (Azure AD). Désactivez vos commentaires et configurez votre identifiant client et votre secret pour activer la connexion externe via les comptes Microsoft.

Middleware Pipeline

UsePowerPortalsProWebServer() ajoute le middleware PowerPortalsPro. UseLocalization() permet le système de localisation. MapAdditionalIdentityEndpoints() enregistre le point de connexion basé sur les cookies utilisé par les pages d’identité.

Authentification à deux facteurs (optionnelle)

Le modèle inclut un code commenté pour activer l’authentification à deux facteurs via des codes par email. Annulez le commentaire de l’option AuthenticatorTokenProvider et l’appel AddDefaultTokenProviders() pour l’activer.

Personnalisations courantes

Après avoir structuré le projet, voici les étapes suivantes courantes :

• Ajoutez des gestionnaires de permissions pour toutes les tables Dataverse supplémentaires auxquelles votre portail accède.
• Chaque table Dataverse est localisée par défaut. Pour choisir une empreinte plus petite, configurez LocalizeAllAvailableTables et false listez les tables que vous souhaitez via AddTableToLocalize.
• Enregistrer ITableRecordInterceptor des implémentations pour la logique métier qui s’exécute avant ou après les opérations d’enregistrement.
• Mettez à jour les menus de navigation dans NavMenu.razor, DesktopNavMenu.razor, et MobileNavMenu.razor pour qu’ils correspondent aux pages de votre portail.
• Ajoutez de nouvelles pages avec RecordContext, éditeurs et grilles pour vos tables Dataverse personnalisées.