Настройка и подключение мини-виджета Trusted.ID#

В этом руководстве вы узнаете, как настроить и интегрировать мини-виджет Trusted.ID на ваш веб-ресурс. Вы научитесь настраивать параметры аутентификации, кастомизировать внешний вид и стилизовать все элементы виджета под дизайн вашего проекта.

Содержание:

Что такое мини-виджет?
Конфигурация виджета
Настройка отображения профиля
Настройка кнопки входа
Параметры кнопок меню
Стилизация мини-виджета
Индивидуальная стилизация кнопок меню
Смотрите также

Что такое мини-виджет?#

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

Мини-виджет представляет из себя лёгкий JavaScript-компонент для аутентификации пользователей в сервисе Trusted.ID. Он работает по стандартам OIDC/OAuth2, PKCE и может быть встроен в любые веб-сайты или интерфейсы — от простого HTML до SPA на React или Vue.

💡 Чтобы добавить приложение в мини-виджет включите переключатель Отображать в мини-виджете в настройках приложения.

Примеры виджетов:

Конфигурация виджета#

Обязательные параметры#

Для базовой работы виджета необходимо указать три ключевых параметра:

Параметр	Тип	Описание	Пример
`appId`	`string`	Уникальный идентификатор приложения в Trusted	`"MTnOOTdx85FgNbOFy2nUsH"`
`backendUrl`	`string`	URL вашего backend API	`"http://localhost:3001"`
`redirectUrl`	`string`	URL для перенаправления после авторизации	`"http://localhost:3000/login"`

Дополнительные параметры#

Для расширенной настройки доступны опциональные параметры:

Параметр	Тип	Описание	Значение по умолчанию
`issuer`	`string`	URL Trusted SSO сервера	`"https://id.kloud.one"`
`withOutHomePage`	`boolean`	Автоматический редирект на авторизацию	`false`
`getTokenEndPoint`	`string`	Endpoint для получения токена	`"/api/oidc/token"`
`getUserInfoEndPoint`	`string`	Endpoint для получения данных пользователя	`"/api/oidc/me"`
`scopes`	`string[]`	OAuth2 разрешения	`["openid", "lk", "profile"]`
`profile`	`IProfileConfig`	Настройки профиля пользователя	См. раздел ниже
`loginButton`	`ICustomMenuButton`	Настройки кнопки входа	См. раздел ниже
`menuButtons`	`ICustomMenuButton[]`	Массив дополнительных кнопок	См. раздел ниже
`customStyles`	`ICustomStyles`	Глобальные стили виджета	См. раздел ниже

Базовый пример подключения#

import { TrustedWidget, TrustedWidgetConfig } from "trusted-widget";

const newConfig: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  issuer: "https://id.kloud.one",
  withOutHomePage: false,
  getTokenEndPoint: "/api/oidc/token",
  getUserInfoEndPoint: "/api/oidc/me",
};

// Использование компонента
<TrustedWidget config={newConfig} />;

Настройка отображения профиля#

Параметры конфигурации профиля#

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

Параметр	Тип	Описание	Значение по умолчанию
`isHideText`	`boolean`	Скрыть отображение имени пользователя	`false`
`wrapper`	`IComponentStyles`	Стили контейнера профиля (только цвета)	См. раздел стилей
`button`	`IComponentStyles`	Стили кнопки-аватара пользователя (только цвета)	См. раздел стилей

⚠️ Важно: Для настроек профиля (profile.wrapper и profile.button) можно изменять только цвета (color.text, color.background, color.hover) и скрывать имя пользователя (isHideText). Другие параметры стилизации (такие как borderRadius, padding, position) не применяются к профилю.

Пример настройки профиля#

// Пример: Только аватар без текста
const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  profile: {
    isHideText: true, // Скрыть имя, показывать только аватар
  },
};

Настройка кнопки входа#

Кнопка входа отображается для неавторизованных пользователей. Вы можете настроить её текст, иконку и стили.

Параметры кнопки входа#

