プロジェクトテンプレート
PowerPortalsProは、Dataverse接続、認証、セキュリティハンドラー、ローカリゼーション、事前構築されたアイデンティティページという2つのプロジェクトテンプレートを出荷しており、数分で実行可能です。 React のシングルページアプリ(推奨)と Blazor のウェブアプリの両方が利用可能で、PowerPortalsProの機能セットは両者で同一です。チームに合ったフロントエンドスタックを選んでください。
テンプレートのインストール
.NET CLIを使ってNuGetから PowerPortalsPro.AspNetCore.Templates パッケージをインストールします。両方のテンプレートはこの1つのパッケージで同梱されています:
テンプレートの選択
インストール後、.NET CLIまたはVisual Studioの「新しいプロジェクト」ダイアログ(「Power Portals Pro」で検索)からプロジェクトを作成します。2つのテンプレートが利用可能です。あなたのフロントエンドスタックに合ったものを選びましょう:
React(推奨)
Fluent UI Reactをベースに構築したReact + Vite + TypeScriptのシングルページアプリと組み合わせた ASP.NET Coreホストです。新しいポータルに推奨されます。最新のフロントエンドツール、高速なホットリロード開発ループ、そして最も幅広いコンポーネントセットです。
ブレイザー
Fluent UI Blazorを基にした ASP.NET コアBlazorウェブアプリで、スキャフォルド時に --interactivityで選択できるレンダリングモードがあります。チームが主にC#で作業し、完全に.NET UIスタックに留まりたい場合に最適です。
おすすめ
両テンプレートは、グリッド、エディタ、セキュリティ、ローカリゼーション、アイデンティティなど、同じPowerPortalsProの機能を公開しています。チームが特にC#でいなければならない場合を除き、新しいプロジェクトには React を推奨します。その場合はBlazorテンプレートが完全にサポートされています。
Reactテンプレート
powerportalspro-reactテンプレートは、2つのプロジェクトを同時に生成します。
- ASP.NET Coreホスト — フレームワークのデータおよび認証エンドポイントを
/api/*でサービスし、構築されたSPAをホストします。そのProgram.csはBlazorホストと同様に構成されており(Dataverse接続、ローカライゼーション、セキュリティハンドラー)、MapAuthEndpoints<PortalUser>()を通じてJSON認証エンドポイントを公開します。 - Reactクライアント (
.Client) — Fluent UI Reactを基に構築されたVite + TypeScriptのSPA。トランスポートレイヤー、フック、コンポーネントの@powerportalspro/core、@powerportalspro/react、@powerportalspro/react-fluent、@powerportalspro/react-chartsパッケージを消費します。 - 開発ループ — ホストでF5キー(または
dotnet runを実行する)すると、SpaProxyがVite開発サーバーを起動し、クライアント編集時にホットモジュールの再ロードを行います。別途ターミナルは必要ありません。 - Blazorと同じサーフェス で、サンプルのアカウント/連絡先ページ、アイデンティティおよびアカウント管理ページ、テーブル権限ハンドラー、ナビゲーション、テーマ/サイト設定、すべてReactコンポーネントで再構築されています。
ブレイザー・インタラクティビティ・モード
Blazorテンプレートはさらに、--interactivity Server、--interactivity WebAssembly、または--interactivity Autoでレンダリングモードを選択できます(Reactテンプレートは常にシングルページアプリなので、同等のオプションはありません)。最初にモードを選択すると生成されたプロジェクトレイアウトにのみ影響します — PowerPortalsPro自体は3つすべてで正しく動作します。詳細な比較についてはBlazor Interactiveのページをご覧ください。
- サーバー — SignalR接続を介してサーバー上で実行されるインタラクティブページ。最もシンプルな展開と最小限のクライアントダウンロード。迷っているときは良いデフォルトです。
- WebAssembly — ブラウザ上でコンパイルされた.NETコードとして動作するインタラクティブなページ。別
.Clientプロジェクトをスキャフォールドし、サーバーはクライアントが消費するAPIエンドポイントをホストします。クライアントサイドの豊富なUXやサーバーからのインタラクション作業の負担に最適です。 - Auto — サーバー上で最初のペイントをレンダリングして高速に読み込み、クライアントバンドルがダウンロードされるとWebAssemblyに透明に引き継ぎます。両方の良いところを組み合わせつつ、やや複雑なプロジェクトのレイアウトを作っています。
ヒント
--interactivityのフラグは同名のテンプレートのdotnet new blazorのフラグと一致しているので、Blazorのレンダリングモードについて既に知っていることは引き継がれます。
テンプレートオプション
どちらのテンプレートも dotnet new オプションを公開しているので、生成されたプロジェクトを最初からカスタマイズできます。コマンドラインで渡すか、Visual Studioのプロジェクト作成画面(および dotnet new インタラクティブUI)で選択してください。最も有用な選択肢:
--user-audience(External|Internal|Both、デフォルトBoth)— 誰がサインインしますか。 外部 ユーザーはローカルアカウント(登録、ログイン、パスワードリセット)に加え、許可した外部プロバイダーも利用できます。 社内 ユーザーはMicrosoft / Entraのみでサインインします。 どちらも お互いを助長しています。--include-microsoft-login— Microsoft でサインインする機能が追加されました。デフォルトでオン(内部および両方のオーディエンスには必須)。認証情報をAuthentication:Microsoftで保存してください。--include-google-login— 外部ユーザー向けに Googleでサインイン する機能が追加されました。OAuth認証情報をプロビジョニングし、Authentication:Googleで保存します。--include-facebook-login— 外部ユーザー向けに 「Facebookで続ける 」と追加。アプリをプロビジョニングし、その認証情報をAuthentication:Facebookで保存します。--include-machine-translation+--machine-translation-provider(Azure|DeepL|Google) — ローカリゼーション管理者ページがローカリゼーションファイルを翻訳できるように機械翻訳プロバイダーを接続します。省略すると翻訳パネルは非表示のままで、登録はコメント付きガイダンスとして送信されます。--include-sample-content(デフォルトオン) /--empty— 基本的な使用パターンを示すサンプルページやスタイリングを含めたり省略したりしてください。--interactivity(Server|WebAssembly|Auto) — ブレイザーのレンダリングモード(上記の インタラクティブモード 参照)。Reactテンプレートには適用できません。--use-program-main— トップレベルの文の代わりに明示的なProgram.Mainメソッドを生成する。--framework(net10.0|net9.0) — ターゲットフレームワーク。
例えば、GoogleサインインとAzure機械翻訳を備えた、両方のオーディエンス向けの自動レンダリングBlazorポータル:
ヒント
dotnet new powerportalspro -h(またはdotnet new powerportalspro-react -h)を実行して、すべてのオプションとそのデフォルトをリストアップします。Visual Studioでは、これらはプロジェクト作成画面のチェックボックスやドロップダウンとして表示されます。
含まれるもの
テンプレートは以下の機能を備えた完全なポータルプロジェクトを生成します:
- サンプルページ — アカウントおよび連絡先リストページはMainGridで、詳細ページにはRecordContext、エディター、サブグリッドがあります。
- Identity Pages — ログイン、登録、パスワード忘れ、リセットパスワード、二要素認証、メール確認、アカウント管理ページを含む完全なコアID統合 ASP.NET。
- セキュリティハンドラー — アカウントおよび連絡先テーブル用にあらかじめ構築された権限ハンドラーで、テーブルレベルおよびレコードレベルのセキュリティパターンを示します。
- レイアウト — PageLayout、デスクトップおよびモバイルのナビゲーションメニュー、サイト設定、テーマサポートを備えたメインレイアウトです。
- ローカリゼーション — ナビゲーションラベルとページ固有の文字列を備えたJSONローカリゼーションファイル(
app.en.json)。 - 設定 — Dataverseの接続設定のプレースホルダー付き
appsettings.json。
理解Program.cs
Program.csファイルはすべてのサービスが登録され、アプリケーションパイプラインが設定されている場所です。各セクションの内訳は以下の通りです:
Reactテンプレート
以下のウォークスルーはBlazorテンプレートの
Program.csを説明しています。Reactテンプレートのホストは、AddPowerPortalsProWebServer()、DataverseConnectionOptions、ローカライズ、セキュリティハンドラー、メールといった同じコアサービスを登録しますが、Blazor特有のAddPowerPortalsProWebBlazorFluentUI()登録を省略し、代わりにReact SPAを担当し、認証エンドポイントはMapAdditionalIdentityEndpoints()ではなくMapAuthEndpoints<PortalUser>()で公開しています。
分散キャッシュ
テンプレートはメモリベースの分散キャッシュを登録します。本番環境では、複数のインスタンス間でより良いパフォーマンスを得るために、RedisやSQL Serverのような永続キャッシュに置き換えます。
Fluent UI登録
AddPowerPortalsProWebBlazorFluentUI() PowerPortalsProエディタ、グリッド、レイアウトコンポーネントで使用されるすべてのFluent UI Blazorコンポーネントを登録します。
サーバーサービス
AddPowerPortalsProWebServer() Dataverseデータアクセス層、セキュリティ強制、インターセプターパイプライン、ローカライズロードなどのコアサーバーサイドサービスを登録します。
Dataverse 接続
ConnectionOptions構成は、ポータルがDataverseでどのように認証するかを指定します。このテンプレートは、appsettings.jsonまたはユーザーシークレットに保存された認証情報を用いてクライアントシークレット認証を使用します。
ヒント
セキュリティのベストプラクティスとしては、開発時にはユーザーシークレットに認証情報を保存し、本番環境ではAzure Key Vaultや環境変数に保存してください。ソース管理に秘密をコミットしてはいけません。
ローカライゼーション構成
AddLocalizationDirectory ローカライズJSONファイルを含むディレクトリを登録します。デフォルトでは LocalizeAllAvailableTables は trueなので、ラベル、列名、ビュー名はすべてのDataverseテーブルから自動的に取得されます。 false に設定し、 AddTableToLocalize / AddTablesToLocalize でローカライズを明示的なリストに制限してください。
アイデンティティ・オプション
IdentityOptionsセクションでは、ログイン前にメール確認を必須するなど、コアIDの設定 ASP.NET 設定が設定されています。
機械翻訳(任意)
ローカリゼーション管理者ページの「ファイル翻訳パネル」用に機械翻訳を配線するための--IncludeMachineTranslationでプロジェクトを生成します。テンプレートは選択したプロバイダーのPowerPortalsPro.Web.Server.Translation.*パッケージとその登録を下に追加します。プロバイダーは--MachineTranslationProviderで選択します:Azure(デフォルト)、DeepL、またはGoogle。プロバイダーの鍵は、Azure:Translation:Key、DeepL:Translation:Key、またはGoogle:Translation:Keyの設定やユーザーシークレットを通じて提供し、一致させます。
ヒント
このオプションがなくても、ローカリゼーション管理者ページは動作します。パイプラインの概要やソースごとのダウンロード/マージダウンロードには影響がありません。翻訳パネルだけが非表示のままで、登録はコメント付きのガイダンスとして配信されるので、後で手動で有効化できます。
セキュリティハンドラー登録
権限ハンドラはDIコンテナに登録され、各テーブルのCRUDアクセスを制御します。テンプレートにはアカウント(フルアクセス)と連絡先(オーナーベースの更新で読み取り専用)のハンドラーが含まれています。
メール設定
EmailServiceOptionsはアカウント確認やパスワードリセットメールに使う送信者のメールアドレスを設定します。これはDataverseのメールサービスを通じて送信されます。
Microsoft認証(任意)
テンプレートにはMicrosoft Entra ID(Azure AD)認証を追加するためのコメント付きコードが含まれています。コメントを消して、クライアントIDとシークレットを設定してMicrosoftアカウント経由で外部ログインを有効にしてください。
ミドルウェアパイプライン
UsePowerPortalsProWebServer() PowerPortalsProミドルウェアを追加しています。 UseLocalization() ローカライゼーションシステムを可能にします。 MapAdditionalIdentityEndpoints() アイデンティティページで使用されるクッキーベースのログインエンドポイントを登録します。
二要素認証(任意)
テンプレートには、メールベースのコードを用いた二要素認証を有効にするためのコメント付きコードが含まれています。 AuthenticatorTokenProvider オプションと有効化 AddDefaultTokenProviders() 通話のコメントを消してください。
一般的なカスタマイズ
プロジェクトの足場を組んだ後、次の一般的なステップは以下の通りです。
- ポータルがアクセスする追加のDataverseテーブルに対して権限ハンドラーを追加してください。
- すべてのDataverseテーブルはデフォルトでローカライズされています。より小さなフットプリントでオプトアウトするには、
LocalizeAllAvailableTablesをfalseに設定し、AddTableToLocalizeで欲しいテーブルをリストアップしてください。 - レコード操作の前後に動作するビジネスロジックの実装
ITableRecordInterceptor登録します。 - ポータルのページに合わせて
NavMenu.razor、DesktopNavMenu.razor、MobileNavMenu.razorのナビゲーションメニューを更新してください。 - カスタムDataverseテーブル用に
RecordContext、エディター、グリッドを備えた新しいページを追加しましょう。