チュートリアル：React で Doconut ビューアを安全に埋め込む – エンドツーエンド
ドキュメントビューアを安全に埋め込むには、ASP.NET Core アプリケーションにミドルウェアのスニペットをコピーするだけでは不十分です。統合では、認証、ドキュメントアクセス、セッション管理、レンダリング、注釈、検索、印刷、監査ログのための明確な境界を定義する必要があります。
DMS、CRM、法務レビュー、エンジニアリング図面アプリケーションなど、ドキュメント中心のポータルを構築する企業は、元のファイルをアプリケーションの境界の背後に保持する必要があります。Doconut は PDF、Office、CAD、画像ドキュメント向けのサーバーサイドビューイングモデルをサポートしており、React フロントエンドがユーザーインターフェースを提供できます。
本チュートリアルは信頼できるアーキテクチャに焦点を当て、SDK バージョン間で変わり得るパッケージ名、オプションプロパティ、メソッドシグネチャ、エンドポイントパスは意図的に省いています。正確な登録方法や API の詳細については、ライセンス対象のバージョンに一致する公式ドキュメントを使用してください。
1️⃣ ステップ 1 – ASP.NET Core と React プロジェクトの準備
コードを書く前に、開発環境が基本要件を満たしていることを確認してください：
| 要件 | 推奨バージョン |
|---|---|
| .NET ランタイム | .NET 6 以降 |
| ASP.NET Core | 6.0+ |
| IDE | サポートされている .NET 開発環境 |
| フロントエンド（オプション） | プロジェクトと互換性のある React アプリケーション |
- 新しい ASP.NET Core Web API プロジェクトを作成する
dotnet new webapi -n DocPortal
cd DocPortal
-
ライセンスされた Doconut 依存関係を追加する – 正確なパッケージ名、バージョン、ネイティブ依存関係、ライセンス読み込み手順は、Doconut の公式ドキュメントから取得してください。無関係なチュートリアルに示されたパッケージやラッパーを自分のバージョンに適用しようとしないでください。
-
React アプリケーションを準備する – ビューアを React で提供する場合は、チームで承認されたフロントエンド設定を使用してください。React アプリケーションは、ドキュメント化されていないサードパーティラッパーではなく、独自の認証済み API に依存させてください。
-
初期状態をコミットする – 多くのエンタープライズチームは、ライセンスやセキュリティ設定に関わる変更には署名付きコミットを要求する Git ポリシーを適用しています。
これで、ドキュメント化された Doconut サーバー統合の準備が整ったクリーンなソリューションができました。
2️⃣ ステップ 2 – サーバー統合を安全に構成する
プロジェクトの正確な Doconut バージョン向けに提供された手順に従ってビューアを登録してください。ミドルウェアの順序、サービス登録、ライセンス初期化、設定プロパティ名はバージョン固有の詳細であり、検証されていない例からコピーすべきではありません。
SDK バージョンに関係なく、周囲の ASP.NET Core アプリケーションは以下の制御を実施すべきです：
- ドキュメントを開く前に認証する – ビューアセッションがアプリケーションのアイデンティティ層を迂回してはなりません。
- サーバー側でドキュメント識別子を解決する – ブラウザから提供される任意の物理ファイルパスではなく、アプリケーションレベルのドキュメント ID を受け入れます。
- すべての操作を認可する – 表示、注釈、検索、ダウンロード、印刷はそれぞれ異なる権限が必要になる場合があります。
- シークレットはソース管理外に保管する – ライセンス、接続文字列、暗号化素材は承認されたシークレット管理メカニズムに保存してください。
- リクエスト制限を適用する – ビューアのワークフローに対して適切なアップロード、ドキュメントサイズ、タイムアウト、レート制限を設定してください。
- セキュリティイベントを記録する – ドキュメント内容や機密トークンをログに書き込むことなく、アクセス判定やドキュメント操作を記録します。
すべての SDK 設定はバージョン管理された構成として扱い、本番環境で有効化する前に公式リファレンスで意味を確認してください。
3️⃣ ステップ 3 – アプリケーションサービスの背後でドキュメントセッションを分離する
Doconut 固有のやり取りは専用のアプリケーションサービス内に保持してください。Viewer クラスへの参照はアーキテクチャ上有用ですが、コンストラクタのシグネチャ、ドキュメントオープンメソッド、キャッシュ要件、ライセンス検出の挙動は、インストール済みバージョンのドキュメントから取得する必要があります。
安全なサービス境界は次のことを行うべきです：
- 認証済みユーザーとアプリケーションレベルのドキュメント識別子を受け取る。
- 要求された操作に対するユーザーの権限を確認する。
- 承認されたサーバー側ストレージからドキュメントを解決する。
- ドキュメント化されたビューア API に対し、ドキュメントセッションの確立を依頼する。
- クライアントが必要とする最小限の不透明なセッション情報だけを返す。
- 保持およびキャッシュポリシーに従ってセッションを解放または期限切れにする。
ブラウザが物理的なストレージパス、ライセンスデータ、内部キャッシュキー、または元ドキュメントへの無制限参照を受け取ることは決してあってはなりません。
4️⃣ ステップ 4 – 注釈、検索、制御された印刷を有効にする
注釈、検索、OCR、制御された印刷は、ライセンスされた Doconut 設定に含まれ、インストールされたバージョンでサポートされている場合にのみ有効にすべきです。メソッド名、永続形式、オプションクラスを推測しないでください。
- 注釈 – どのロールがマークアップの作成、編集、閲覧、削除を行えるかを決定します。注釈の状態は、SDK バージョンの永続化ガイダンスと自社の監査要件に従って保存してください。
- 検索と OCR – OCR が必要なドキュメントタイプ、抽出テキストの保持場所、インデックスの有効期間を設定します。検索結果はドキュメントデータとして扱い、適切に認可してください。
- 制御された印刷 – アプリケーションレベルでページ数制限、透かしポリシー、承認ルール、監査イベントを定義し、それらの要件をドキュメント化された印刷機能にマッピングします。
これらの操作もドキュメントセッションで使用するのと同じアプリケーションサービスの背後に置き、コントローラを薄く保ち、ビジネスルールをテストしやすくします。
5️⃣ ステップ 5 – React フロントエンドを接続する
React アプリケーションは、ストレージパスを受け取ったり内部ドキュメントサービスに直接接続したりするのではなく、認証済みの ASP.NET Core API を呼び出すべきです。ビジネスアクションを中心としたリソース指向の API 契約を定義し、SDK 固有のエンドポイント名を公開クライアント契約の一部として公開しないでください。
典型的なやり取りのシーケンスは次の通りです：
- ユーザーがアプリケーション内で既に表示されているドキュメントを選択する。
- React がドキュメントのアプリケーション ID を使用してビューイングセッションを要求する。
- ASP.NET Core がリクエストを認証し、ドキュメントを認可し、ビューアセッションを調整する。
- React がビューア表示に必要な情報だけを受け取る。
- 注釈、検索、印刷のリクエストは認証済みアプリケーション API を通じて返される。
- サーバーが監査イベントを記録し、適切なタイミングでセッションを期限切れにする。
React UI では、セッション状態を短命に保ち、認可失敗を明示的に処理し、機密値を永続的なブラウザストレージに保存しないようにし、内部パスや例外詳細を漏らさないロードおよびエラー状態を提供してください。
この分離により、レンダリングとドキュメント制御はサーバー側に残り、React はプレゼンテーションとインタラクションを担当します。
結論
Doconut 統合を安全な ASP.NET Core アプリケーションサービスの背後に置くことで、React インターフェースを未文書化の SDK 詳細に結びつけることなく、PDF、Office、CAD、画像ワークフロー向けのドキュメントポータルを構築できます。認証、認可、セッションライフサイクル、検索、注釈、印刷、監査ポリシーはすべてアプリケーション設計の明示的な要素として残ります。
あなたの .NET プロジェクトで Doconut の評価を始める準備はできましたか？選択したバージョンの公式パッケージ、ライセンス、API ドキュメントを使用し、上記のアーキテクチャとセキュリティチェックリストを実装に適用してください。