Tutorial: Doconut Viewer sicher mit React einbetten – End to End
Das sichere Einbetten eines Dokumentenbetrachters erfordert mehr als das Kopieren eines Middleware‑Snippets in eine ASP.NET‑Core‑Anwendung. Die Integration muss klare Grenzen für Authentifizierung, Dokumentenzugriff, Sitzungsverwaltung, Rendering, Anmerkungen, Suche, Druck und Audit‑Logging definieren.
Unternehmen, die dokumentenzentrierte Portale bauen – wie DMS, CRM, juristische Prüfungen oder Anwendungen für technische Zeichnungen – müssen die Originaldateien ebenfalls hinter der Anwendungsgrenze behalten. Doconut unterstützt ein serverseitiges Anzeige‑Modell für PDF-, Office-, CAD‑ und Bilddokumente, während ein React‑Frontend die Benutzeroberfläche bereitstellen kann.
Dieses Tutorial konzentriert sich auf eine zuverlässige Architektur und verzichtet bewusst auf Paketnamen, Options‑Properties, Methodensignaturen und Endpunkt‑Pfade, die zwischen SDK‑Versionen variieren können. Verwenden Sie die offizielle Dokumentation, die Ihrer lizenzierten Version entspricht, für die genauen Registrierungs‑ und API‑Details.
1️⃣ Schritt 1 – Vorbereitung der ASP.NET Core- und React-Projekte
Bevor Sie Code schreiben, stellen Sie sicher, dass Ihre Entwicklungsumgebung die Grundvoraussetzungen erfüllt:
| Anforderung | Empfohlene Version |
|---|---|
| .NET runtime | .NET 6 oder neuer |
| ASP.NET Core | 6.0+ |
| IDE | Eine unterstützte .NET‑Entwicklungsumgebung |
| Front‑end (optional) | Eine mit Ihrem Projekt kompatible React‑Anwendung |
- Erstellen Sie ein neues ASP.NET Core Web‑API‑Projekt
dotnet new webapi -n DocPortal
cd DocPortal
-
Fügen Sie die lizenzierten Doconut‑Abhängigkeiten hinzu – Beschaffen Sie die genauen Paketnamen, Versionen, nativen Abhängigkeiten und Lizenz‑Ladeanweisungen aus der offiziellen Dokumentation Ihrer Doconut‑Version. Gehen Sie nicht davon aus, dass ein in einem anderen Tutorial gezeigtes Paket oder Wrapper für Ihre Version gilt.
-
Bereiten Sie die React‑Anwendung vor – Wenn der Betrachter über React bereitgestellt wird, verwenden Sie das Front‑end‑Setup, das bereits von Ihrem Team genehmigt wurde. Halten Sie die React‑Anwendung von Ihrer eigenen authentifizierten API abhängig und nicht von undokumentierten Drittanbieter‑Wrappern.
-
Committen Sie den Ausgangszustand – Die meisten Enterprise‑Teams setzen eine Git‑Richtlinie durch, die für jede Änderung, die Lizenzierung oder Sicherheitseinstellungen betrifft, einen signierten Commit verlangt.
Jetzt haben Sie eine saubere Lösung, die bereit für die dokumentierte Doconut‑Server‑Integration ist.
2️⃣ Schritt 2 – Server‑Integration sicher konfigurieren
Registrieren Sie den Betrachter gemäß den Anweisungen für die genaue Doconut‑Version in Ihrem Projekt. Middleware‑Reihenfolge, Service‑Registrierungen, Lizenz‑Initialisierung und Konfigurations‑Property‑Namen sind versionsspezifische Details und sollten nicht aus unbestätigten Beispielen übernommen werden.
Unabhängig von der SDK‑Version sollte die umgebende ASP.NET‑Core‑Anwendung diese Kontrollen durchsetzen:
- Authentifizieren Sie vor dem Öffnen eines Dokuments – Eine Betrachter‑Sitzung darf niemals die Identitätsschicht der Anwendung umgehen.
- Lösen Sie Dokumenten‑IDs auf dem Server auf – Akzeptieren Sie eine anwendungsbezogene Dokumenten‑ID, nicht einen beliebigen physischen Dateipfad, der vom Browser bereitgestellt wird.
- Autorisiere jede Operation – Anzeigen, Anmerkungen, Suche, Download und Druck können unterschiedliche Berechtigungen erfordern.
- Bewahren Sie Geheimnisse außerhalb der Versionskontrolle auf – Speichern Sie Lizenzen, Verbindungszeichenfolgen und Verschlüsselungs‑Material im genehmigten Geheimnis‑Management‑Mechanismus.
- Setzen Sie Anforderungs‑Limits – Definieren Sie geeignete Upload‑, Dokumentgrößen‑, Timeout‑ und Rate‑Limits für den Betrachter‑Workflow.
- Protokollieren Sie Sicherheitsereignisse – Loggen Sie Zugriffsentscheidungen und Dokumenten‑Aktionen, ohne Dokumentinhalte oder sensible Tokens in die Logs zu schreiben.
Behandeln Sie alle SDK‑Einstellungen als versionierte Konfiguration. Prüfen Sie deren Bedeutung in der offiziellen Referenz, bevor Sie sie in der Produktion aktivieren.
3️⃣ Schritt 3 – Dokumentensitzungen hinter einem Anwendungsservice isolieren
Halten Sie Doconut‑spezifische Interaktionen innerhalb eines dedizierten Anwendungsservices. Verweise auf eine Viewer‑Klasse sind auf architektonischer Ebene nützlich, aber Konstruktor‑Signaturen, Dokument‑Öffnungs‑Methoden, Cache‑Anforderungen und das Lizenz‑Entdeckungsverhalten müssen aus der Dokumentation Ihrer installierten Version stammen.
Eine sichere Service‑Grenze sollte:
- Einen authentifizierten Benutzer und eine anwendungsbezogene Dokumenten‑ID erhalten.
- Die Berechtigung des Benutzers für die angeforderte Aktion prüfen.
- Das Dokument aus genehmigtem serverseitigem Speicher auflösen.
- Die dokumentierte Viewer‑API auffordern, eine Dokumentensitzung zu erstellen.
- Nur die minimal erforderlichen undurchsichtigen Sitzungsinformationen an den Client zurückgeben.
- Sitzungen gemäß Ihren Aufbewahrungs‑ und Cache‑Richtlinien freigeben oder ablaufen lassen.
Der Browser sollte niemals einen physischen Speicherpfad, Lizenzdaten, internen Cache‑Schlüssel oder uneingeschränkte Referenz zum Originaldokument erhalten.
4️⃣ Schritt 4 – Anmerkungen, Suche und kontrollierten Druck aktivieren
Anmerkungen, Suche, OCR und kontrollierter Druck sollten nur aktiviert werden, wenn sie in Ihrer lizenzierten Doconut‑Konfiguration enthalten und von der installierten Version unterstützt werden. Vermeiden Sie Annahmen über Methodennamen, Persistenzformate oder Optionsklassen.
- Anmerkungen – Legen Sie fest, welche Rollen Markup erstellen, bearbeiten, anzeigen oder löschen dürfen. Speichern Sie den Anmerkungs‑Zustand gemäß den Persistenz‑Richtlinien Ihrer SDK‑Version und Ihren eigenen Audit‑Anforderungen.
- Suche und OCR – Bestimmen Sie, welche Dokumenttypen OCR benötigen, wo extrahierter Text gespeichert wird und wie lange Indizes verfügbar bleiben. Behandeln Sie Suchergebnisse als Dokumentdaten und autorisieren Sie sie entsprechend.
- Kontrollierter Druck – Definieren Sie Seitenlimits, Wasserzeichen‑Richtlinien, Genehmigungsregeln und Audit‑Ereignisse auf Anwendungsebene und ordnen Sie diese Anforderungen den dokumentierten Druck‑Funktionen zu.
Halten Sie diese Vorgänge hinter demselben Anwendungsservice wie die Dokumentensitzungen, damit Controller schlank bleiben und Geschäftsregeln testbar bleiben.
5️⃣ Schritt 5 – React‑Frontend verbinden
Die React‑Anwendung sollte Ihre authentifizierte ASP.NET‑Core‑API aufrufen, anstatt Speicherpfade zu akzeptieren oder sich direkt mit internen Dokumenten‑Services zu verbinden. Definieren Sie Ihren eigenen ressourcenorientierten API‑Vertrag für Geschäftsaktionen und vermeiden Sie es, SDK‑spezifische Endpunkt‑Namen als Teil des öffentlichen Client‑Vertrags zu veröffentlichen.
Ein typischer Interaktionsablauf ist:
- Der Benutzer wählt ein bereits in der Anwendung sichtbares Dokument aus.
- React fordert eine Ansichtssitzung mit der Anwendungs‑ID des Dokuments an.
- ASP.NET Core authentifiziert die Anfrage, autorisiert das Dokument und koordiniert die Betrachter‑Sitzung.
- React erhält nur die Informationen, die zum Anzeigen des Betrachters erforderlich sind.
- Anmerkungs‑, Such‑ und Druck‑Anfragen werden über die authentifizierte Anwendungs‑API zurückgegeben.
- Der Server protokolliert Audit‑Ereignisse und lässt die Sitzung bei Bedarf ablaufen.
Im React‑UI halten Sie den Sitzungszustand kurzlebig, behandeln Autorisierungsfehler explizit, vermeiden das Ablegen sensibler Werte im persistenten Browser‑Speicher und bieten Lade‑ und Fehlermeldungen, die keine internen Pfade oder Ausnahme‑Details preisgeben.
Diese Trennung hält Rendering und Dokumenten‑Steuerungen auf dem Server, während React für Präsentation und Interaktion verantwortlich bleibt.
Fazit
Indem Sie die Doconut‑Integration hinter einem sicheren ASP.NET‑Core‑Anwendungsservice platzieren, können Sie ein Dokumenten‑Portal für PDF-, Office-, CAD‑ und Bild‑Workflows erstellen, ohne das React‑Interface an undokumentierte SDK‑Details zu koppeln. Authentifizierung, Autorisierung, Sitzungslebenszyklus, Suche, Anmerkungen, Druck und Audit‑Richtlinien bleiben explizite Bestandteile Ihres Anwendungsdesigns.
Bereit, Doconut für Ihr .NET‑Projekt zu evaluieren? Verwenden Sie das offizielle Paket, die Lizenzierung und die API‑Dokumentation für Ihre ausgewählte Version und wenden Sie anschließend die oben beschriebene Architektur‑ und Sicherheits‑Checkliste auf Ihre Implementierung an.