Поделиться через

Добавление возможностей электронной почты в приложения TypeScript с помощью Microsoft Graph

В этой статье описано, как расширить приложение, созданное при сборке приложений TypeScript, с помощью Microsoft Graph с помощью API почты Microsoft Graph. Вы используете Microsoft Graph для вывода списка папки "Входящие" пользователя и отправки сообщения электронной почты.

Перечисление папки "Входящие" пользователя

Начните с перечисления сообщений в почтовом ящике пользователя.

  1. Откройте graphHelper.ts и добавьте следующую функцию.

    export async function getInboxAsync(): Promise<PageCollection> {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  return _userClient
    .api('/me/mailFolders/inbox/messages')
    .select(['from', 'isRead', 'receivedDateTime', 'subject'])
    .top(25)
    .orderby('receivedDateTime DESC')
    .get();
}

  2. Замените пустую ListInboxAsync функцию в index.ts на следующую.

    async function listInboxAsync() {
  try {
    const messagePage = await graphHelper.getInboxAsync();
    const messages: Message[] = messagePage.value;

    // Output each message's details
    for (const message of messages) {
      console.log(`Message: ${message.subject ?? 'NO SUBJECT'}`);
      console.log(`  From: ${message.from?.emailAddress?.name ?? 'UNKNOWN'}`);
      console.log(`  Status: ${message.isRead ? 'Read' : 'Unread'}`);
      console.log(`  Received: ${message.receivedDateTime}`);
    }

    // If @odata.nextLink is not undefined, there are more messages
    // available on the server
    const moreAvailable = messagePage['@odata.nextLink'] != undefined;
    console.log(`\nMore messages available? ${moreAvailable}`);
  } catch (err) {
    console.log(`Error getting user's inbox: ${err}`);
  }
}

  3. Запустите приложение, войдите в систему и выберите вариант 2, чтобы получить список папки "Входящие".

    [1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 2
Message: Updates from Ask HR and other communities
  From: Contoso Demo on Yammer
  Status: Read
  Received: 12/30/2021 4:54:54 AM -05:00
Message: Employee Initiative Thoughts
  From: Patti Fernandez
  Status: Read
  Received: 12/28/2021 5:01:10 PM -05:00
Message: Voice Mail (11 seconds)
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 5:00:46 PM -05:00
Message: Our Spring Blog Update
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:49:46 PM -05:00
Message: Atlanta Flight Reservation
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:35:42 PM -05:00
Message: Atlanta Trip Itinerary - down time
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:22:04 PM -05:00

...

More messages available? true

GetInboxAsync

Рассмотрим код в getInboxAsync функции.

Доступ к известным почтовым папкам

Функция передается /me/mailFolders/inbox/messages в _userClient.api построитель запросов, который создает запрос к API списка сообщений . Так как он включает часть /mailFolders/inbox конечной точки API, API возвращает только сообщения в запрошенной почтовой папке. В этом случае, так как папка "Входящие" является хорошо известной папкой по умолчанию в почтовом ящике пользователя, она доступна по известному имени. Доступ к папкам без изменений можно получить таким же образом, заменив известное имя свойством идентификатора почтовой папки. Дополнительные сведения о доступных известных именах папок см. в разделе Тип ресурса mailFolder.

Доступ к коллекции

getUserAsync В отличие от функции из предыдущего раздела, которая возвращает один объект, этот метод возвращает коллекцию сообщений. Большинство API в Microsoft Graph, возвращающих коллекцию, не возвращают все доступные результаты в одном ответе. Вместо этого они используют разбиение на страницы для возврата части результатов, предоставляя метод для клиентов, чтобы запросить следующую страницу.

Размеры страниц по умолчанию

API, использующие разбиение на страницы, реализуют размер страницы по умолчанию. Для сообщений значение по умолчанию — 10. Клиенты могут запрашивать больше (или меньше) с помощью параметра запроса $top . В getInboxAsyncдобавление $top выполняется с помощью .top(25) метода .

Примечание.

Значение, передаваемое в .top() , является верхней границей, а не явным числом. API возвращает количество сообщений до указанного значения.

Получение последующих страниц

Если на сервере доступно больше результатов, ответы коллекции содержат @odata.nextLink свойство с URL-адресом API для доступа к следующей странице. Клиентская библиотека JavaScript предоставляет это свойство объектам PageCollection . Если это свойство не определено, доступны дополнительные результаты.

Значение @odata.nextLink можно передать _userClient.api в , чтобы получить следующую страницу результатов. Кроме того, можно использовать PageIterator объект из клиентской библиотеки для итерации всех доступных страниц.

Сортировка коллекций

Функция использует orderby метод в запросе для запроса результатов, отсортированных по времени получения сообщения (receivedDateTime свойство). Он включает в себя DESC ключевое слово, чтобы сообщения, полученные в последнее время, были перечислены первыми. Этот метод добавляет параметр запроса $orderby в вызов API.

Отправка почты

Теперь добавьте возможность отправки сообщения электронной почты в качестве пользователя, прошедшего проверку подлинности.

  1. Откройте graphHelper.ts и добавьте следующую функцию.

    export async function sendMailAsync(
  subject: string,
  body: string,
  recipient: string,
) {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Create a new message
  const message: Message = {
    subject: subject,
    body: {
      content: body,
      contentType: 'text',
    },
    toRecipients: [
      {
        emailAddress: {
          address: recipient,
        },
      },
    ],
  };

  // Send the message
  return _userClient.api('me/sendMail').post({ message: message });
}

  2. Замените пустую sendMailAsync функцию в index.ts на следующую.

    async function sendMailAsync() {
  try {
    // Send mail to the signed-in user
    // Get the user for their email address
    const user = await graphHelper.getUserAsync();
    const userEmail = user?.mail ?? user?.userPrincipalName;

    if (!userEmail) {
      console.log("Couldn't get your email address, canceling...");
      return;
    }

    await graphHelper.sendMailAsync(
      'Testing Microsoft Graph',
      'Hello world!',
      userEmail,
    );
    console.log('Mail sent.');
  } catch (err) {
    console.log(`Error sending mail: ${err}`);
  }
}

  3. Запустите приложение, войдите в систему и выберите вариант 3, чтобы отправить себе сообщение электронной почты.

    [1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 3
Mail sent.

    Примечание.

    Если вы тестируете с помощью клиента разработчика из Программы разработчика Microsoft 365, отправленное сообщение электронной почты может не быть доставлено, и вы можете получить отчет о недоставке. Если вы хотите разблокировать отправку почты из клиента, обратитесь в службу поддержки через Центр администрирования Microsoft 365.

  4. Чтобы убедиться, что сообщение получено, выберите вариант 2, чтобы получить список папки "Входящие".

описание sendMailAsync

Рассмотрим код в sendMailAsync функции.

Отправка почты

Функция передается /me/sendMail в _userClient.api построитель запросов, который создает запрос к API отправки почты . Построитель запросов принимает объект, Message представляющий сообщение для отправки.

Создание объектов

В отличие от предыдущих вызовов Microsoft Graph, которые считывают только данные, этот вызов создает данные. Чтобы создать элементы с помощью клиентской библиотеки, необходимо создать экземпляр класса , представляющего данные (в данном случае ), Messageзадать нужные свойства, а затем отправить их в вызове API. Так как вызов отправляет данные, post вместо используется getметод .

Следующее действие

Добавление дополнительных API Microsoft Graph

  • Last updated on