Автор Чираг Арора
Фон
Phyllo — это шлюз данных для доступа к данным авторов с сотен исходных платформ, таких как YouTube, Twitter, TikTok, SubStack, Discord, Twitch, OpenSea, Shopify и других. Phyllo строит базовую инфраструктуру, которая подключается к каждой платформе создателя, поддерживает поток данных в реальном времени в системы, используемые этими платформами для управления данными создателя, и предоставляет нормализованный набор данных, чтобы предприятия могли использовать данные создателя простым, но эффективным способом. .
Разработчики интегрируют Connect SDK от Phyllo в свои веб-приложения, чтобы авторы с разных платформ могли подключаться к аккаунту. Создатели при подключении дают согласие на получение данных с этих платформ, а затем Phyllo синхронизирует данные для каждого создателя с этих платформ и передает их разработчикам.
Этот SDK интегрируется через JS-скрипт, который включается в тег скрипта веб-приложения, обеспечивая загрузку последней версии с быстрой CDN.
Постановка задачи
Когда разработчики интегрировали Phyllo SDK в свое веб-приложение, чтобы разрешить процесс подключения учетной записи для своих пользователей (создателей), поток перенаправлялся на страницу конкретного домена Phyllo с домена веб-сайта разработчиков. После завершения подключения учетной записи поток был перенаправлен обратно на веб-страницу разработчика с информацией о подключенных/отключенных учетных записях через Webhooks с нашего внутреннего сервера.
У этого потока были некоторые проблемы как для наших разработчиков, так и для создателей:
- Для конечных пользователей/создателей. Перенаправление из приложения разработчика в Phyllo заставляло создателей немного беспокоиться о подключении своих учетных записей, и у них были сомнения по поводу обмена своими данными.
- Для разработчиков . Поток перенаправления приводит к увеличению количества загрузок страниц, кликов, перенаправлений из веб-приложения и т. д., и разработчикам приходится ждать, пока создатель завершит путешествие по Connect SDK, прежде чем они смогут получить информацию. о том, что произошло в SDK. Более того, у разработчиков не было большого контроля над такими сценариями, как обработка ошибок, отображение некоторых сообщений пользовательского интерфейса при сбоях подключения и т. д.
Решение
Изучив некоторые инструменты отраслевых стандартов, справочные материалы и процесс подключения, мы разработали и создали поток проверки подлинности всплывающих окон на основе модального iframe в нашем SDK для подключения к учетной записи.
В этом потоке Phyllo SDK встраивается как модальное окно в веб-приложение разработчика, а подключение учетной записи OAuth к платформам происходит в синхронном всплывающем окне. Мы установили кросс-браузерную связь между модальным и всплывающим окном OAuth, чтобы завершить процесс подключения учетной записи беспроблемным и безопасным способом.
1. Встраивание модального окна: архитектура высокого уровня
Фрагмент кода для добавления модального окна в HTML-код разработчика:
В приведенном ниже коде (в Javascript) используется свойство document, и его можно использовать для присоединения модального окна в веб-приложении. Здесь модальное окно появляется, если пользователь выполняет openModal().
const openModal = (url) => {
var modalContainer = document.createElement("div"); //
var iFrame = document.createElement("iframe");
iFrame.src = url; // URL of Phyllo SDK to open
iFrame.width = "100%";
iFrame.height = "100%";
iFrame.allowtransparency = "true";
iFrame.style.border = "none";
// Adding stylesheet for displaying Modal
var styleSheet = document.createElement("style");
styleSheet.innerText = `
{
position: fixed; /* Stay in place */
z-index: 2147483647; /* Sit on top */
/* padding-top: 100px; Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}`;
document.head.appendChild(styleSheet); // attaching css stylehseet to head tag of parent div
modalContainer.appendChild(iFrame); // attaching iFrame to phyllo's parent div
document.body.appendChild(modalContainer);// attaching modal to developer's div
modalContainer.style.display = "block";
};
openModal(url);
Как только мы добавили код в сценарий CDN, SDK Phyllo открылся как модальное окно в окне разработчика. Это решило некоторые основные проблемы для нас:
- SDK открывается в iframe HTML, который ограничивает междоменное взаимодействие. Это означает, что только JS, контролируемый Phyllo, может взаимодействовать с iframe, тем самым снижая риски безопасности и, как следствие, обеспечивая доверительные отношения с конечными пользователями/создателями.
- Этот поток также позволяет Phyllo Connect SDK генерировать собственные события в режиме реального времени, которые могут использоваться приложением разработчика для отображения соответствующего пользовательского интерфейса и обмена сообщениями с создателями, не дожидаясь веб-перехватчиков, доставленных через серверную часть.
- С технической точки зрения этот поток также предлагает множество оптимизаций, таких как уменьшение количества сетевых вызовов и загрузок страниц, тем самым уменьшая количество возможных точек отказа.
2. Обработка потока OAuth во всплывающем окне:
Для завершения потока подключения пользователям необходимо подключиться к своим учетным записям через поток OAuth, что необходимо сделать во всплывающем окне/новой вкладке.
Для этого мы открыли окно OAuth с URL-адресом во всплывающем окне или на новой вкладке и включили безопасную межбраузерную связь через «iframe» и всплывающее окно для успешной передачи статуса подключения.
Архитектура: кросс-браузерная связь
Фрагмент кода, обеспечивающий указанный выше поток подключения:
// In Phyllo SDK (opened in iFrame)
const callback = (event) => {
// code to execute post popup action
}
window.addEventListener("message", callback, false);
let windowPopup = window.open(url);// url to open in popup
// In oAuth popup
// After connection
window.opener.postMessage(statusObject) // for sending the statusObject to the event listener callback
window.close();
// postMessage executes the callback function with the statusObject enabling the cross browser transfer
Проблемы, с которыми столкнулись и решение:
- Блокировка всплывающих окон. Мы видели, что многие пользователи и некоторые браузеры не позволяют открывать всплывающие окна; это мешало потоку соединения и приводило к сбоям соединения с учетной записью.
Решение.Мы определили сценарий, в котором браузеры блокировали открытие всплывающего окна, и открыли его в новой вкладке с помощью приведенного ниже фрагмента кода:
let windowPopup = window.open(url); // default behaviour
if (windowPopup === null || windowPopup === "undefined") {
windowPopup = window.open(url, "_blank"); // "blank" opens the sent url in a new tab always
}
2. Безопасность. Включение межбраузерной связи через iframe и всплывающее окно сделало его уязвимым для атак с использованием межбраузерных сценариев. Например, любой сторонний инструмент может инициировать обратный вызов, выполнив прослушиватель событий ( window.addEventListener("message", callback)). Phyllo SDK может выполнять код, не относящийся к Phyllo, и попадать в некоторые опасные и необработанные сценарии, влияя на поток соединений.
Решение. Добавьте проверку домена в обратный вызов, чтобы убедиться, что триггер события срабатывает только из вашего домена.
Заключение
Использование Phyllo SDK внутри iframe и включение процесса подключения учетной записи через всплывающее окно помогло значительно улучшить взаимодействие с пользователем для наших конечных пользователей/создателей. В целом наши показатели успешного подключения подскочили почти на 37%. Это также решило проблемы для наших разработчиков, интегрировавших Phyllo SDK, теперь мы можем предоставлять им обновления подключения/отключения учетной записи в режиме реального времени в пользовательском интерфейсе через обратные вызовы, которые они могут использовать для визуализации и улучшения общего пользовательского интерфейса для конечных пользователей. .
