Кейс интеграции с платформой Финуслуги: калькулятор ипотечного страхования для сайта на Tilda
В этот раз речь пойдет о разработке калькулятора внутри личного кабинета сайта на Tilda для расчета стоимости полисов ипотечного страхования на базе API сервиса Финуслуги.
Возможности конструктора Tilda — шире, чем вы могли бы подумать.
В данном кейсе я показываю как с помощью JavaScript можно создать не только интерактивный калькулятор для сайта, но и API-шлюз для обращения к сервису Финуслуги напрямую из личного кабинета Tilda. Для этого нам понадобится редактор Zero-блоков и любой VPS сервер.
Содержание
1. Постановка задачи
Необходимо создать копию калькулятора ипотечного страхования с сайта Финуслуг, который бы работал не через публичный API, а через API субагентского профиля, т.к. в этом случае стоимость полисов и коэффициенты вознаграждения могут устанавливаться самим агентством.
Дано
У клиента есть сайт с личным кабинетом для сотрудников, сделанный на конструкторе Tilda. В личном кабинете необходимо создать калькулятор для расчета ипотечного кредитования. После расчета должна быть возможность нажатием кнопки скопировать результат расчета в виде текстового сообщения для отправки расчета клиенту.
Проблема
Напрямую с сайта нельзя обращаться к API Финуслуг по двум причинам:
- В целях безопасности не стоит хранить реквизиты доступа к API, даже в случае когда доступ к странице есть только у сотрудников
- Из-за политики кросс-доменного взаимодействия (CORS) в любом случае невозможно обращаться к API, расположенном на домене finuslugi.ru из-за настроек политики на стороне их сервера
Решение
Необходимо создать API-шлюз, который бы выполнял роль обратного прокси между API Финуслуг и веб-страницей с калькулятором. В данном случае можно управлять CORS-политикой (2) и дополнительно ограничить доступ к методами API (1).
2. Архитектура интеграции
Исходя из выше поставленной задачи следует, что система должна состоять из трех частей: клиентской (сайта на Tilda), API для получения информации о страховых полисах и шлюзом между ними.
Подобную схему можно представить следующим образом:
Выбор технологий
Для реализации шлюза была выбрана технология NodeJS и язык JavaScript, потому что такое приложение легче всего запаковать в Docker контейнер и развернуть.
Общение сайта со шлюзом происходит через HTTPS протокол — это важно, поскольку при работе через HTTP не весь необходимый функционал доступен на сайте: например, копирование текста в буфер обмена в этом случае невозможно.
А политика безопасности в браузере не позволит отправлять запросы к шлюзу по HTTP со страницы, открытой по HTTPS.
Авторизация на уровне шлюза
Помимо авторизации API Финуслуг на уровне шлюза каждый запрос также проходит авторизацию в два этапа:
- CORS: проверка домена, с которого был произведен запрос. Это позволит исключить обращения к шлюзу с других доменов
- API token: в настройках шлюза будет возможность задать публичный токен для авторизации запроса, отличный от данных для авторизации в API Финуслуг
Вместе эти шаги позволяют снизить риск недоброжелательных обращений к шлюзу в случае выявления его адреса.
3. Реализация API шлюза для Финуслуг
Для реализации шлюза была использована известная библиотека для создания веб-сервера express из-за своей простоты и широкой поддержки.
Само приложение довольно простое и состоит из двух частей:
- Обработчика входящих запросов: на этом шаге происходит авторизация запроса на основе домена и токена
- Маршрутизатора запроса вышестоящему API Финуслуг с теми же параметрами, с которыми запрос пришел в шлюз
В общем виде программа выглядит так:
В свою очередь маршрутизация состоит из двух частей: логика для авторизации запроса в Финуслугах отличается от обычного запроса на получение данных:
Именно на данном этапе происходит чтение учетных данных для доступа к API Финуслуг, находящихся в переменных окружения.
В итоге через шлюз будет проходить 4 запроса, которые будут обращаться к разным частям сервиса:
- Авторизация (получение временного токена)
- Получение списка банков
- Получение списка страховых компаний (СК)
- Расчет полиса для конкретного банка и СК
Такую схему взаимодействия можно представить в виде диаграммы:
В результате через этот шлюз можно отправлять запросы к API Финуслуг напрямую из браузера без риска утечки реквизитов от субагентского профиля. К тому же доступ к шлюзу ограничен и работает только для сайта клиента, соблюдая CORS-политику.
4. Разработка модификации для Tilda
После разработки серверной части осталось создать графический интерфейс непосредственно самого калькулятора для расчета стоимости полисов.
За основу был взят уже существующий калькулятор с сайта Финуслуг:
Поля этого калькулятора были воссозданы в редакторе Zero-блока Tilda, используя элемент «форма»:
Верстка формы будет скорректирована позже с помощью CSS, на данном этапе требуется расположить все элементы для корректного функционирования интерфейса.
Помимо формы также были добавлена кнопка «Рассчитать» по аналогии с оригинальным калькулятором. К ним дополнительно были добавлены новые кнопки «Сбросить» и «Копировать», а также информационный текст и шаблон строки результата с информацией о полисе:
С помощью CSS элементы формы были стилизованы, расположены в один ряд и к ним были добавлены необходимые иконки. Некоторые элементы интерфейса формы были расширены:
Поле для выбора банка
Для удобства пользования выпадающий список был модифицирован с помощью библиотеки simple input 2, которая позволяет добавить текстовый поиск по вариантам списка.
Поля для ввода суммы кредита
С помощью ChatGPT я быстро набросал прототип кода для форматирования суммы остатка кредита в формате валюты с разделением тысяч через пробел:
Финальный исходный код для добавления такого форматирования доступен на моем GitHub:
5. Процесс разработки модификации
Из-за достаточно сложной логики взаимодействия с API эта модификация содержала много кода, который нужно было разбить на классы для грамотного разделения функционала.
Чтобы было удобнее редактировать код, я настроил процесс автоматической сборки и сжатия кода в один большой файл — бандл. Для этого я использовал бандлер JS модулей Rollup с такой конфигурацией:
Это позволило разбить исходный код модификации на несколько файлов, с которыми удобно работать по отдельности.
Важно обратить внимание на output.format = "iife" — это особый формат, при котором весь код бандла заворачивается в самовыполняющуюся функцию, тем самым ограничивая доступ к коду бандла извне.
В результате сборки всех файлов воедино получается один большой скрипт в одну строчку — сразу вместе с JavaScript и CSS, который добавляется на страницу динамически при выполнении кода на странице.
6. Конечный результат
В результате клиент получил связку из модификации для Tilda в виде калькулятора со шлюзом, который позволяет взаимодействовать с API Финуслуг с учетом особенностей расчета полисов для конкретного субагентского профиля.
Сотрудники брокера теперь имеют возможность быстро скопировать результаты расчета в виде текстового сообщения для отправки клиенту. Это позволяет минимизировать рутину и увеличить скорость работы сотрудников.
Кроме того, впоследствии мы доработали калькулятор: добавили поддержку подгрузки тарифов из Google Таблиц и реализовали дополнительную логику расчета коэффициентов...
Если вам понравилась статья — поставьте лайк 🔥 или напишите комментарий. Так я пойму, что подобные посты с кейсами интересны и буду писать больше таких статьей.
Если вам нужна разработка уникальной модификации или интеграции Tilda с CRM или сторонним сервисом по API: Telegram-ботом, искуственным интеллектом / ChatGPT или даже маркетплейсом — примеры моих работ и контакты доступны по ссылке: codly.cc
Кроме того, в своем блоге «Код без тайн» я периодически пишу о веб-разработке, информатике и других сферах, которые меня вдохновляют (искусственный интеллект, дизайн и многое другое).