Дано

• Плеер прохождения курса в LMS
• Проекты / клиенты, которые хотят кастомный проект, но при этом проходить курсы из Teachbase
• Были решения ввиде sso и перекидывания в ТБ и обратно на проект и попытка написать свой плеер.

Перекидывание в ТБ и обратно в проект

• Выглядит не юзер френдли
• Проект поздно узнает о резульатте прохождения (webhook) Из-за чего приходиться городить функционал синхронизации и дергать ТБ лишними запросами.

Свой плеер

Была попытка написать свое решение на основе mobileAPI. Тут столкнулись с проблемами

• CORS. Браузер не может отправить http запрос с одного сайта на другой.
• Атентификация. Приходиться этот токен хранить где-то в брузере.
• Приходиться самому реализовать всю логику передачи данных в LMS
• Решение не будет поддерживаться, не будет поставки нового функионала курсов
• не работают SCORM

Решение

Библиотека которая будет поставляться от продукта, которая будет реализовать аутентификацию, получение контента и передачу статистики в LMS.

Основная идея в том чтобы разделить их на два уровня, контроллер (тот который будет общаться с представлением и моделью) и слой модели (самой логики прохождения и отправки нужных запросов) MVC котороче

Модель - полностью на продукте, все прохождение базируется на нем. Нужно чтобы было четкое АПИ, чтобы поверх накручивать реализации интерфейса. Контроллер - это условность, его может не быть, тут я его обозвал как какой-то клиентский js, который реагирует на нажатия кнопок и умеет общаться с моделью Представление - что угодно. И это главная фича, для начала можно придумать какой-то один вариант в дизайнте ТБ с возможностью прокидывать кастомизацию, потом можно пилить хоть что угодно под клиента на проекте.

AUTH - будет через сессионую куку, будет уходить запрос на логин, и сервер запишет нужную куку. Можно использовать решение через Oauth2 / OpenID

CORS - нужно настроить заголовки, которые разрешат отпралять запросы вместе с куками стороннего сайта

fetch(
      `https://custom.teachbase.ru/api/v2/course_sessions/123`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          "x-csrf-token": context.csrf
        },
        body: JSON.stringify({
          ts,
        }),
        referrer: 'no-referrer',
        credentials: 'include',
        mode: 'cors'
      }
    )

SECURITY - вход думаю делать через клиентский sso, для этого нужно будет чтобы был кастомный домен/поддомен у аккаунта. Также будет настройка интеграции, для заголовков CORS. Причем будем разрешать работу только для endpoints плеера курса, это тоже настраивается заголовками

Почему так?

• Будет стандартное АПИ и все новые фичи будут легко расползаться по проектам, скроем всю сложность.
• Это дешево на беке, можно не пилить для этого другое АПИ, все будет работать как сейчас и можно пробовать параллельно вводить новый плеер и "тренироваться на кошках"
• SCORM заведется почти из коробки!
• Клинтский код сможет подписываться на события плеера и сразу реагировать, например на прохождения материала и трека времени.