Что такое Google Apps Script и зачем нужны веб-приложения?
Google Apps Script (GAS) — это облачная среда разработки, позволяющая автоматизировать задачи и расширять функциональность Google Workspace (Docs, Sheets, Drive и т.д.). Веб-приложения, созданные с помощью GAS, предоставляют пользовательский интерфейс для взаимодействия со скриптами, делая их доступными через браузер. Это особенно полезно, когда требуется, чтобы пользователи, не имеющие опыта программирования, могли взаимодействовать со сложными процессами автоматизации.
Преимущества использования веб-приложения для аутентификации в Google Apps Script
Веб-приложения для аутентификации в GAS обеспечивают:
- Контролируемый доступ к ресурсам: Ограничение доступа к скриптам и данным на основе ролей и разрешений.
- Централизованное управление пользователями: Интеграция с Google Workspace Directory API или Identity Platform для управления учетными записями.
- Улучшенный пользовательский опыт: Предоставление интуитивно понятного интерфейса для взаимодействия со скриптами.
- Безопасность: Возможность применения современных практик обеспечения безопасности веб-приложений (защита от XSS, CSRF).
Обзор архитектуры веб-приложения для входа
Типичное веб-приложение для входа в GAS включает следующие компоненты:
- HTML-форма: Пользовательский интерфейс для ввода учетных данных (логина и пароля) или для использования Google Sign-In.
- JavaScript (клиентская часть): Обработка отправки формы, валидация данных и отправка запросов к серверу.
- Google Apps Script (серверная часть): Обработка запросов аутентификации, проверка учетных данных и управление сессиями.
- Службы Google (например, Directory API, Identity Platform): Аутентификация пользователей и управление их учетными записями.
Подготовка Google Apps Script для создания веб-приложения
Создание нового проекта Google Apps Script
- Откройте script.google.com.
- Нажмите «Новый проект».
- Присвойте проекту осмысленное имя, например, «LoginWebApp».
Настройка параметров проекта: включение API и служб
Для взаимодействия со службами Google (например, Directory API) необходимо включить их в проекте GAS:
- В редакторе GAS выберите «Сервисы» (Services) в левой панели.
- Найдите и добавьте необходимые сервисы (например, «Directory API»).
- Нажмите «Добавить».
Установка области действия (Scopes), необходимых для доступа к данным Google
Для доступа к данным пользователей (например, электронной почте) необходимо установить соответствующие области действия (scopes). GAS автоматически определяет необходимые scopes на основе используемых API, но их можно настроить вручную в файле appsscript.json (просмотр: «Проект» -> «Показать файл манифеста»).
Пример:
{
"oauthScopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/directory.readonly"
],
"dependencies": {
"enabledAdvancedServices": [{
"userSymbol": "AdminDirectory",
"serviceId": "admin",
"version": "directory_v1"
}]
},
"webapp": {
"access": "MYSELF",
"executeAs": "USER_DEPLOYING"
}
}
Разработка пользовательского интерфейса (UI) веб-приложения
Создание HTML-формы для входа (логин и пароль/Google Sign-In)
Создайте HTML-файл index.html (Файл -> Новый -> HTML-файл) со следующей структурой:
<!DOCTYPE html>
<html>
<head>
<title>Веб-приложение для входа</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h1>Вход</h1>
<form id="login-form">
<input type="email" id="email" name="email" placeholder="Email" required>
<input type="password" id="password" name="password" placeholder="Пароль" required>
<button type="submit">Войти</button>
</form>
<p id="error-message" class="error"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Дизайн и стилизация формы с использованием HTML и CSS
Создайте файл style.css (Файл -> Новый -> HTML-файл, переименуйте в style.css) для стилизации формы. Это улучшит визуальное восприятие вашего веб-приложения.
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.error {
color: red;
}
Обработка отправки формы на стороне клиента (JavaScript)
Создайте файл script.js (Файл -> Новый -> HTML-файл, переименуйте в script.js) для обработки отправки формы и отправки данных на сервер.
const form = document.getElementById('login-form');
const errorMessage = document.getElementById('error-message');
form.addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
google.script.run
.withSuccessHandler(function(result) {
if (result.success) {
window.location.href = result.redirectUrl; // Перенаправление после успешной аутентификации
} else {
errorMessage.textContent = result.message;
}
})
.withFailureHandler(function(err) {
errorMessage.textContent = 'Ошибка: ' + err.message;
})
.authenticateUser(email, password);
});
Реализация логики аутентификации в Google Apps Script
Получение данных формы от веб-приложения
В GAS создайте функцию doGet() для отображения HTML-формы и функцию authenticateUser(email, password) для обработки данных формы.
/**
* @returns {HtmlOutput}
*/
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().setTitle("Login");
}
/**
* Аутентифицирует пользователя и перенаправляет его в случае успеха.
*
* @param {string} email Email пользователя.
* @param {string} password Пароль пользователя.
* @returns {{success: boolean, message?: string, redirectUrl?: string}}
*/
function authenticateUser(email: string, password: string): object {
// Здесь должна быть логика аутентификации (например, проверка в Directory API или Identity Platform)
// В этом примере просто проверяем, что email и пароль не пустые.
if (email && password) {
// Предположим, что аутентификация прошла успешно.
// В реальном приложении необходимо проверить учетные данные.
return { success: true, redirectUrl: 'https://www.google.com/' }; // Перенаправляем на google.com в случае успеха
} else {
return { success: false, message: 'Неверный email или пароль.' };
}
}
Аутентификация пользователя с использованием служб Google (например, Directory API, Identity Platform)
Внутри функции authenticateUser необходимо реализовать логику аутентификации, используя Directory API или Identity Platform. Directory API позволяет проверить, существует ли пользователь в Google Workspace, а Identity Platform предоставляет более широкие возможности для управления учетными записями и аутентификацией.
Создание и управление сессиями пользователей
Для поддержания состояния пользователя между запросами можно использовать службу CacheService или PropertiesService.
Пример использования CacheService:
function setSession(email: string) {
const cache = CacheService.getUserCache();
cache.put('userEmail', email, 600); // Сохраняем email в кэше на 10 минут
}
function getSession(): string | null {
const cache = CacheService.getUserCache();
return cache.get('userEmail');
}
Перенаправление пользователя после успешной аутентификации
После успешной аутентификации необходимо перенаправить пользователя на целевую страницу. Это можно сделать, вернув объект { success: true, redirectUrl: '...' } из функции authenticateUser, как показано в примере выше.
Безопасность и развертывание веб-приложения
Рекомендации по безопасности веб-приложения для Google Apps Script (защита от XSS, CSRF)
- Защита от XSS: Используйте HtmlService.createTemplate() для генерации HTML, чтобы избежать внедрения вредоносного кода.
- Защита от CSRF: Используйте токены CSRF для защиты от подделки межсайтовых запросов. Это потребует генерации токена на сервере и проверки его на клиенте.
- Валидация данных: Всегда валидируйте данные, полученные от пользователя, на сервере.
- Использование HTTPS: Убедитесь, что ваше веб-приложение использует HTTPS для защиты данных при передаче.
Настройка прав доступа и разрешений для веб-приложения
При развертывании веб-приложения необходимо указать, кто имеет право запускать скрипт (executeAs) и кто имеет доступ к веб-приложению (access). Опции: ME, MYSELF, DOMAIN, ANYONE, ANYONE_ANONYMOUS. Рекомендуется использовать MYSELF или DOMAIN для ограничения доступа.
Развертывание веб-приложения в Google Apps Script
- В редакторе GAS выберите «Развернуть» -> «Новое развертывание».
- Выберите тип «Веб-приложение».
- Укажите описание.
- Выберите, кто имеет право запускать приложение (
execute as). РекомендуетсяMe. - Выберите, кто имеет доступ к приложению (
Who has access). РекомендуетсяOnly myselfилиAnyone within my organization. - Нажмите «Развернуть».
- Скопируйте URL веб-приложения.
Тестирование и отладка веб-приложения
- Используйте инструменты разработчика браузера: Для отладки JavaScript-кода и просмотра сетевых запросов.
- Просматривайте журналы GAS: Используйте
Logger.log()для вывода отладочной информации в журналы GAS. - Тестируйте различные сценарии: Проверьте, как приложение ведет себя при различных входных данных и в различных ситуациях (например, при ошибках аутентификации).