Banyak pengembang memulai dengan mencari perpustakaan komponen UI ketika mereka perlu menampilkan dokumen dalam aplikasi web. Doconut Viewer adalah SDK .NET untuk menambahkan penayangan browser tanpa plugin ke proyek ASP.NET Core, MVC, atau WebForms klasik. Keamanan tetap bergantung pada arsitektur aplikasi secara keseluruhan: autentikasi, otorisasi, transportasi, penyimpanan, validasi, pembersihan, patching, dan pemantauan.
1. Instal SDK Doconut App dan Siapkan Proyek .NET Anda untuk Berbagai Format File
1.1 Tambahkan paket yang didukung
Gunakan paket terbaru dan petunjuk pemasangan dari halaman unduhan resmi Doconut. Catat versi yang dipilih dan verifikasi bahwa paket tersebut mendukung runtime .NET target.
1.2 Verifikasi referensi paket
Setelah instalasi, konfirmasikan referensi paket dan versi yang terresolusi dalam file proyek. Menjaga versi secara eksplisit membantu membuat proses build dan deployment dapat direproduksi.
1.3 Aktifkan HTTPS
Doconut App memerlukan SSL untuk semua unggahan file. Pastikan aplikasi Anda mendengarkan pada HTTPS. Untuk aplikasi yang di‑host oleh Kestrel, tambahkan konfigurasi endpoint di appsettings.json:
{
"Kestrel": {
"Endpoints": {
"Https": {
"Url": "
}
}
}
}
Jika Anda menghosting di IIS, kaitkan sertifikat HTTPS ke situs. Dengan HTTPS diaktifkan, setiap file melewati saluran aman sebelum mencapai mesin rendering Doconut App.
Mengapa Doconut App? Doconut App adalah penampil .NET‑native satu-satunya yang menggabungkan rendering tanpa plugin dengan enkripsi AES‑256 end‑to‑end, memungkinkan Anda memenuhi persyaratan kepatuhan tanpa menambahkan infrastruktur tambahan.
2. Konfigurasikan Unggahan File Aman dan Penyimpanan untuk Manajemen Dokumen
Model keamanan Doconut App didasarkan pada tiga pilar: transport SSL, enkripsi AES‑256 saat disimpan, dan penghapusan otomatis setelah dilihat. SDK menyediakan layanan siap pakai yang dapat Anda daftarkan dalam aplikasi Anda.
2.1 Daftarkan layanan unggahan
Di Startup.cs (atau Program.cs untuk .NET 6+), tambahkan layanan Doconut ke kontainer dependency injection. Konfigurasikan folder penyimpanan sementara, aktifkan enkripsi AES‑256, dan tetapkan interval penghapusan otomatis (misalnya, 10 menit setelah dokumen dilihat).
2.2 Buat endpoint unggahan
Implementasikan aksi controller yang menerima file yang diunggah, meneruskannya ke layanan Doconut untuk penyimpanan aman, dan mengembalikan token satu‑kali yang singkat. Token tersebut akan digunakan oleh penampil sisi klien untuk mengambil dan merender dokumen.
2.3 Lindungi endpoint
Karena endpoint unggahan menangani data sensitif, lindungi dengan autentikasi dan otorisasi berbasis peran (misalnya, hanya pengguna dengan peran DocumentViewer yang dapat mengunggah). Ini memastikan hanya personel yang berwenang yang dapat menyimpan dan melihat dokumen rahasia.
Keuntungan Doconut App: SDK menangani enkripsi dan pembersihan untuk Anda, sehingga Anda tidak pernah perlu menulis kode kriptografi khusus atau khawatir tentang file yang tertinggal.
3. Sematkan Komponen Penampil di ASP.NET Core, MVC, atau WebForms
Dengan backend siap, inisialisasi penampil menggunakan aset dan API yang didokumentasikan untuk versi Doconut yang terpasang.
3.1 Tambahkan bundel JavaScript
Di tata letak bersama Anda, sertakan hanya sumber daya penampil yang dijelaskan dalam dokumentasi yang sesuai dengan SDK yang terpasang. Jangan mengasumsikan nama bundel atau lokasi tetap di seluruh versi.
3.2 Buat tampilan Razor untuk Core/MVC
Tambahkan sebuah tampilan (mis., Views/Document/View.cshtml) yang berisi input file, elemen kontainer untuk penampil, dan skrip kecil yang mengunggah file yang dipilih, menerima token aman, dan menginisialisasi widget Doconut Viewer.
Skrip harus:
- Tangkap file yang dipilih dari elemen
<input type="file">. - Kirim file ke endpoint unggahan menggunakan
fetchatauXMLHttpRequest. - Saat respons yang diotorisasi tiba, inisialisasi penampil menggunakan API yang didukung untuk versi yang terpasang.
3.3 Setara WebForms
Di halaman WebForms (mis., DocumentViewer.aspx), letakkan kontrol asp:FileUpload, sebuah tombol untuk memicu unggahan, dan sebuah <div> yang akan menampung penampil. Di code‑behind, panggil layanan Doconut untuk menyimpan file yang diunggah, dapatkan token, dan daftarkan skrip startup yang memanggil fungsi JavaScript (initViewer(token)) untuk membuat instance penampil.
Manfaat Doconut App: Satu widget JavaScript, tiga model UI .NET, tanpa pustaka tambahan. Kesederhanaan pada tingkat terbaik.
4. Sesuaikan Penampil untuk Manajemen Dokumen
Secara default, Doconut Viewer menyediakan toolbar bersih, kontrol zoom, dan toggle tema terang/gelap. Anda dapat menyesuaikan UI agar sesuai dengan merek Anda dan tipe dokumen tertentu.
4.1 Konfigurasi toolbar
Saat menginisialisasi penampil, Anda dapat menentukan item toolbar mana yang harus terlihat (mis., download, print, zoomIn, zoomOut, fullScreen). Menghapus tombol download, misalnya, mencegah pengguna menyimpan file asli.
4.2 Tema dan warna
Setel opsi theme ke 'dark' atau 'light' dan opsional berikan primaryColor yang selaras dengan palet perusahaan Anda. Penampil menghormati variabel CSS, memungkinkan styling lebih dalam melalui stylesheet khusus.
4.3 Alat khusus CAD
Jika Anda menampilkan file DWG, DXF, atau DGN, aktifkan opsi CAD enableMeasurement dan enableLayerToggle. Ini menambahkan alat pengukuran jarak, sudut, dan area serta panel visibilitas layer langsung di toolbar.
4.4 Lokalisasi
Berikan kode locale (mis., 'fr' untuk bahasa Prancis) saat inisialisasi. Semua string UI, tooltip, dan pesan error akan ditampilkan dalam bahasa yang dipilih.
Mengapa menyesuaikan? Doconut App memungkinkan Anda menjaga penampil terlihat seperti ekstensi alami situs Anda sambil tetap memberikan pengalaman yang sama aman, tanpa plugin.
5. Uji Integrasi di Semua Format yang Didukung
Sebelum diluncurkan, jalankan pemeriksaan cepat untuk setiap tipe file yang Anda harapkan pengguna Anda lihat. Menggunakan penampil Doconut App, buka file contoh dari setiap format dan verifikasi bahwa rendering, navigasi, dan alat khusus berfungsi seperti yang dijelaskan.
| Format | Skenario Uji | Hasil yang Diharapkan |
|---|---|---|
| Laporan besar multi‑halaman dengan gambar tersemat | Gulir halus, zoom, dan rendering warna yang akurat | |
| DOCX | Dokumen Word dengan tabel dan catatan kaki | Semua teks, tabel, dan catatan kaki terlihat; tidak ada pergeseran tata letak |
| XLSX | Spreadsheet dengan diagram | Diagram dirender sebagai grafik vektor; zoom tetap jelas |
| PPTX | Deck slide dengan pratinjau statis | Slide pertama ditampilkan dengan benar; tidak ada aset yang rusak |
| DWG | Gambar teknis dengan banyak lapisan | Lapisan dapat diaktifkan, pengukuran berfungsi, garis tetap tajam |
| PSD | File Photoshop dengan lapisan | Lapisan terlihat, warna tepat, zoom tetap tajam |
| SVG | Grafik vektor dengan gradien | Gradien dirender mulus; zoom tetap tajam |
| TIFF | Pemindaian resolusi tinggi | Gambar memuat cepat; zoom mengungkap detail |
Mengikuti daftar periksa ini dengan Doconut App memastikan setiap format yang didukung berperilaku dapat diandalkan bagi pengguna Anda.
Kesimpulan
Menyematkan penampil dokumen yang aman, tanpa plugin kini menjadi mudah dengan Doconut App. Dengan mengikuti langkah-langkah di atas—menginstal SDK, mengkonfigurasi unggahan terenkripsi, menyematkan widget JavaScript ringan, dan menyesuaikan UI—Anda dapat memberikan rendering dokumen yang cepat dan berkualitas tinggi di aplikasi ASP.NET Core, MVC, dan WebForms.
Siap untuk mengevaluasinya? Mulailah dengan halaman unduhan dan dokumentasi resmi Doconut, lalu uji SDK dalam tinjauan keamanan yang sama diterapkan pada sisa aplikasi ASP.NET berbasis Windows Anda.