조직 데이터: Microsoft Entra ID 앱 등록 만들기

2025-06-13

조직 데이터(전자 메일, 파일, 채팅 및 일정 이벤트)를 사용자 지정 애플리케이션에 직접 통합하여 사용자 생산성을 향상시킵니다. Microsoft Graph API 및 Microsoft Entra ID를 사용하면 앱 내에서 관련 데이터를 원활하게 검색하고 표시할 수 있으므로 사용자가 컨텍스트를 전환할 필요가 줄어듭니다. 고객에게 전송된 전자 메일을 참조하거나 Teams 메시지를 검토하거나 파일에 액세스하는 경우 사용자는 앱을 종료하지 않고도 필요한 정보를 빠르게 찾을 수 있으므로 의사 결정 프로세스를 간소화할 수 있습니다.

이 연습에서 다음을 수행합니다.

Microsoft Graph가 조직 데이터에 액세스하여 앱으로 가져올 수 있도록 Microsoft Entra ID 앱 등록을 만듭니다.
team 특정 채널로 채팅 메시지를 보내는 데 필요한 Microsoft Teams에서 ID를 찾아서 찾 channel 습니다.
프로젝트의 .env 파일을 Microsoft Entra ID 앱 등록의 값으로 업데이트합니다.

Microsoft 클라우드 시나리오 개요

Microsoft Entra ID 앱 등록 만들기

Azure Portal로 이동하여 Microsoft Entra ID를 선택합니다.
관리 -->앱 등록,+ 새 등록을 선택합니다.
아래와 같이 새 앱 등록 양식 세부 정보를 입력하고 등록을 선택합니다.
- 이름: microsoft-graph-app
- 지원되는 계정 유형: 모든 조직 디렉터리의 계정(모든 Microsoft Entra ID 테넌트 - 다중 테넌트)
- 리디렉션 URI:
  - SPA(단일 페이지 애플리케이션)를 선택하고 http://localhost:4200 필드에 입력 합니다.
- 등록을 선택하여 앱 등록을 만듭니다.

리소스 메뉴에서 개요 를 선택하고 값을 클립보드에 복사 Application (client) ID 합니다.

프로젝트의 .env 파일 업데이트

편집기에서 .env 파일을 열고 값을 할당 Application (client) ID 합니다 ENTRAID_CLIENT_ID.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
```
앱에서 Teams 채널로 메시지를 보낼 수 있도록 하려면 Microsoft 365 개발 테넌트 계정을 사용하여 Microsoft Teams 에 로그인합니다(자습서의 사전 준비에서 설명).
로그인한 후 팀을 확장하고 앱에서 메시지를 보낼 채널을 찾습니다. 예를 들어 회사 팀 및 일반 채널(또는 사용하려는 팀/채널)을 선택할 수 있습니다.
팀 헤더에서 세 개의 점(...)을 클릭하고 팀에 대한 링크 가져오기를 선택합니다.
팝업 창에 표시되는 링크에서 팀 ID는 다음 문자와 숫자 team/의 문자열입니다. 예를 들어 링크 "https://teams.microsoft.com/l/team/19%3ae9b9.../"에서 팀 ID는 19%3ae9b9... 다음 / 문자까지
팀 ID를 복사하여 TEAM_ID 파일에 할당합니다.
채널 헤더에서 세 개의 점(...)을 클릭하고 채널에 대한 링크 가져오기를 선택합니다.
팝업 창에 표시되는 링크에서 채널 ID는 다음 문자와 숫자 channel/의 문자열입니다. 예를 들어 링크 "https://teams.microsoft.com/l/channel/19%3aQK02.../"에서 채널 ID는 19%3aQK02... 다음 / 문자까지
채널 ID를 복사하여 .envCHANNEL_ID 합니다.
계속하기 전에 env 파일을 저장합니다.

애플리케이션 및 API 서버 시작/다시 시작

이 시점까지 완료한 연습에 따라 다음 단계 중 하나를 수행합니다.

이전 연습에서 데이터베이스, API 서버 및 웹 서버를 시작한 경우 API 서버 및 웹 서버를 중지하고 다시 시작하여 .env 파일 변경 내용을 선택해야 합니다. 데이터베이스를 실행 상태로 둘 수 있습니다.

API 서버 및 웹 서버를 실행하는 터미널 창을 찾아 Ctrl+C 를 눌러 중지합니다. 각 터미널 창에 입력하고 npm start Enter 키를 눌러 다시 시작 합니다. 다음 연습을 계속합니다.
데이터베이스, API 서버 및 웹 서버를 아직 시작하지 않은 경우 다음 단계를 완료합니다.
1. 다음 단계에서는 Visual Studio Code에서 세 개의 터미널 창을 만듭니다.
2. Visual Studio Code 파일 목록에서 .env 파일을 마우스 오른쪽 단추로 클릭하고 통합 터미널에서 열기를 선택합니다. 계속하기 전에 터미널이 프로젝트의 루트인 openai-acs-msgraph 에 있는지 확인합니다.
3. 다음 옵션 중 하나를 선택하여 PostgreSQL 데이터베이스를 시작합니다.
  - Docker Desktop을 설치하고 실행 중인 경우 터미널 창에서 실행하고 docker-compose upEnter 키를 누릅니다.
  - Podman-compose가 설치되고 실행 중인 Podman이 있는 경우 터미널 창에서 실행하고 podman-compose upEnter 키를 누릅니다.
  - Docker Desktop, Podman, nerdctl 또는 설치한 다른 컨테이너 런타임을 사용하여 PostgreSQL 컨테이너를 직접 실행하려면 터미널 창에서 다음 명령을 실행합니다.
    - Mac, Linux 또는 Linux용 Windows 하위 시스템(WSL):
```
[docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
    - PowerShell이 있는 Windows:
```
[docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
```
4. 데이터베이스 컨테이너가 시작되면 Visual Studio Code +의 아이콘을 눌러 두 번째 터미널 창을 만듭니다.
5. cd 서버/typescript 폴더로 이동하고 다음 명령을 실행하여 종속성을 설치하고 API 서버를 시작합니다.
  - npm install
  - npm start
6. + Visual Studio Code 터미널 도구 모음에서 아이콘을 다시 눌러 세 번째 터미널 창을 만듭니다.
7. cd 클라이언트 폴더에 다음 명령을 실행하여 종속성을 설치하고 웹 서버를 시작합니다.
  - npm install
  - npm start
8. 브라우저가 시작되고 이 브라우저로 이동 http://localhost:4200됩니다.

다음 단계

조직 데이터: 사용자 로그인 및 액세스 토큰 가져오기