Кейс интеграции с платформой Финуслуги: калькулятор ипотечного страхования для сайта на Tilda

Кейс интеграции с платформой Финуслуги: калькулятор ипотечного страхования для сайта на Tilda

В этот раз речь пойдет о разработке калькулятора внутри личного кабинета сайта на Tilda для расчета стоимости полисов ипотечного страхования на базе API сервиса Финуслуги.

Возможности конструктора Tilda — шире, чем вы могли бы подумать.

В данном кейсе я показываю как с помощью JavaScript можно создать не только интерактивный калькулятор для сайта, но и API-шлюз для обращения к сервису Финуслуги напрямую из личного кабинета Tilda. Для этого нам понадобится редактор Zero-блоков и любой VPS сервер.

Алексей Иванов
Фулстек веб-разработчик

Содержание

1. Постановка задачи

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

Дано

У клиента есть сайт с личным кабинетом для сотрудников, сделанный на конструкторе Tilda. В личном кабинете необходимо создать калькулятор для расчета ипотечного кредитования. После расчета должна быть возможность нажатием кнопки скопировать результат расчета в виде текстового сообщения для отправки расчета клиенту.

Проблема

Напрямую с сайта нельзя обращаться к API Финуслуг по двум причинам:

  1. В целях безопасности не стоит хранить реквизиты доступа к API, даже в случае когда доступ к странице есть только у сотрудников
  2. Из-за политики кросс-доменного взаимодействия (CORS) в любом случае невозможно обращаться к API, расположенном на домене finuslugi.ru из-за настроек политики на стороне их сервера

Решение

Необходимо создать API-шлюз, который бы выполнял роль обратного прокси между API Финуслуг и веб-страницей с калькулятором. В данном случае можно управлять CORS-политикой (2) и дополнительно ограничить доступ к методами API (1).

2. Архитектура интеграции

Исходя из выше поставленной задачи следует, что система должна состоять из трех частей: клиентской (сайта на Tilda), API для получения информации о страховых полисах и шлюзом между ними.

Подобную схему можно представить следующим образом:

Сайт на Tilda взаимодействует с API Финуслуг через шлюз
Сайт на Tilda взаимодействует с API Финуслуг через шлюз

Выбор технологий

Для реализации шлюза была выбрана технология NodeJS и язык JavaScript, потому что такое приложение легче всего запаковать в Docker контейнер и развернуть.

Общение сайта со шлюзом происходит через HTTPS протокол — это важно, поскольку при работе через HTTP не весь необходимый функционал доступен на сайте: например, копирование текста в буфер обмена в этом случае невозможно.

А политика безопасности в браузере не позволит отправлять запросы к шлюзу по HTTP со страницы, открытой по HTTPS.

Авторизация на уровне шлюза

Помимо авторизации API Финуслуг на уровне шлюза каждый запрос также проходит авторизацию в два этапа:

  • CORS: проверка домена, с которого был произведен запрос. Это позволит исключить обращения к шлюзу с других доменов
  • API token: в настройках шлюза будет возможность задать публичный токен для авторизации запроса, отличный от данных для авторизации в API Финуслуг

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

3. Реализация API шлюза для Финуслуг

Для реализации шлюза была использована известная библиотека для создания веб-сервера express из-за своей простоты и широкой поддержки.

Само приложение довольно простое и состоит из двух частей:

  • Обработчика входящих запросов: на этом шаге происходит авторизация запроса на основе домена и токена
  • Маршрутизатора запроса вышестоящему API Финуслуг с теми же параметрами, с которыми запрос пришел в шлюз

В общем виде программа выглядит так:

const app = express(); const port = process.env.PORT || 3000; // Авторизация каждого приходящего на шлюз запроса app.use(verifyCORS); app.use(express.json()); app.use(authorizeRequest); // Проксирование запроса к API финуслуг app.post("*/api/*/partnerLogin", async (req, res) => { // Проксирование запроса авторизации к API финуслуг }); app.all("*/api/*", async (req, res) => { // Проксирование всех остальных запросов к API финуслуг }); const server = app.listen(port, () => { console.log(`Proxy server listening at http://localhost:${port}`); }); const graceful = new Graceful({ servers: [server] }); graceful.listen();

В свою очередь маршрутизация состоит из двух частей: логика для авторизации запроса в Финуслугах отличается от обычного запроса на получение данных:

