Udostępnij za pośrednictwem

Test klientowej aplikacji internetowej JavaScript, która wywołuje usługę Microsoft Graph

  • Artykuł

Z tego samouczka dowiesz się, jak używać serwera proxy deweloperskiego do testowania przykładowej aplikacji internetowej po stronie klienta JavaScript, która wywołuje program Microsoft Graph.

Warunki wstępne

W tej części samouczka założono, że na maszynie zainstalowano i skonfigurowano serwer proxy deweloperów. Jeśli nie, zrób to teraz.

Aby skorzystać z tego samouczka, potrzebujesz:

Napiwek

Zalecamy używanie dzierżawy usługi Microsoft 365 dla dewelopera z zainstalowanymi pakietami treści. Zdobądź bezpłatny dostęp, rejestrując się w programie Microsoft 365 Developer Program.

Klonowanie i konfigurowanie przykładowej aplikacji

  • Pobierz przykładową aplikację
  • Postępuj zgodnie z instrukcjami , aby skonfigurować aplikację.

Uruchamianie serwera proxy deweloperskiego

Dev Proxy zawiera zaprojektowaną z góry konfigurację do testowania aplikacji wysyłających żądania do API Microsoft Graph i SharePoint Online.

  • Otwórz wiersz polecenia, wprowadź devproxy --config-file "~appFolder/presets/m365.json" i naciśnij Enter, aby uruchomić serwer proxy dev z konfiguracją platformy Microsoft 365.

Uruchamianie przykładowej aplikacji

  • Otwórz wiersz polecenia i przejdź do katalogu samples.
  • Wprowadź npx lite-server i naciśnij Enter, aby uruchomić przykładowy serwer internetowy aplikacji.

Zrzut ekranu przedstawiający przykładową aplikację działającą w przeglądarce Microsoft Edge w systemie macOS. Aplikacja wyświetla duże logo firmy Microsoft z dwoma przyciskami poniżej. Przycisk podstawowy z tekstem

Testowanie przykładowej aplikacji

  1. W uruchomionej aplikacji wybierz przycisk Without SDK.

Ostrożność

Jeśli po kliknięciu przycisku Without SDK zostanie wyświetlona pusta strona, sprawdź, czy masz skonfigurowaną rejestrację aplikacji usługi Azure AD . Problem występuje, gdy brakuje pliku .env zawierającego Client ID rejestracji aplikacji.

  1. Wybierz przycisk Login i ukończ przepływ logowania.

Zrzut ekranu przedstawiający przykładową aplikację działającą w przeglądarce Microsoft Edge w systemie Windows 11. Aplikacja wyświetla duże logo firmy Microsoft z dwoma przyciskami poniżej. Przycisk podstawowy z tekstem

Dev Proxy wprowadza usterki do aplikacji, przechwytując żądania do Microsoft Graph. Używa 50% szans, żeby spowodować niepowodzenie żądań przy użyciu losowego obsługiwanego kodu stanu błędu HTTP.

Wyświetl dane wyjściowe serwera proxy i poświęć chwilę na odświeżenie przykładowej aplikacji. Zobacz, jak w tym przypadku przykładowa aplikacja obsługuje (lub nie) błędy wprowadzone przez serwer proxy.

Zrzut ekranu przedstawiający przykładową aplikację działającą w przeglądarce Microsoft Edge. Awatary użytkownika nie są wyświetlane w aplikacji. Narzędzia deweloperskie przeglądarki Microsoft Edge są otwarte z boku, z błędami wyświetlanymi w dzienniku konsoli.

  1. Naciśnij Ctrl + C, aby zatrzymać proxy dewelopera.

Następny krok

Odkryj przewodniki instruktażowe