Параметр	Тип	Описание	Значение по умолчанию
`text`	`string`	Текст кнопки входа	`"Войти"`
`type`	`string`	Тип кнопки	`"login"`
`icon`	`string \\| React.ReactElement`	Ссылка на изображение или React элемент	`null`
`customStyles`	`IComponentStyles`	Индивидуальные стили для кнопки	См. раздел стилей

Пример конфигурации#

// Пример: Кнопка с кастомной иконкой
const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  loginButton: {
    text: "Войти через Trusted",
    type: "login",
    icon: "https://id.kloud.one/favicon.ico", // Пользовательская иконка
  },
};

// Пример: Простая текстовая кнопка без иконки
const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  loginButton: {
    text: "Войти",
    type: "login",
    customStyles: {
      isHideIcon: true, // Скрыть иконку
    },
  },
};

Параметры кнопок меню#

Обязательные параметры#

Параметр	Тип	Описание	Пример
`text`	`string`	Отображаемое название кнопки	`"TestService"`
`link`	`string`	Ссылка на страницу для перехода	`"https://test.com"`

Дополнительные параметры#

Параметр	Тип	Описание	Значение по умолчанию
`icon`	`string \\| React.ReactElement`	Ссылка на изображение или React элемент	`null`
`customStyles`	`IComponentStyles`	Индивидуальные стили для кнопки	См. раздел стилей

Пример конфигурации#

import { TrustedWidget, TrustedWidgetConfig } from "trusted-widget";

const newConfig: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  menuButtons: [
    {
      text: "TestService",
      link: "https://test.com",
      icon: "https://image.png", // | <Icon />
    },
  ],
};

Стилизация мини-виджета#

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

Структура объекта стилей#

customStyles: {
  global: {
    borderRadius: "8px",        // Глобальное скругление
    color: { /* цвета */ }      // Глобальные цвета
  },
  components: {
    primaryButton: { /* стили */ },   // Основные кнопки
    secondaryButton: { /* стили */ }, // Второстепенные кнопки
    accountButton: { /* стили */ }    // Кнопки меню аккаунта
  }
}

Параметры кастомных стилей#

Глобальные стили#

Параметр	Тип	Описание	Пример
`global.borderRadius`	`string`	Скругление углов для всех элементов	`"12px"`
`global.color`	`IComponentStyles`	Глобальные цвета	См. ниже

Стили компонентов#

Параметр	Тип	Описание	Назначение
`components.primaryButton`	`IComponentStyles`	Стиль основной кнопки	Кнопка "Войти", "Профиль"
`components.secondaryButton`	`IComponentStyles`	Стиль второстепенной кнопки	Кнопка "Выход"
`components.accountButton`	`IComponentStyles`	Стиль кнопок меню аккаунта	Кнопки в выпадающем меню

Параметры стилей компонентов IComponentStyles#

Параметр	Тип	Описание	Пример
`color.text`	`string`	Цвет текста и иконки (HEX)	`"#ffffff"`
`color.background`	`string`	Цвет фона (HEX)	`"#1976d2"`
`color.hover`	`string`	Цвет фона при наведении (HEX)	`"#1565c0"`
`borderRadius`	`string`	Скругление углов элемента	`"8px"`
`padding`	`string`	Внутренние отступы	`"8px 16px"`
`position`	`"left" \\| "center"`	Выравнивание контента в кнопке	`"center"`
`isHideIcon`	`boolean`	Скрыть иконку в кнопке	`false`

Наследование стилей#

Виджет имеет умную систему наследования стилей для кнопки secondaryButton:

Если заданы стили только для primaryButton, то они автоматически применяются и к secondaryButton, но с большей прозрачностью (через уменьшение opacity).
Если заданы отдельные стили для secondaryButton, то прозрачность применяться не будет — используются только явно указанные параметры.

Пример конфигурации стилей#

