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

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

사전 요구 사항

자습서의 이 부분에서는 컴퓨터에 개발 프록시를 설치하고 구성했다고 가정합니다. 그렇지 않은 경우 지금 수행합니다.

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

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

샘플 앱 복제 및 구성

개발 프록시 시작

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

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

샘플 앱 시작

  • 명령 프롬프트를 열고 디렉터리로 samples 변경합니다.
  • 를 입력 npx lite-server 하고 Enter 키를 눌러 샘플 앱 웹 서버를 시작합니다.

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

샘플 앱 테스트

  1. 실행 중인 앱에서 단추를 선택합니다 Without SDK .

주의

단추를 클릭한 후 빈 페이지가 Without SDK 있는 경우 Azure AD 앱 등록을 구성했는지 검사. 이 문제는 앱 등록의 가 .env 포함된 Client ID 파일이 누락된 경우에 발생합니다.

  1. Login 단추를 선택하고 로그인 흐름을 완료합니다.

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

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

프록시 출력을 보고 잠시 시간을 내어 샘플 앱을 새로 고칩니다. 샘플 앱이 프록시에 의해 도입된 실패를 처리하는 방법(이 경우에는 그렇지 않음)을 참조하세요.

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

  1. Ctrl + C를 눌러 개발 프록시를 중지합니다.

다음 단계