연습 - 사용자의 전자 메일 표시

4분

이 연습에서는 사용자가 최근 10개의 전자 메일을 볼 수 있도록 앱을 확장합니다.

Microsoft Graph 전자 메일 로드

먼저 Microsoft Graph 호출을 추가하여 현재 사용자의 최근 10개 전자 메일을 로드합니다.

코드 편집기에서 graph.js 파일을 엽니다.

파일의 끝에 새 비동기 함수를 추가하여 마지막 10개의 전자 메일을 검색합니다. 각 전자 메일의 제목과 받은 날짜 및 시간을 로드합니다.

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

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

전자 메일을 표시할 자리 표시자 추가

다음으로, 단추를 사용하여 앱을 확장하여 전자 메일을 로드하고 표시할 자리 표시자를 추가합니다.

코드 편집기에서 index.html 파일을 엽니다.
<h4>Welcome <span id="userName"></span></h4> 줄을 찾아 바로 뒤에 다음 변경 내용을 추가합니다.
```
<button onclick="displayEmail();" id="displayEmail">Show email</button>
<ul id="emails"></ul>
```

전자 메일을 로드하는 단추와 표시할 자리 표시자를 사용하여 콘텐츠 블록을 확장합니다.

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <button onclick="displayEmail();" id="displayEmail">Show email</button>
  <ul id="emails"></ul>
</div>

앱에 전자 메일 표시

마지막 단계는 Microsoft Graph 사용하여 전자 메일을 요청하고 자리 표시자에 표시하는 것입니다.

코드 편집기에서 ui.js 파일을 엽니다.

파일의 끝에 displayEmail 함수를 추가합니다.

async function displayEmail() {
  var emails = await getEmails();
  if (!emails || emails.value.length < 1) {
    return;
  }

  document.getElementById('displayEmail').style = 'display: none';

  var emailsUl = document.getElementById('emails');
  emails.value.forEach(email => {
    var emailLi = document.createElement('li');
    emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
    emailsUl.appendChild(emailLi);
  });
}

앱 실행

Microsoft Graph 사용하여 사용자의 전자 메일을 표시하도록 앱을 확장했습니다. 앱을 로컬로 실행해 보겠습니다.

터미널에서 다음 명령을 실행하여 웹앱을 미리 봅니다.
```
npm start
```
브라우저는 http://localhost:8080을 가리켜야 합니다.
Microsoft에 로그인 단추를 선택하여 Microsoft 365 계정으로 로그인합니다.
계정으로 로그인한 후 전자 메일 표시 단추를 선택합니다.
앱을 처음 실행하는 경우 앱에 이메일에 대한 액세스 권한을 부여하라는 메시지가 표시됩니다. 계속하려면 요청에 동의합니다.
앱에 표시된 마지막 10개의 전자 메일이 표시됩니다.

팁

전자 메일이 표시되지 않으면 앱에 로그인하는 데 사용하는 계정의 받은 편지함에 전자 메일이 있는지 확인합니다.

연습 - 사용자의 전자 메일 표시

Microsoft Graph 전자 메일 로드

전자 메일을 표시할 자리 표시자 추가

앱에 전자 메일 표시

앱 실행

피드백