Пример настройки глобальных стилей#

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  // Дефолтные значения для глобальных стилей
  customStyles: {
    global: {
      color: {
        text: "#666666",
        background: "#ffffff",
      },
      borderRadius: "8px",
    },
    components: {
      accountButton: {
        color: {
          text: "#fff",
          background: "#efefef",
          hover: undefined, // если не задан применяется filter: brightness(90%)
        },
        position: "left",
        isHideIcon: false,
      },
      primaryButton: {
        color: {
          text: "#ffffff",
          background: "#b5262f",
          hover: undefined, // если не задан применяется filter: brightness(90%)
        },
        position: "left",
        isHideIcon: false,
      },
      // secondaryButton не задан — будет использоваться стиль primaryButton с прозрачностью (opacity:0.5)
    },
  },
};

Пример полной конфигурации стилей#

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  // Настройки профиля
  profile: {
    isHideText: false,
    wrapper: {
      color: {
        text: "#333333",
        background: "#f8f9fa",
      },
    },
    button: {
      color: {
        text: "#333333",
        background: "transparent",
        hover: "rgba(0, 0, 0, 0.08)",
      },
    },
  },
};

Пример полной конфигурации с кнопкой входа#

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  // Кнопка входа с иконкой
  loginButton: {
    text: "Войти",
    type: "login",
    icon: "https://id.kloud.one/favicon.ico",
    customStyles: {
      color: {
        text: "#ffffff",
        background: "#4CAF50",
        hover: "#45a049",
      },
      borderRadius: "8px",
      padding: "10px 20px",
    },
  },
};

Пример полной конфигурации с глобальными стилями и меню#

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  // Глобальные стили
  customStyles: {
    global: {
      borderRadius: "8px",
    },
    components: {
      primaryButton: {
        color: {
          text: "#ffffff",
          background: "#4CAF50",
          hover: "#45a049",
        },
        position: "center",
        isHideIcon: false,
      },
      secondaryButton: {
        color: {
          text: "#4CAF50",
          background: "transparent",
          hover: "#f1f8e9",
        },
        position: "center",
        isHideIcon: false,
      },
      accountButton: {
        color: {
          text: "#333333",
          background: "#ffffff",
          hover: "#f5f5f5",
        },
        position: "left",
        isHideIcon: false,
      },
    },
  },
};

Индивидуальная стилизация кнопок меню#

Для каждой кнопки в menuButtons можно задать индивидуальные стили через свойство customStyles типа IComponentStyles.

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

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  menuButtons: [
    {
      text: "Личный кабинет",
      link: "https://my-account.com",
      icon: "https://icons.com/profile.png",
      customStyles: {
        color: {
          text: "#ffffff",
          background: "#4CAF50", // Зеленый фон
          hover: "#45a049", // Темно-зеленый при наведении
        },
        borderRadius: "8px",
        padding: "8px 16px",
        position: "center",
      },
    },
    {
      text: "Настройки",
      link: "https://settings.com",
      icon: "https://icons.com/settings.png",
      customStyles: {
        color: {
          text: "#333333",
          background: "#f5f5f5", // Светло-серый фон
          hover: "#e0e0e0", // Серый при наведении
        },
        borderRadius: "6px",
        padding: "6px 12px",
        position: "left",
      },
    },
    {
      text: "Поддержка",
      link: "https://support.com",
      customStyles: {
        color: {
          text: "#ffffff",
          background: "#FF5722", // Оранжевый фон
          hover: "#E64A19", // Темно-оранжевый при наведении
        },
        borderRadius: "4px",
        padding: "10px 20px",
        position: "center",
        isHideIcon: true, // Скрыть иконку для этой кнопки
      },
    },
  ],
};

Приоритет применения стилей#

Индивидуальные стили кнопки (customStyles в объекте кнопки) — высший приоритет
Стили accountButton (customStyles.components.accountButton) — если не заданы индивидуальные
Дефолтные стили — если не заданы предыдущие

