Tutorial: Menyematkan Doconut Viewer dengan Aman menggunakan React – End to End
Menyematkan penampil dokumen secara aman memerlukan lebih dari sekadar menyalin potongan middleware ke dalam aplikasi ASP.NET Core. Integrasi harus mendefinisikan batasan yang jelas untuk autentikasi, akses dokumen, manajemen sesi, rendering, anotasi, pencarian, pencetakan, dan pencatatan audit.
Perusahaan yang membangun portal berfokus pada dokumen—seperti DMS, CRM, peninjauan hukum, atau aplikasi gambar teknik—juga perlu menjaga file asli di belakang batas aplikasi. Doconut mendukung model penayangan sisi server untuk dokumen PDF, Office, CAD, dan gambar, sementara front end React dapat menyediakan antarmuka pengguna.
Tutorial ini berfokus pada arsitektur yang dapat diandalkan dan sengaja menghindari nama paket, properti opsi, tanda tangan metode, serta jalur endpoint yang dapat bervariasi antar versi SDK. Gunakan dokumentasi resmi yang sesuai dengan versi berlisensi Anda untuk detail pendaftaran dan API yang tepat.
1️⃣ Langkah 1 – Siapkan Proyek ASP.NET Core dan React
Sebelum menulis kode apa pun, pastikan lingkungan pengembangan Anda memenuhi persyaratan dasar:
| Persyaratan | Versi yang Direkomendasikan |
|---|---|
| Runtime .NET | .NET 6 atau lebih baru |
| ASP.NET Core | 6.0+ |
| IDE | Lingkungan pengembangan .NET yang didukung |
| Front‑end (opsional) | Aplikasi React yang kompatibel dengan proyek Anda |
- Buat proyek API Web ASP.NET Core baru
dotnet new webapi -n DocPortal
cd DocPortal
-
Tambahkan dependensi Doconut berlisensi – Dapatkan nama paket, versi, dependensi native, dan instruksi pemuatan lisensi yang tepat dari dokumentasi resmi untuk rilis Doconut Anda. Jangan mengasumsikan bahwa paket atau wrapper yang ditunjukkan dalam tutorial tidak terkait berlaku untuk versi Anda.
-
Siapkan aplikasi React – Jika penampil akan disajikan melalui React, gunakan pengaturan front‑end yang sudah disetujui tim Anda. Biarkan aplikasi React bergantung pada API terautentikasi Anda sendiri, bukan pada wrapper pihak ketiga yang tidak terdokumentasi.
-
Commit keadaan awal – Sebagian besar tim perusahaan menerapkan kebijakan Git yang mengharuskan commit ditandatangani untuk setiap perubahan yang menyentuh lisensi atau pengaturan keamanan.
Sekarang Anda memiliki solusi bersih yang siap untuk integrasi server Doconut yang didokumentasikan.
2️⃣ Langkah 2 – Konfigurasikan Integrasi Server dengan Aman
Daftarkan penampil menggunakan instruksi yang disediakan untuk versi Doconut yang tepat dalam proyek Anda. Urutan middleware, pendaftaran layanan, inisialisasi lisensi, dan nama properti konfigurasi adalah detail spesifik versi dan tidak boleh disalin dari contoh yang tidak terverifikasi.
Terlepas dari versi SDK, aplikasi ASP.NET Core sebaiknya menegakkan kontrol berikut:
- Autentikasi sebelum membuka dokumen – Sesi penampil tidak boleh melewati lapisan identitas aplikasi.
- Resolusi pengidentifikasi dokumen di server – Terima ID dokumen tingkat aplikasi, bukan jalur file fisik arbitrer yang diberikan oleh browser.
- Otorisasi setiap operasi – Penayangan, anotasi, pencarian, unduhan, dan pencetakan mungkin memerlukan izin yang berbeda.
- Simpan rahasia di luar kontrol sumber – Simpan lisensi, string koneksi, dan material enkripsi dalam mekanisme manajemen rahasia yang disetujui.
- Terapkan batasan permintaan – Tetapkan batas unggahan, ukuran dokumen, timeout, dan laju permintaan yang sesuai di sekitar alur kerja penampil.
- Catat peristiwa keamanan – Log keputusan akses dan tindakan dokumen tanpa menuliskan isi dokumen atau token sensitif ke log.
Anggap semua pengaturan SDK sebagai konfigurasi berversi. Konfirmasikan maknanya dalam referensi resmi sebelum mengaktifkannya di produksi.
3️⃣ Langkah 3 – Isolasi Sesi Dokumen di Balik Layanan Aplikasi
Simpan interaksi spesifik Doconut di dalam layanan aplikasi khusus. Referensi ke kelas Viewer berguna pada tingkat arsitektur, tetapi tanda tangan konstruktor, metode pembukaan dokumen, kebutuhan cache, dan perilaku penemuan lisensi harus diambil dari dokumentasi untuk versi yang terpasang.
Batas layanan yang aman harus:
- Menerima pengguna yang terautentikasi dan pengidentifikasi dokumen tingkat aplikasi.
- Memeriksa izin pengguna untuk tindakan yang diminta.
- Menyelesaikan dokumen dari penyimpanan sisi server yang disetujui.
- Meminta API penampil yang didokumentasikan untuk membuat sesi dokumen.
- Mengembalikan hanya informasi sesi opak minimum yang diperlukan klien.
- Membebaskan atau mengakhiri sesi sesuai kebijakan retensi dan cache Anda.
Browser tidak boleh pernah menerima jalur penyimpanan fisik, data lisensi, kunci cache internal, atau referensi tidak terbatas ke dokumen asli.
4️⃣ Langkah 4 – Aktifkan Anotasi, Pencarian, dan Pencetakan Terkontrol
Anotasi, pencarian, OCR, dan pencetakan terkontrol hanya boleh diaktifkan bila termasuk dalam konfigurasi Doconut berlisensi Anda dan didukung oleh versi yang terpasang. Hindari mengasumsikan nama metode, format persistensi, atau kelas opsi.
- Anotasi – Tentukan peran mana yang dapat membuat, mengedit, melihat, atau menghapus markup. Simpan status anotasi sesuai panduan persistensi untuk versi SDK Anda dan persyaratan audit internal.
- Pencarian dan OCR – Tentukan tipe dokumen mana yang memerlukan OCR, di mana teks yang diekstrak disimpan, dan berapa lama indeks tetap tersedia. Perlakukan hasil pencarian sebagai data dokumen dan otorisasi sesuai.
- Pencetakan terkontrol – Definisikan batas halaman, kebijakan watermark, aturan persetujuan, dan peristiwa audit di tingkat aplikasi, lalu petakan persyaratan tersebut ke kemampuan pencetakan yang didokumentasikan.
Simpan operasi ini di belakang layanan aplikasi yang sama digunakan untuk sesi dokumen sehingga kontroler tetap tipis dan aturan bisnis dapat diuji.
5️⃣ Langkah 5 – Hubungkan Front End React
Aplikasi React harus memanggil API ASP.NET Core yang terautentikasi alih-alih menerima jalur penyimpanan atau terhubung langsung ke layanan dokumen internal. Definisikan kontrak API berorientasi sumber daya Anda sendiri di sekitar aksi bisnis dan hindari mempublikasikan nama endpoint spesifik SDK sebagai bagian dari kontrak klien publik.
Urutan interaksi tipikal adalah:
- Pengguna memilih dokumen yang sudah terlihat di aplikasi.
- React meminta sesi penayangan menggunakan ID aplikasi dokumen.
- ASP.NET Core mengautentikasi permintaan, mengotorisasi dokumen, dan mengoordinasikan sesi penampil.
- React menerima hanya informasi yang diperlukan untuk menampilkan penampil.
- Permintaan anotasi, pencarian, dan pencetakan kembali melalui API aplikasi yang terautentikasi.
- Server mencatat peristiwa audit dan mengakhiri sesi bila diperlukan.
Di UI React, pertahankan status sesi singkat, tangani kegagalan otorisasi secara eksplisit, hindari menempatkan nilai sensitif di penyimpanan browser yang persisten, serta sediakan status pemuatan dan kesalahan yang tidak mengungkap jalur internal atau detail pengecualian.
Pemisahan ini menjaga rendering dan kontrol dokumen di server sementara React tetap bertanggung jawab atas presentasi dan interaksi.
Kesimpulan
Dengan menempatkan integrasi Doconut di belakang layanan aplikasi ASP.NET Core yang aman, Anda dapat membangun portal dokumen untuk alur kerja PDF, Office, CAD, dan gambar tanpa mengaitkan antarmuka React dengan detail SDK yang tidak terdokumentasi. Autentikasi, otorisasi, siklus hidup sesi, pencarian, anotasi, pencetakan, dan kebijakan audit tetap menjadi bagian eksplisit dari desain aplikasi Anda.
Siap mengevaluasi Doconut untuk proyek .NET Anda? Gunakan paket resmi, lisensi, dan dokumentasi API untuk versi yang Anda pilih, lalu terapkan arsitektur serta daftar periksa keamanan di atas ke implementasi Anda.