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

2025-06-13

Microsoft Graph가 조직 데이터에 액세스하려면 사용자가 Microsoft Entra ID를 사용하여 인증해야 합니다. 이 연습에서는 Microsoft Graph 도구 키트의 mgt-login 구성 요소를 사용하여 사용자를 인증하고 액세스 토큰을 검색하는 방법을 알아봅니다. 그런 다음 액세스 토큰을 사용하여 Microsoft Graph를 호출할 수 있습니다.

비고

Microsoft Graph를 접하는 경우 Microsoft Graph 기본 사항 학습 경로에서 자세한 내용을 알아볼 수 있습니다.

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

Microsoft Entra ID 앱을 Microsoft Graph 도구 키트와 연결하여 사용자를 인증하고 조직 데이터를 검색하는 방법을 알아봅니다.
범위의 중요성에 대해 알아봅니다.
Microsoft Graph 도구 키트의 mgt-login 구성 요소를 사용하여 사용자를 인증하고 액세스 토큰을 검색하는 방법을 알아봅니다.

이전 연습에서는 Microsoft Entra ID에서 앱 등록을 만들고 애플리케이션 서버 및 API 서버를 시작했습니다. 또한 파일에서 .env 다음 값을 업데이트했습니다(TEAM_ID 선택 CHANNEL_ID 사항).
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
계속하기 전에 이전 연습을 완료했는지 확인합니다.
브라우저()http://localhost:4200로 돌아가서 헤더 에서 로그인 을 선택하고 Microsoft 365 개발자 테넌트에서 관리자 사용자 계정을 사용하여 로그인합니다.

팁 (조언)

Microsoft 365 개발자 테넌트 관리자 계정으로 로그인합니다. Microsoft 365 관리 센터로 이동하여 개발자 테넌트에서 다른 사용자를 볼 수 있습니다.
애플리케이션에 처음으로 로그인하는 경우 애플리케이션에서 요청한 권한에 동의하라는 메시지가 표시됩니다. 코드를 탐색할 때 다음 섹션에서 이러한 권한("범위"라고도 함)에 대해 자세히 알아봅니다. 계속하려면 [수락]을 선택합니다.
로그인하면 헤더에 표시되는 사용자의 이름이 표시됩니다.

이제 로그인했으므로 사용자를 로그인하고 액세스 토큰 및 사용자 프로필을 검색하는 데 사용되는 코드를 살펴보겠습니다. Microsoft Graph 도구 키트의 일부 인 mgt-login 웹 구성 요소에 대해 알아봅니다.

팁 (조언)

Visual Studio Code를 사용하는 경우 다음을 선택하여 파일을 직접 열 수 있습니다.

Windows/Linux: Ctrl+P
Mac: Cmd + P

그런 다음 열려는 파일의 이름을 입력합니다.

클라이언트/package.json 열고 해당 패키지가 @microsoft/mgt 종속성에 포함되어 있는지 확인 @microsoft/mgt-components 합니다. 이 @microsoft/mgt 패키지에는 MSAL(Microsoft 인증 라이브러리) 공급자 기능 및 mgt-login 과 같은 웹 구성 요소 및 사용자를 로그인하고 조직 데이터를 검색하고 표시하는 데 사용할 수 있는 기타 구성 요소가 포함되어 있습니다.
클라이언트/src/main.ts 열고 패키지에서 다음 가져오기를 @microsoft/mgt-components 확인합니다. 가져온 기호는 애플리케이션에서 사용되는 Microsoft Graph 도구 키트 구성 요소를 등록하는 데 사용됩니다.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
파일 아래쪽으로 스크롤하여 다음 코드를 확인합니다.
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
이 코드는 mgt-login, mgt-search-results및 mgt-person 웹 구성 요소를 등록하고 애플리케이션에서 사용할 수 있도록 합니다.
mgt-login 구성 요소를 사용하여 사용자를 로그인하려면 Microsoft Entra ID 앱의 클라이언트 ID(.env 파일에 다음과 같이 ENTRAID_CLIENT_ID저장됨)를 참조하고 사용해야 합니다.
graph.service.ts 열고 함수를 찾습니다init(). 파일의 전체 경로는 클라이언트/src/app/core/graph.service.ts. 다음과 같은 가져오기 및 코드가 표시됩니다.
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
이 코드는 앱 Msal2Provider 등록에서 Microsoft Entra ID 클라이언트 ID를 전달하고 scopes 앱이 액세스를 요청할 새 개체를 만듭니다. 앱이 scopes 액세스할 Microsoft Graph 리소스에 대한 액세스를 요청하는 데 사용됩니다. 개체를 Msal2Provider 만든 후에는 Microsoft Graph 도구 키트 구성 요소에서 Microsoft Graph에서 데이터를 검색하는 데 사용되는 개체에 할당 Providers.globalProvider 됩니다.
편집기에서 header.component.html 열고 mgt-login 구성 요소를 찾습니다. 파일의 전체 경로는 클라이언트/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
mgt-login 구성 요소는 사용자 로그인을 사용하도록 설정하고 Microsoft Graph와 함께 사용되는 토큰에 대한 액세스를 제공합니다. 로그인에 성공하면 함수를 loginCompleted 호출 loginCompleted() 하는 이벤트가 트리거됩니다. mgt-login은 이 예제의 Angular 구성 요소 내에서 사용되지만 모든 웹 애플리케이션과 호환됩니다.

mgt-login 구성 요소의 표시는 설정featureFlags.microsoft365Enabled되는 값에 true 따라 달라집니다. 이 사용자 지정 플래그는 환경 변수가 ENTRAID_CLIENT_ID 있는지 확인하여 애플리케이션이 올바르게 구성되고 Microsoft Entra ID에 대해 인증할 수 있는지 확인합니다. 사용자가 전체 연습 시퀀스를 따르지 않고 자습서 내에서 AI 또는 통신 연습만 완료하도록 선택하는 경우를 수용하기 위해 플래그가 추가됩니다.
header.component.ts 열고 함수를 찾습니다loginCompleted. 이 함수는 이벤트가 내보내지고 로그인한 사용자 프로필 loginCompleted검색을 처리할 때 Providers.globalProvider 호출됩니다.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
이 예제에서는 Microsoft Graph me API를 호출하여 사용자의 프로필을 검색합니다(me 현재 로그인한 사용자를 나타냅니다). 코드 문은 this.userLoggedIn.emit(me) 구성 요소에서 이벤트를 내보내 프로필 데이터를 부모 구성 요소에 전달합니다. 이 경우 부모 구성 요소는 애플리케이션의 루트 구성 요소인 app.component.ts 파일입니다.

mgt-login 구성 요소에 대한 자세한 내용은 Microsoft Graph 도구 키트 설명서를 참조하세요.
이제 애플리케이션에 로그인했으므로 조직 데이터를 검색하는 방법을 살펴보겠습니다.

다음 단계

조직 데이터: 파일 검색, 채팅 및 Teams에 메시지 보내기

다음을 통해 공유

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

로그인 기능 사용

로그인 코드 탐색

다음 단계

피드백

추가 리소스