사용자의 전자 메일 표시

  • 5분

JavaScript 앱을 빌드하고 Microsoft 인증 라이브러리를 사용하여 Microsoft 365에 연결했습니다. 이제 사용자의 전자 메일을 검색하여 앱에 표시할 차례입니다.

앱에 필요한 사용 권한 결정

Microsoft Graph에 의해 노출되는 모든 데이터는 보호되며 앱에 액세스하려면 적절한 권한이 있어야 합니다. 필요한 권한은 앱에서 액세스해야 하는 정보 유형에 따라 달라집니다. 예를 들어 사용자의 일정에 액세스하려면 앱에 Calendars.Read 권한이 있어야 합니다. 사용자의 전자 메일에 액세스하려면 앱에 Mail.Read 권한이 필요합니다. 각 작업에 필요한 사용 권한의 정확한 목록은 Microsoft Graph API 참조에서 확인할 수 있습니다.

앱이 다른 유형의 데이터를 로드하는 경우 사용자는 이 정보에 액세스하는 데 필요한 여러 권한을 부여해야 합니다. 앱은 실제로 필요한 권한만 요청해야 합니다.

앱에 두 페이지가 있다고 가정해 보겠습니다. 한 페이지에는 사용자의 전자 메일이 표시되고 다른 페이지에는 일정이 표시됩니다. 사용자가 처음으로 앱에 로그인하면 앱은 기본 프로필 정보에 대한 액세스만 요청합니다. 사용자가 전자 메일을 표시하는 페이지로 이동하면 앱에서 전자 메일을 읽을 수 있는 권한을 요청합니다. 사용자가 앱에서 일정을 표시하는 페이지를 방문하지 않는 경우 앱은 일정 데이터에 액세스할 수 없습니다.

이 패턴을 동적 동의라고 하며 Microsoft 365에 연결된 앱에서 권한을 요청하는 것이 좋습니다. 동적 동의를 통해 사용자는 사용하는 앱과 공유하는 데이터를 제어하여 보안 위험을 최소화합니다.

필요한 사용 권한 지정

Microsoft Graph를 호출하기 전에 Microsoft 인증 라이브러리에 Microsoft Graph에 필요한 사용 권한 목록이 포함되어 있는지 확인합니다. Microsoft 인증 라이브러리는 이전에 검색한 액세스 토큰에 필요한 범위가 있는지 여부를 자동으로 확인합니다. 그렇지 않으면 자동으로 새 액세스 토큰을 검색하려고 시도합니다. 앱을 처음 사용하는 경우 Microsoft 인증 라이브러리는 이 정보에 액세스하여 앱에 동의하도록 요청하는 팝업 창을 표시합니다.

전역 변수에서 Microsoft 인증 라이브러리 범위를 추적하는 경우 호출을 실행하기 전에 필요한 권한이 범위 목록에 포함되어 있는지 확인합니다. 모든 호출 전에 필요한 범위를 확인해야 하므로 도우미 함수에서 이를 래핑할 수 있습니다.

function ensureScope (scope) {
  if (!msalRequest.scopes.some((s) => s.toLowerCase() === scope.toLowerCase())) {
    msalRequest.scopes.push(scope);
  }
}

Microsoft Graph를 호출하여 데이터를 검색할 때 도우미 함수를 호출하여 필요한 권한이 포함되는지 확인합니다.

async function getEmails() {
  ensureScope('mail.read');
  // ...
}

Microsoft Graph에서 사용자의 전자 메일을 검색합니다.

Microsoft Graph에서 사용자의 전자 메일을 가져오려면 /me/messages 엔드포인트를 호출합니다. 로그인한 사용자의 사서함에서 전자 메일 목록을 반환합니다. 사용자의 전자 메일을 가져오려면 앱에 Mail.Read 권한이 부여되어야 합니다. Microsoft Graph SDK를 사용하여 Microsoft Graph 엔드포인트를 호출할 수 있습니다. 이를 사용하려면 엔드포인트 및 실행하려는 요청 유형을 지정합니다.

전자 메일 검색은 다음과 같이 실행하는 GET 요청입니다.

graphClient.api('/me/messages').get();

Microsoft Graph 엔드포인트는 임의 순서로 데이터를 반환합니다. 최신 메시지를 가져오려면 받은 날짜를 기준으로 내림차순으로 정렬합니다.

graphClient
  .api('/me/messages')
  .orderby('receivedDateTime desc')
  .get();

Microsoft Graph에서 데이터를 검색할 때는 항상 앞에서 설명한 대로 필요한 데이터만 검색해야 합니다. Microsoft Graph에서 검색하고 유선을 통해 앱으로 전송하는 데이터의 양을 최소화하면 앱의 성능이 크게 향상됩니다.

Microsoft 365에서 검색되는 데이터의 양을 다음 두 가지 방법으로 제한할 수 있습니다.

  • 가져올 항목 수를 선택합니다.
  • 포함할 특정 정보를 선택합니다.

검색할 속성을 지정하려면 select 메서드를 사용하여 Microsoft Graph 요청을 확장하고 반환할 속성 목록을 쉼표로 구분된 목록으로 전달합니다. 예를 들어 제목과 받은 날짜/시간이 포함된 이메일 목록을 얻으려면 다음 명령을 사용합니다.


graphClient
  .api('/me/messages')
  .select('subject,receivedDateTime')
  .orderby('receivedDateTime desc')
  .get();

팁

Microsoft Graph API 참조의 각 엔드포인트에서 사용할 수 있는 속성의 전체 목록을 찾을 수 있습니다.

Microsoft 365에서 반환되는 데이터의 양을 제한하기 위해 수행할 수 있는 또 다른 작업은 가져올 항목 수를 지정하는 것입니다. 가져올 항목 수를 지정하려면 top 메서드를 사용하여 Microsoft Graph 요청을 확장합니다. 예를 들어 마지막으로 받은 10개의 전자 메일을 검색하려면 다음 명령을 사용합니다.

graphClient
  .api('/me/messages')
  .select('subject,receivedDateTime')
  .orderby('receivedDateTime desc')
  .top(10)
  .get();

다음 단계

지금까지 배운 모든 내용을 연습하고 앱을 확장하여 현재 사용자에 대해 마지막으로 받은 10개의 전자 메일을 표시해 보겠습니다.