Освоение входящих сообщений с помощью API Gmail JavaScript

 function handleClientLoad() { gapi.client.setApiKey(apiKey); window.setTimeout(checkAuth, 1); } function checkAuth() { gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult); } function handleAuthClick() { gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult); return false; } function handleAuthResult(authResult) { if(authResult && !authResult.error) { loadGmailApi(); $('#authorize-button').remove(); $('.table-inbox').removeClass("hidden"); } else { $('#authorize-button').removeClass("hidden"); $('#authorize-button').on('click', function(){ handleAuthClick(); }); } } function loadGmailApi() { gapi.client.load('gmail', 'v1', displayInbox); } 

Мы должны вставить этот код непосредственно ниже, где мы устанавливаем учетные данные API, в том же блоке SCRIPT.

Чтобы подвести итог процесса, эта цепочка вызовов функций проходит:

1. handleClientLoad() просто устанавливает ключ API и передает checkAuth() через 1 миллисекунду.
2. checkAuth() проверяет, checkAuth() ли пользователь предварительную проверку подлинности нашего приложения в Google. Установка для immediate параметра значения true здесь означает, что мы не будем запрашивать у пользователя модальный логин / права доступа, если они не аутентифицированы. Затем мы передаем результат аутентификации в handleAuthResult() .
3. handleAuthResult() выполняет одно из двух действий; если пользователь уже аутентифицирован, он загрузит Gmail API с помощью loadGmailApi() , в качестве альтернативы он отобразит кнопку авторизации в пользовательском интерфейсе и прикрепит к ней событие click, которое вызовет handleAuthClick()
4. handleAuthClick() просто выполняет ту же функцию аутентификации, что и checkAuth() но предоставит пользователю модальный вход в систему / права доступа. Как только пользователь аутентифицирует ту же handleAuthResult() из handleAuthResult() запускается.
5. После того, как эти серии функций выполнены и пользователь прошел аутентификацию, мы всегда должны оказаться в функции loadGmailApi() . Это просто загружает функциональность API Gmail из клиентской библиотеки Google JavaScript, а затем вызывает нашу displayInbox() .

Совет . Вы можете проверить (и отозвать), какие приложения имеют доступ к вашей учетной записи Gmail на этой странице: https://security.google.com/settings/security/permissions . Это может пригодиться при тестировании.

Извлечение и отображение входящих сообщений пользователя

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

Прежде всего нам нужно получить список сообщений из Gmail. Для этого нам нужно вызвать конечную точку списка Users.messages:. Для целей этого приложения мы будем запрашивать последние десять сообщений, помеченных как INBOX :

 function displayInbox() { var request = gapi.client.gmail.users.messages.list({ 'userId': 'me', 'labelIds': 'INBOX', 'maxResults': 10 }); request.execute(function(response) { $.each(response.messages, function() { var messageRequest = gapi.client.gmail.users.messages.get({ 'userId': 'me', 'id': this.id }); messageRequest.execute(appendMessageRow); }); }); } 

Это вернет объект JSON, содержащий идентификаторы последних десяти сообщений, полученных аутентифицированным пользователем, а также некоторые другие периферийные данные, которые нам не нужны. Обратите внимание, что мы можем использовать специальный userId от me чтобы указать текущего аутентифицированного пользователя. Как и для всех запросов API, выполняемых с помощью библиотеки Google, запросы должны быть назначены переменной, а затем должна быть вызвана функция execute() для фактического выполнения запроса. Эта функция принимает функцию обратного вызова в качестве параметра и позволяет вам указать параметр для сохранения ответа.

На самом деле мы делаем два API-запроса, так как, к сожалению, конечная точка API списка возвращает только идентификаторы сообщений, но не фактические данные сообщений. Таким образом, внутри нашей функции обратного вызова нам нужно перебирать каждое сообщение и запрашивать дополнительные данные, относящиеся к этому сообщению. Для этого нам нужно вызвать User.messages: получить конечную точку, чтобы получить одно сообщение по его идентификатору и передать ответ другой функции appendMessageRow() .

Теперь у нас есть данные сообщения, и мы наконец готовы изменить DOM и показать пользователю что-то!

 function appendMessageRow(message) { $('.table-inbox tbody').append( '<tr>\ <td>'+getHeader(message.payload.headers, 'From')+'</td>\ <td>'+getHeader(message.payload.headers, 'Subject')+'</td>\ <td>'+getHeader(message.payload.headers, 'Date')+'</td>\ </tr>' ); } 

Здесь мы используем функцию append () jQuery для добавления строк, содержащих данные сообщения, в таблицу HTML, которую мы ранее оформили. Это должно оставить нас с рабочим приложением, которое может показать пользователю последние десять сообщений из их почтового ящика! Но это не очень полезно, если вы не можете прочитать письмо, верно?

Примечание : если вы следуете этому руководству, вам также понадобится служебная функция getHeader() чтобы код работал на этом этапе. Вы можете прочитать о функциях утилит в конце статьи .

Отображение содержимого сообщения электронной почты

Поскольку мы уже получили содержимое сообщения из нашего Users.messages: get request, больше нет необходимости делать больше запросов API для отображения этих данных. Нам просто нужно встроить механизм в наш существующий код, чтобы облегчить отображение существующих данных, которые мы ранее извлекли.

Для этого нам нужно начать с добавления метода для запуска средства просмотра содержимого сообщения. Итак, мы собираемся изменить код appendMessageRow() сверху, чтобы добавить ссылку на ячейку таблицы объекта.

 function appendMessageRow(message) { $('.table-inbox tbody').append( '<tr>\ <td>'+getHeader(message.payload.headers, 'From')+'</td>\ <td>\ <a href="#message-modal-' + message.id + '" data-toggle="modal" id="message-link-' + message.id+'">' + getHeader(message.payload.headers, 'Subject') + '</a>\ </td>\ <td>'+getHeader(message.payload.headers, 'Date')+'</td>\ </tr>' ); } 

При этом используется модальная функциональность Bootstrap для запуска предварительно определенного модального окна при нажатии на ссылку. Итак, теперь нам нужно внести еще одну модификацию в код, чтобы также построить контейнер модального окна в DOM каждый раз, когда мы вставляем сводку сообщения в таблицу. Поэтому мы просто добавляем этот фрагмент под наш предыдущий фрагмент append() .

 $('body').append( '<div class="modal fade" id="message-modal-' + message.id + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\ <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" id="myModalLabel">' + getHeader(message.payload.headers, 'Subject') + '</h4>\ </div>\ <div class="modal-body">\ <iframe id="message-iframe-'+message.id+'" srcdoc="<p>Loading...</p>">\ </iframe>\ </div>\ </div>\ </div>\ </div>' ); 

 $('#message-link-'+message.id).on('click', function(){ var ifrm = $('#message-iframe-'+message.id)[0].contentWindow.document; $('body', ifrm).html(getBody(message.payload)); }); 

 iframe { width: 100%; border: 0; min-height: 80%; height: 600px; display: flex; }