MVTID для разработчиков

Документация по подключению единого входа (SSO) MVTID к твоему приложению. После интеграции пользователи смогут входить в твой сервис через MVTID — без создания нового аккаунта.

Как это работает

MVTID — это единый вход. Пользователь авторизуется на MVTID один раз, а потом может входить в любые сервисы команды одной кнопкой.

Процесс выглядит так:

1. Пользователь нажимает «Войти через MVTID»Открывается всплывающее окно с формой входа MVTID.
2. Пользователь вводит логин/пароль в MVTIDЕсли он уже авторизован — этот шаг пропускается.
3. MVTID отправляет данные твоему сайтуЧерез postMessage — безопасный способ передачи данных между окнами.
4. Твой сайт получает UID, email, имяМожешь сразу логинить пользователя у себя.

1. Регистрация приложения

Первым делом зарегистрируй своё приложение в MVTID:

1. Открой панель разработчикаПерейди на mvtid.ru/apps и войди в свой аккаунт.
2. Нажми «Зарегистрировать приложение»Заполни форму:
   • Название — как будет называться в списке (например, «CollapsChat»)
   • Домен — твой домен без https:// (например, chat.example.com)
   • Redirect URL — куда вернуть пользователя (опционально)
   • Стиль кнопки — выбери из 10 вариантов
3. Скопируй Client ID и Client SecretОни показываются один раз. Сохрани их в надёжном месте.

2. Кнопка входа

После регистрации в панели разработчика нажми «Код кнопки» — MVTID сгенерирует готовый код. Скопируй его и вставь в HTML своего сайта.

Пример сгенерированного кода:

<!-- MVTID — кнопка входа -->
<button id="mvtid-login-btn" class="mvtid-btn bs-1">Войти через MVTID</button>

<style>
.mvtid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; border-radius: 12px;
  cursor: pointer; border: none; color: #fff;
  background: linear-gradient(135deg, #dc1420, #8b0a12);
}
.mvtid-btn:hover { transform: translateY(-2px); }
</style>

<script>
(function() {
  const MVTID_URL = "https://mvtid.ru/";
  const CLIENT_ID = "mvtid_a1b2c3d4";
  const EXPECTED_ORIGIN = "https://mvtid.ru";
  let popup = null;

  document.getElementById("mvtid-login-btn").addEventListener("click", () => {
    const w = 460, h = 620;
    const left = (screen.width - w) / 2;
    const top = (screen.height - h) / 2;
    popup = window.open(
      MVTID_URL + "?client_id=" + encodeURIComponent(CLIENT_ID),
      "mvtid_auth",
      "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top
    );
    if (!popup) alert("Разреши всплывающие окна");
  });

  window.addEventListener("message", (e) => {
    if (e.origin !== EXPECTED_ORIGIN) return;
    if (!e.data || e.data.type !== "mvtid:auth") return;
    if (e.data.clientId !== CLIENT_ID) return;
    if (popup && !popup.closed) popup.close();

    // Успешный вход — данные в e.data
    document.dispatchEvent(new CustomEvent("mvtid:auth", { detail: e.data }));
  });
})();
</script>

Замени mvtid_a1b2c3d4 на свой Client ID.

3. Приём данных

Когда пользователь успешно войдёт через MVTID, MVTID отправит твоему сайту событие mvtid:auth. Поймай его и залогинь пользователя у себя.

Что приходит в событии

Пример обработки

document.addEventListener("mvtid:auth", (e) => {
  const user = e.detail;
  console.log("Пользователь вошёл:", user);

  // Пример: сохранить сессию
  localStorage.setItem("user", JSON.stringify({
    uid: user.uid,
    email: user.email,
    name: user.name
  }));

  // Пример: показать приветствие
  document.getElementById("welcome").textContent =
    "Привет, " + user.name + "!";

  // Пример: редирект в личный кабинет
  // window.location.href = "/dashboard";
});

4. Проверка на сервере (опционально)

Если у тебя есть свой бэкенд — можешь проверить данные пользователя через MVTID. Это защищает от подделки postMessage.

Логика:

