Microsoft Graph를 호출하는 JavaScript 클라이언트 쪽 웹 애플리케이션 테스트

이 자습서에서는 개발자 프록시를 사용하여 Microsoft Graph를 호출하는 샘플 JavaScript 클라이언트 쪽 웹 애플리케이션을 테스트하는 방법을 알아봅니다.

필수 구성 요소

자습서의 이 부분에서는 컴퓨터에 개발 프록시를 설치하고 구성했다고 가정합니다. 그렇지 않다면, 지금 그렇게 하세요.

이 자습서를 수행하려면 다음이 필요합니다.

팁

콘텐츠 팩이 설치된 Microsoft 365 개발자 테넌트를 사용하는 것이 좋습니다. 무료 테넌트를 받으려면 Microsoft 365 개발자 프로그램 에 등록하세요.

개발자 프록시는 Microsoft Graph 및 SharePoint Online API에 요청을 보내는 앱을 테스트하기 위한 사전 설정 구성과 함께 제공됩니다.

명령 프롬프트를 열고, devproxy --config-file "~appFolder/presets/m365.json" 입력하고, Enter 눌러 Microsoft 365용 구성으로 개발 프록시를 시작합니다.

macOS의 Microsoft Edge 브라우저에서 실행되는 샘플 앱의 스크린샷 앱 아래에 두 개의 단추가 있는 큰 Microsoft 로고가 표시됩니다. 'SDK 사용' 텍스트가 있는 기본 단추와 'SDK 제외' 텍스트가 있는 보조 단추입니다.

주의

Without SDK 단추를 클릭했을 때 빈 페이지가 표시된다면 Azure AD 앱 등록 가구성되어 있는지 확인하세요. 이 문제는 앱 등록의 .env 포함하는 Client ID 파일이 누락된 경우에 발생합니다.

Windows 11의 Microsoft Edge 브라우저에서 실행되는 샘플 앱의 스크린샷 앱 아래에 두 개의 단추가 있는 큰 Microsoft 로고가 표시됩니다. '로그인' 텍스트가 있는 기본 단추와 '뒤로' 텍스트가 있는 보조 단추입니다.

개발자 프록시는 Microsoft Graph에 대한 요청을 가로채 애플리케이션에 오류를 도입합니다. 50%의 확률로 임의의 요청을 실패시키며 지원되는 HTTP 오류 상태 코드를 사용합니다.

프록시 출력을 보고 잠시 시간을 내어 샘플 앱을 새로 고칩니다. 샘플 앱이 프록시에 의해 도입된 오류를 처리하는 방법(이 경우 여부)을 확인합니다.

Microsoft Edge에서 실행되는 샘플 앱의 스크린샷 사용자 아바타는 앱에 표시되지 않습니다. Microsoft Edge 개발자 도구는 콘솔 로그에 표시된 오류와 함께 측면에 열려 있습니다.