Отправка писем с помощью Gmail JavaScript API

После того, как мы подготовили сообщение электронной почты, мы можем отправить его в API Gmail, в частности в конечную точку Users.messages: send . Здесь очень важно отметить, что мы должны указывать сообщение электронной почты внутри объекта с именем resource , а не объекта с именем message . В задокументированном примере Google на JavaScript говорится, что объект должен иметь имя message — это неверно и не будет работать. Обратите внимание, что сообщение электронной почты должно быть в кодировке base-64, для этого мы используем window.btoa () . Также обратите внимание, что реализация Google base-64 отличается от того, что предоставляют window.btoa() и window.atob() — поэтому нам необходимо выполнить некоторые замены символов после кодирования. В частности, мы должны заменить + на - и / на _ .

Наконец мы выполним запрос, передав функцию обратного вызова.

 function composeTidy() { $('#compose-modal').modal('hide'); $('#compose-to').val(''); $('#compose-subject').val(''); $('#compose-message').val(''); $('#send-button').removeClass('disabled'); } 

composeTidy() обратного вызова composeTidy() очень composeTidy() . Он просто скрывает модальный состав, очищает поля ввода и затем снова включает кнопку «Отправить».

Ответ на электронное письмо

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

Как и прежде, первое, что мы делаем, это модифицируем пользовательский интерфейс, чтобы обеспечить доступ к этой новой функциональности. Итак, мы собираемся добавить модальный нижний колонтитул к модалу представления сообщений, который мы реализовали ранее.

 var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ? getHeader(message.payload.headers, 'Reply-to') : getHeader(message.payload.headers, 'From')).replace(/\"/g, '&quot;'); var reply_subject = 'Re: '+getHeader(message.payload.headers, 'Subject').replace(/\"/g, '&quot;'); $('body').append( ... '<div class="modal-footer">\ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\ <button type="button" class="btn btn-primary reply-button" data-dismiss="modal" data-toggle="modal" data-target="#reply-modal"\ onclick="fillInReply(\ \''+reply_to+'\', \ \''+reply_subject+'\', \ \''+getHeader(message.payload.headers, 'Message-ID')+'\'\ );"\ >Reply</button>\ </div>' ... ); 

Нижний колонтитул предлагает кнопку «Ответить», которая передает все необходимые данные (теме, идентификатору сообщения) новому модальному ответу, а затем открывает новый модальный. Параметр to требует особого внимания, поэтому он определяется перед разметкой. Мы всегда должны пытаться использовать заголовок Reply-To для параметра to , но если это не предусмотрено, то заголовка From будет достаточно. Нам также необходимо закодировать любые двойные кавычки как HTML-сущность, чтобы предотвратить разрыв нашей собственной разметки. Параметр subject требует экранирования с одинаковыми двойными кавычками и префиксом «Re:».

 function fillInReply(to, subject, message_id) { $('#reply-to').val(to); $('#reply-subject').val(subject); $('#reply-message-id').val(message_id); } 

Функция fillInReply() , которая передает поля модальному ответу, очень проста. Он просто передает полученные данные непосредственно в поля ввода модального ответа.

 <div class="modal fade" id="reply-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Reply</h4> </div> <form onsubmit="return sendReply();"> <input type="hidden" id="reply-message-id" /> <div class="modal-body"> <div class="form-group"> <input type="text" class="form-control" id="reply-to" disabled /> </div> <div class="form-group"> <input type="text" class="form-control disabled" id="reply-subject" disabled /> </div> <div class="form-group"> <textarea class="form-control" id="reply-message" placeholder="Message" rows="10" required></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" id="reply-button" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> 

Модальный ответ очень похож на модальный композит. Основным отличием является скрытое поле, в котором хранится идентификатор сообщения. Это необходимо для правильной работы с электронной почтой в почтовых клиентах — сопоставление темы с префиксом «Re:» недостаточно. Также мы собираемся отключить поля « Кому» и « Тема», так как они не должны изменяться в данный момент, они видны только для предоставления контекста. После sendReply() модальной формы ответа sendReply() функция sendReply() .

 function sendReply() { $('#reply-button').addClass('disabled'); sendMessage( { 'To': $('#reply-to').val(), 'Subject': $('#reply-subject').val(), 'In-Reply-To': $('#reply-message-id').val() }, $('#reply-message').val(), replyTidy ); return false; } 

Функция sendReply() во многом такая же, как sendEmail() , за исключением того, что теперь мы пропускаем заголовок In-Reply-To который позволяет почтовым клиентам правильно вести поток беседы. В документации Google говорится, что заголовок References также должен быть предоставлен, но в нашем тестировании он будет работать без него. Как только ответ отправлен, replyTidy() обратный вызов replyTidy() .

 function replyTidy() { $('#reply-modal').modal('hide'); $('#reply-message').val(''); $('#reply-button').removeClass('disabled'); } 

Опять же, это в значительной степени совпадает с нашим composeTidy() из composeTidy() . Однако на этот раз нет необходимости очищать поля ввода Subject и To, так как наша fillInReply() всегда будет перезаписывать их.

Заключительные замечания

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

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

• Постепенные запросы авторизации, так что пользователь может читать свои входящие сообщения, только соглашаясь на область только для чтения. Затем, когда пользователь нажимает «Создать» или «Ответить», запрашивается другой запрос на авторизацию для области send .
• Поле compose modeal To должно быть изменено с type="email" чтобы пользователь мог ввести комбинацию имени и адреса электронной почты (например, Jamie Shields <jamie@somewhere.com> ).
• Поле compose modeal To должно автоматически заполняться на основе списка контактов пользователя, а также разрешать пользователю выбирать получателя непосредственно из списка.

Существует также много возможностей для добавления новых функций. Некоторые вещи, которые я хотел бы рассмотреть в будущем, включают;

• Добавление возможности пересылки электронной почты
• Добавление заголовков CC и BCC в электронные письма
• Возможность просмотра полного набора заголовков, прикрепленных к электронному письму
• Возможность отправлять электронную почту в формате HTML (с помощью редактора WYSIWYG для создания)

Если у вас есть какие-либо другие улучшения или предложения, пожалуйста, не стесняйтесь добавлять их в комментариях.

И не забывайте, полный исходный код доступен через наше GitHub репо .