const config: TrustedWidgetConfig = {
  appId: "MTnOOTdx85FgNbOFy2nUsH",
  backendUrl: "http://localhost:3001",
  redirectUrl: "http://localhost:3000/login",
  // Если у кнопки НЕТ customStyles, то для menuButtons применяются стили accountButton
  customStyles: {
    components: {
      // дефолтные стили accountButton
      accountButton: {
        color: {
          text: "#666666",
          background: "#efefef",
          hover: undefined, // если не задан применяется filter: brightness(90%)
        },
        position: "left",
      },
    },
  },
};

Принципы стилизации мини-виджета#

Принцип	Что это значит	Где и как это применить
Централизованное управление	Все настройки внешнего вида задаются через три ключевых объекта конфигурации.	Настройте общий вид в `customStyles`, профиль — в `profile`, кнопку входа — в `loginButton`.
Гибкая настройка профиля	Внешний вид блока с именем и аватаром авторизованного пользователя настраивается отдельно.	Используйте `profile.wrapper` для фона и `profile.button` для кнопки-аватара. Учтите, что здесь работают только настройки цвета.
Настройка кнопки входа	Стили кнопки, которую видят неавторизованные пользователи, настраиваются независимо.	Задайте текст, иконку и стили в объекте `loginButton` и его свойстве `customStyles`.
Структура цветов	Цветовая схема для любого элемента описывается единообразно.	Всегда используйте вложенный объект `color` с полями `text`, `background` и `hover` (например, `color: {text: "#fff", background: "#1976d2"}`).
Управление отображением	Можно легко скрывать текстовые метки или иконки.	Используйте флаги `isHideText` (скрыть текст) и `isHideIcon` (скрыть иконку) в стилях компонента.
Гибкое выравнивание	Содержимое внутри кнопок можно выровнять по левому краю или по центру.	Задайте свойство `position: "left"` или `position: "center"` в стилях нужной кнопки.
Умное наследование	Система сама заполняет пробелы в конфигурации, используя логичные значения по умолчанию.	- Для `secondaryButton`: если стили не заданы, он унаследует `primaryButton` с добавлением прозрачности. - Для `hover`: если цвет не указан, к фону при наведении применится `filter: brightness(90%)`.
Fallback-система	Кнопки в выпадающем меню используют общие стили, если для них не заданы индивидуальные.	Если у кнопки в `menuButtons` нет своего `customStyles`, к ней автоматически применяются стили из `accountButton`.
Глобальное скругление	Единое значение скругления углов можно задать для всех элементов виджета.	Укажите `customStyles.global.borderRadius` (например, `"8px"`), и оно повлияет на кнопки и модальные окна.
Индивидуальная кастомизация	Любую кнопку в меню можно стилизовать совершенно уникально.	Добавьте объект `customStyles` для конкретного элемента в массиве `menuButtons`.

Смотрите также#

Настройка системы — общие настройки безопасности.
Личный профиль и управление разрешениями приложений — настройка и контроль пользовательских данных.
Управление пользователями — администрирование учетных записей.

Настройка и подключение мини-виджета Trusted.ID#

Что такое мини-виджет?#

Конфигурация виджета#

Обязательные параметры#

Дополнительные параметры#

Базовый пример подключения#

Настройка отображения профиля#

Параметры конфигурации профиля#

Пример настройки профиля#

Настройка кнопки входа#

Параметры кнопки входа#

Пример конфигурации#

Параметры кнопок меню#

Обязательные параметры#

Дополнительные параметры#

Пример конфигурации#

Стилизация мини-виджета#

Структура объекта стилей#

Параметры кастомных стилей#

Глобальные стили#

Стили компонентов#

Параметры стилей компонентов IComponentStyles#

Наследование стилей#

Пример конфигурации стилей#

Пример настройки глобальных стилей#

Пример полной конфигурации стилей#

Пример полной конфигурации с кнопкой входа#

Пример полной конфигурации с глобальными стилями и меню#

Индивидуальная стилизация кнопок меню#

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

Приоритет применения стилей#

Принципы стилизации мини-виджета#

Смотрите также#

Продукты

Компания

Поддержка