JavaScript 앱을 Microsoft 365에 연결

12분

이 연습에서는 Microsoft 365에 연결된 JavaScript 앱을 만듭니다. Microsoft 인증 라이브러리 JavaScript 라이브러리를 사용하여 사용자가 Microsoft 365 계정으로 앱에 로그인할 수 있도록 허용합니다. 그런 다음 Microsoft Graph JavaScript SDK를 사용하여 해당 이름이 표시됩니다.

앱 실행

이 연습에 사용된 초기 앱 코드를 가져오려면 다음 옵션 중 하나를 선택합니다.

Git을 사용하는 경우 git clone 명령을 사용하여 프로젝트를 복제합니다.
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
Git을 사용하지 않는 경우 웹 브라우저에서 https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart로 이동합니다. 코드 단추와 ZIP 다운로드를 선택합니다. zip 파일을 컴퓨터에 추출합니다.
코드 편집기에서 폴더를 엽니다.
auth.js 파일을 열고 상수를 msalConfig찾습니다.
```
const msalConfig = {
    auth: { .. }
}
```
속성 값을 clientId 이전에 등록한 Microsoft Entra 애플리케이션(spa-aad-app)의 복사된 애플리케이션(클라이언트) ID 값으로 바꿉니다. 이 값은 Microsoft Entra 애플리케이션(spa-aad-app)의 개요 페이지에서 가져올 수 있습니다.
동일한 auth.js 파일에서 속성을 찾습니다 msalConfig.auth.authority . <your directory ID here> 값을 이전에 등록한 Microsoft Entra 애플리케이션(spa-aad-app)의 디렉터리(테넌트) ID 값으로 바꿉니다. 이 값은 Microsoft Entra 애플리케이션(spa-aad-app)의 개요 페이지에서 가져올 수 있습니다.

상수는 msalConfig Microsoft Entra 테넌트 및 등록된 애플리케이션의 고유 ID를 사용하여 다음 코드와 유사하게 표시됩니다.
```
const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};
```
터미널에서 다음 명령을 실행하여 웹앱을 미리 봅니다.
```
npm start
```
기본 브라우저가 열리고 http://localhost:8080을 가리킵니다.
Microsoft에 로그인 단추를 선택하여 Microsoft 365 계정으로 로그인합니다.
계정에 로그인하고 앱에 동의하면 사용자 이름을 보여 주는 앱이 표시됩니다.
터미널 창에서 CTRL+C를 선택하여 Node.js 서버를 중지합니다.

JavaScript 앱을 Microsoft 365에 연결

앱 실행

피드백