1. Твой фронтенд получает uid из события
2. Отправляет запрос на твой сервер: POST /auth/verify { uid }
3. Твой сервер делает запрос к Firebase MVTID (или через MVTID API) и проверяет, существует ли такой uid
4. Если всё ок — сервер создаёт сессию для пользователя

Какие данные передаются

MVTID передаёт только те данные, которые пользователь указал в своём профиле. Передача происходит один раз — при входе через SSO.

Обработка ошибок

SSO может не сработать по нескольким причинам:

Безопасность

Несколько правил, которые стоит соблюдать:

1. Проверяй e.originВсегда сравнивай e.origin с https://mvtid.ru. Это защищает от подделки сообщения.
2. Проверяй e.data.clientIdУбедись, что пришёл именно твой Client ID, а не чужой.
3. Не доверяй e.data.email напрямуюДля важных операций (платежи, приватные данные) — проверяй через свой бэкенд.
4. Не храни Client Secret на фронтендеСекрет — только для сервера. Если утечёт — придётся генерировать новый.
5. Используй HTTPSMVTID работает только с HTTPS. Твой сайт тоже должен быть на HTTPS.

Полный пример

Простой HTML-файл, который показывает «Войти через MVTID» и приветствует пользователя после входа:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой сервис</title>
</head>
<body>

  <h1>Добро пожаловать</h1>
  <div id="welcome">Гость</div>

  <button id="mvtid-login-btn" class="mvtid-btn">Войти через MVTID</button>

  <style>
    .mvtid-btn {
      padding: 14px 24px; font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 800; letter-spacing: 2px;
      text-transform: uppercase; border-radius: 12px;
      cursor: pointer; border: none; color: #fff;
      background: linear-gradient(135deg, #dc1420, #8b0a12);
    }
  </style>

  <script>
  (function() {
    const MVTID_URL = "https://mvtid.ru/";
    const CLIENT_ID = "ТВОЙ_CLIENT_ID";
    const EXPECTED_ORIGIN = "https://mvtid.ru";
    let popup = null;

    document.getElementById("mvtid-login-btn").addEventListener("click", () => {
      const w = 460, h = 620;
      const left = (screen.width - w) / 2;
      const top = (screen.height - h) / 2;
      popup = window.open(
        MVTID_URL + "?client_id=" + encodeURIComponent(CLIENT_ID),
        "mvtid_auth",
        "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top
      );
      if (!popup) alert("Разреши всплывающие окна");
    });

    window.addEventListener("message", (e) => {
      if (e.origin !== EXPECTED_ORIGIN) return;
      if (!e.data || e.data.type !== "mvtid:auth") return;
      if (e.data.clientId !== CLIENT_ID) return;
      if (popup && !popup.closed) popup.close();

      const user = e.data;
      document.getElementById("welcome").textContent =
        "Привет, " + user.name + "!";
    });
  })();
  </script>

</body>
</html>

FAQ

Обязателен ли бэкенд?

Нет. SSO работает полностью на фронтенде. Бэкенд нужен только для дополнительной проверки токенов.

Сколько приложений можно зарегистрировать?

Неограниченно. Каждое приложение получает свой Client ID и Client Secret.

Что если я потерял Client Secret?

Зайди в панель разработчика → выбери приложение → нажми «Сменить секрет». Старый секрет перестанет работать.

Как удалить приложение?

Панель разработчика → выбери приложение → кнопка «Удалить». Приложение сразу перестанет работать, токены аннулируются.

Как узнать, сколько человек вошло через моё приложение?

В панели разработчика у каждого приложения есть счётчик входов. Он обновляется автоматически.

Можно ли использовать MVTID на мобильном приложении?

Да, но попап-SSO для этого не подходит. Нужен OAuth-flow — с редиректом и callback-URL. Напиши на maksimgamemaksim@bk.ru, чтобы обсудить интеграцию.

Что если пользователь не зарегистрирован в MVTID?

MVTID покажет ему форму регистрации прямо во всплывающем окне. После регистрации он автоматически войдёт в твоё приложение.

Как связаться с поддержкой?

Email: maksimgamemaksim@bk.ru. Приложи скриншот ошибки и URL, где она возникла.