Введение.

Этот проект демонстрирует использование некоторых функций сервиса Gmail API. Gmail API является RESTful API, которое можно использовать для доступа к почтовым сообщениям пользователя и отправлять электронные сообщения. Для большинства веб приложений (включая мобильные приложения), Gmail API является лучшим выбором для авторизованного доступа к пользовательским данным Gmail.

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

Этот пример на GitHub можно посмотреть здесь

Ресурсы

Google Client API

Регистрация через Google для Вебсайтов

Google API Клиентская Библиотека для JavaScript

Gmail API

Руководство по Gmail API

Users.messages

Users.messages: list

Users.messages: get

Users.messages: send

Структура электронного сообщения

RFC 1521 — Почтовый стандарт MIME

RFC 5322 — Формат сообщений Internet (IMF)

Загрузка/Инициализация клиенской библиотеки Google API

Вначале нужно загрузить и инициализировать клиенскую библиотеку Google API см. пр.1.

    <script type="text/javascript" >
        var clientId = 'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
        var apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        var discoveryDocs = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"];
        var scopes =
            'https://www.googleapis.com/auth/gmail.readonly ' +
            'https://www.googleapis.com/auth/gmail.send';


        function handleClientLoad() {
            // Load the API client and auth2 library
            gapi.load('client:auth2', initClient);
        }

        function initClient() {
            gapi.client.init({
                apiKey: apiKey,
                discoveryDocs: discoveryDocs,
                clientId: clientId,
                scope: scopes
            }).then(function () {
                // Listen for sign-in state changes.
                gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
                // Handle the initial sign-in state.
                updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
            });
        }

        ...

    </script>
    <script async defer
        src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()"
    >
    </script>

Авторизация пользователя на Google сервере

Перед тем как выполнить какие то операции с Gmail API необходимо авторизироваться см. пр.2. Если авторизация прошла успешно, то загружается библиотека loadGmailApi()

    <script type="text/javascript" >

        ...

        function updateSigninStatus(isSignedIn) {
            if (isSignedIn) {
                loadGmailApi();
                $('#authorize-button').remove();
                $('.table-inbox').removeClass("hidden");
                $('#compose-button').removeClass("hidden");
            } else {
                $('#authorize-button').removeClass("hidden");
                $('#authorize-button').on('click', function () {
                    handleAuthClick();
                });
            }
        }

        function handleAuthClick() {
            gapi.auth2.getAuthInstance().signIn();
        }

        function loadGmailApi() {
            gapi.client.load('gmail', 'v1', displayInbox);
        }

        ...

    </script>

Отображение сообщений пользователя в Inbox

При получении сообщений из Inbox, используются команды (Users.messages: list/get) см. пр.3.

Извлечение/Раскодирование/Отображение информации из почтового сообщения происходит в функции appendMessageRow(message), с помощью ряда функций см. пр.4.

    <script type="text/javascript" >

        ...

        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);
                });
            });
        }

        ...

    </script>

    <script type="text/javascript" >

        ...

        function getHeader(headers, index) {
            var header = '';
            $.each(headers, function () {
                if (this.name.toLowerCase() === index.toLowerCase()) {
                    header = this.value;
                }
            });
            return header;
        }

        function getBody(message) {
            var encodedBody = '';
            if (typeof message.parts === 'undefined') {
                encodedBody = message.body.data;
            }
            else {
                encodedBody = getHTMLPart(message.parts);
            }
            encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
            return decodeURIComponent(escape(window.atob(encodedBody)));
        }

        function getHTMLPart(arr) {
            for (var x = 0; x <= arr.length; x++) {
                if (typeof arr[x].parts === 'undefined') {
                    if (arr[x].mimeType === 'text/html') {
                        return arr[x].body.data;
                    }
                }
                else {
                    return getHTMLPart(arr[x].parts);
                }
            }
            return '';
        }

        ...

    </script>

Передача сообщений

При передаче сообщений, используются команда (Users.messages: send) см. пр.5.

    <script type="text/javascript" >

        ...

        function sendEmail() {
            $('#send-button').addClass('disabled');

            sendMessage(
                {
                    'To': $('#compose-to').val(),
                    'Subject': $('#compose-subject').val()
                },
                $('#compose-message').val(),
                composeTidy
            );

            return false;
        }

        function composeTidy() {
            $('#compose-modal').modal('hide');

            $('#compose-to').val('');
            $('#compose-subject').val('');
            $('#compose-message').val('');

            $('#send-button').removeClass('disabled');
        }

        function sendMessage(headers_obj, message, callback) {
            var email = '';

            for (var header in headers_obj)
                email += header += ": " + headers_obj[header] + "\r\n";

            email += "\r\n" + message;

            var sendRequest = gapi.client.gmail.users.messages.send({
                'userId': 'me',
                'resource': {
                    'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
                }
            });

            return sendRequest.execute(callback);
        }


        ...

    </script>