app.post("*/api/*/partnerLogin", async (req, res) => { // Проксирование запроса авторизации к API финуслуг try { const passwordMd5 = crypto .createHash("md5") .update(process.env.FINUSLUGI_API_PASSWORD || "") .digest("hex"); // Хеширование пароля от API в соответсвии с документацией // и передача запроса на авторизацию к вышестоящему API } catch (e) { // ... } }); app.all("*/api/*", async (req, res) => { // Проксирование всех остальных запросов к API финуслуг });

Именно на данном этапе происходит чтение учетных данных для доступа к API Финуслуг, находящихся в переменных окружения.

В итоге через шлюз будет проходить 4 запроса, которые будут обращаться к разным частям сервиса:

  • Авторизация (получение временного токена)
  • Получение списка банков
  • Получение списка страховых компаний (СК)
  • Расчет полиса для конкретного банка и СК

Такую схему взаимодействия можно представить в виде диаграммы:

Схема взаимодействия клиента (сайта) с различными частями сервиса Финуслуги через API шлюз
Схема взаимодействия клиента (сайта) с различными частями сервиса Финуслуги через API шлюз

В результате через этот шлюз можно отправлять запросы к API Финуслуг напрямую из браузера без риска утечки реквизитов от субагентского профиля. К тому же доступ к шлюзу ограничен и работает только для сайта клиента, соблюдая CORS-политику.

4. Разработка модификации для Tilda

После разработки серверной части осталось создать графический интерфейс непосредственно самого калькулятора для расчета стоимости полисов.

За основу был взят уже существующий калькулятор с сайта Финуслуг:

Вот так выглядит калькулятор <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ffinuslugi.ru%2Fmortgage%2Foffers&postId=1634538" rel="nofollow noreferrer noopener" target="_blank">на сайте Финуслуг</a>
Вот так выглядит калькулятор на сайте Финуслуг

Поля этого калькулятора были воссозданы в редакторе Zero-блока Tilda, используя элемент «форма»:

А вот так выглядит калькулятор в редакторе Zero-block Tilda<br />
А вот так выглядит калькулятор в редакторе Zero-block Tilda

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

Помимо формы также были добавлена кнопка «Рассчитать» по аналогии с оригинальным калькулятором. К ним дополнительно были добавлены новые кнопки «Сбросить» и «Копировать», а также информационный текст и шаблон строки результата с информацией о полисе:

Дополнительные элементы управления и шаблон результатов<br />
Дополнительные элементы управления и шаблон результатов

С помощью CSS элементы формы были стилизованы, расположены в один ряд и к ним были добавлены необходимые иконки. Некоторые элементы интерфейса формы были расширены:

Поле для выбора банка

Для удобства пользования выпадающий список был модифицирован с помощью библиотеки simple input 2, которая позволяет добавить текстовый поиск по вариантам списка.

Выпадающий список, модифицированный с помощью <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fbluzky.github.io%2Fnice-select2%2F&postId=1634538" rel="nofollow noreferrer noopener" target="_blank">Nice Select 2</a><br />
Выпадающий список, модифицированный с помощью Nice Select 2

Поля для ввода суммы кредита

С помощью ChatGPT я быстро набросал прототип кода для форматирования суммы остатка кредита в формате валюты с разделением тысяч через пробел:

Автоматическое форматирование валюты во время ввода

Финальный исходный код для добавления такого форматирования доступен на моем GitHub:

5. Процесс разработки модификации

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

Чтобы было удобнее редактировать код, я настроил процесс автоматической сборки и сжатия кода в один большой файл — бандл. Для этого я использовал бандлер JS модулей Rollup с такой конфигурацией:

import css from "rollup-plugin-import-css"; import terser from '@rollup/plugin-terser'; const config = { input: 'src/main.js', output: { dir: 'dist', format: 'iife', extend: true, }, plugins: [ css({ minify: true, inject: true, }), terser(), ] }; export default config;

Это позволило разбить исходный код модификации на несколько файлов, с которыми удобно работать по отдельности.

Важно обратить внимание на output.format = "iife" — это особый формат, при котором весь код бандла заворачивается в самовыполняющуюся функцию, тем самым ограничивая доступ к коду бандла извне.

В результате сборки всех файлов воедино получается один большой скрипт в одну строчку — сразу вместе с JavaScript и CSS, который добавляется на страницу динамически при выполнении кода на странице.

6. Конечный результат

В результате клиент получил связку из модификации для Tilda в виде калькулятора со шлюзом, который позволяет взаимодействовать с API Финуслуг с учетом особенностей расчета полисов для конкретного субагентского профиля.

В результате калькулятор очень похож на тот, который используется на Финуслугах, но внутри связанс субагентским профилем страхового брокера

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

Кроме того, впоследствии мы доработали калькулятор: добавили поддержку подгрузки тарифов из Google Таблиц и реализовали дополнительную логику расчета коэффициентов...

Кейс интеграции с платформой Финуслуги: калькулятор ипотечного страхования для сайта на Tilda

Если вам понравилась статья — поставьте лайк 🔥 или напишите комментарий. Так я пойму, что подобные посты с кейсами интересны и буду писать больше таких статьей.

Если вам нужна разработка уникальной модификации или интеграции Tilda с CRM или сторонним сервисом по API: Telegram-ботом, искуственным интеллектом / ChatGPT или даже маркетплейсом — примеры моих работ и контакты доступны по ссылке: codly.cc

Кроме того, в своем блоге «Код без тайн» я периодически пишу о веб-разработке, информатике и других сферах, которые меня вдохновляют (искусственный интеллект, дизайн и многое другое).

77
33
Начать дискуссию