Bagikan melalui

Menguji aplikasi web sisi klien JavaScript yang memanggil Microsoft Graph

Dalam tutorial ini, Anda mempelajari cara menggunakan Dev Proxy untuk menguji sampel aplikasi web sisi klien JavaScript yang memanggil Microsoft Graph.

Prasyarat

Bagian tutorial ini mengasumsikan bahwa Anda menginstal dan mengonfigurasi Dev Proxy di komputer Anda. Jika tidak, lakukan itu sekarang.

Untuk mengikuti tutorial ini, Anda perlu:

  • Penyewa Microsoft 365.
  • Akun dengan izin untuk membuat pendaftaran aplikasi Microsoft Entra.
  • Git (lihat panduan penyiapan Git milik GitHub).
  • nodejs LTS.

Saran

Kami menyarankan agar Anda menggunakan Penyewa Pengembang Microsoft 365 dengan paket konten yang terinstal. Dapatkan langganan gratis Anda dengan mendaftar ke Program Pengembang Microsoft 365.

Mengkloning dan mengonfigurasi aplikasi sampel

  • Unduh aplikasi sampel
  • Ikuti petunjuk untuk mengonfigurasi aplikasi.

Mulai Proksi Dev

Dev Proxy dilengkapi dengan konfigurasi prasetel untuk menguji aplikasi yang mengirim permintaan ke Microsoft Graph dan API SharePoint Online.

  • Buka prompt perintah, masukkan devproxy --config-file "~appFolder/config/m365.json" dan tekan Enter untuk memulai Dev Proxy dengan konfigurasi untuk Microsoft 365.

Luncurkan aplikasi sampel

  • Buka command prompt dan pindah ke direktori samples.
  • Masukkan npx lite-server dan tekan Enter untuk memulai contoh server web aplikasi.

Cuplikan layar aplikasi sampel yang berjalan di browser Microsoft Edge di macOS. Aplikasi ini menunjukkan logo Microsoft besar dengan dua tombol di bawahnya. Tombol utama dengan teks 'Dengan SDK' dan tombol sekunder dengan teks 'Tanpa SDK'.

Menguji aplikasi sampel

  1. Di aplikasi yang sedang berjalan, pilih tombol Without SDK.

Perhatian

Jika Anda mendapatkan halaman kosong setelah mengklik tombol Without SDK, periksa apakah Anda telah mengonfigurasi Pendaftaran Aplikasi Azure AD. Masalah ini terjadi ketika file .env yang berisi Client ID pendaftaran aplikasi Anda hilang.

  1. Pilih tombol Login dan selesaikan proses masuk.

Cuplikan layar aplikasi sampel yang berjalan di browser Microsoft Edge di Windows 11. Aplikasi ini menunjukkan logo Microsoft besar dengan dua tombol di bawahnya. Tombol utama dengan teks 'Masuk' dan tombol sekunder dengan teks 'Kembali'.

Dev Proxy memperkenalkan kesalahan ke dalam aplikasi Anda dengan mencegat permintaan ke Microsoft Graph. Ini menggunakan peluang 50% untuk kegagalan permintaan dengan kode status kesalahan HTTP yang didukung secara acak .

Lihat output proksi dan luangkan waktu sejenak untuk me-refresh aplikasi sampel. Lihat bagaimana aplikasi sampel menangani (atau tidak, dalam hal ini) kegagalan yang diperkenalkan oleh proksi.

Cuplikan layar dari aplikasi sampel yang berjalan di Microsoft Edge. Avatar pengguna tidak ditampilkan di aplikasi. Alat Pengembang Microsoft Edge terbuka di samping dengan kesalahan yang ditampilkan pada log konsol.

  1. Tekan Ctrl + C untuk menghentikan Dev Proxy.

Langkah berikutnya

Jelajahi petunjuk praktis

  • Last updated on