Компонент входа в Microsoft Graph Toolkit
Компонент входа — это кнопка и всплывающий элемент управления, предназначенные для упрощения проверки подлинности платформы удостоверений Майкрософт. Он обеспечивает два состояния:
- Если пользователь не вошел в систему, элемент управления является простой кнопкой для запуска входа в систему.
- Если пользователь вошел в систему, элемент управления отображает имя, изображение профиля и электронную почту вошедшего пользователя. При щелчке открывается всплывающее окно с командой для выхода.
Пример
В примере ниже показан компонент mgt-login с указанием вошедшего пользователя.
Использование элемента управления без поставщика проверки подлинности
По умолчанию компонент поддерживает поставщика и Microsoft Graph. Но если вы хотите указать свою логику и проверку подлинности, вы можете воспользоваться свойством userDetails, чтобы настроить сведения о вошедшем пользователе.
| Атрибут | Свойство | Описание |
|---|---|---|
| user-details | userDetails | Настройка объекта пользователя, который будет отображаться в элементе управления. |
В примере ниже настраиваются сведения о пользователе.
let loginControl = document.getElementById('myLoginControl');
loginControl.userDetails = {
displayName: 'Nikola Metulev',
mail: 'nikola@contoso.com',
personImage: 'url'
}
Присвоение параметру userDetails значения null обеспечивает переход к состоянию выхода.
Чтобы обрабатывать вход и выход, используйте события loginInitiated и logoutInitiated.
Настраиваемые свойства CSS
Компонент mgt-login определяет следующие настраиваемые свойства CSS.
mgt-login {
--font-size: 14px;
--font-weight: 600;
--weith: '100%';
--height: '100%';
--margin: 0;
--padding: 12px 20px;
--button-color: #201f1e;
--button-color--hover: var(--theme-primary-color);
--button-background-color: transparent;
--button-background-color--hover: #edebe9;
--popup-background-color: white;
--popup-command-font-size: 12px;
--popup-color: #201f1e;
}
Дополнительные сведения см. в статье Компоненты стиля.
События
Из элемента управления инициируются следующие события.
| Событие | Когда он генерируется | Пользовательские данные | Отменяемым | Пузыри | Работает с пользовательским шаблоном |
|---|---|---|---|---|---|
loginInitiated |
Пользователь нажал кнопку входа, чтобы начать процесс входа. | Нет | Да | Нет | Да |
loginCompleted |
Процесс входа выполнен успешно, и пользователь вошел в систему. | Нет | Нет | Нет | Да |
loginFailed |
Пользователь отменил процесс входа или не смог войти в систему. | Нет | Нет | Нет | Да |
logoutInitiated |
Пользователь начал выход из системы | Нет | Да | Нет | Да |
logoutCompleted |
Пользователь вышел из | Нет | Нет | Нет | Да |
Дополнительные сведения об обработке событий см. в разделе События.
Шаблоны
Компонент mgt-login поддерживает несколько шаблонов, позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте элемент <template> в компонент и присвойте параметру data-type одно из значений, указанных в следующей таблице.
| Тип данных | Контекст данных | Описание |
|---|---|---|
| signed-in-button-content | personDetails: объект пользователя, personImage: строка изображения пользователя |
Шаблон, используемый для отображения содержимого в кнопке, если пользователь выполнил вход. |
| signed-out-button-content | null | Шаблон, используемый для отображения содержимого в кнопке, если пользователь не выполнил вход. |
| flyout-commands | handleSignOut: функция выхода | Шаблон, используемый для отображения команд во всплывающем окне. |
| flyout-person-details | personDetails: объект пользователя, personImage: строка изображения пользователя | Шаблон, используемый для отображения сведений о пользователе во всплывающем окне. |
Разрешения Microsoft Graph
Этот компонент использует следующие API и разрешения Microsoft Graph.
| Конфигурация | Разрешение | API |
|---|---|---|
| default | User.Read | /users/me/ |
При использовании шаблонов и flyout-person-details по умолчанию signed-in-button-content этот компонент использует компонент Person для отображения пользователя и наследует все разрешения.
Проверка подлинности
В элементе управления входом используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.
Кэш
Этот компонент использует компонент Person для отображения пользователя и наследует от него всю конфигурацию кэша.
Расширение для дополнительного управления
В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected render* для переопределения в расширениях компонента.
| Метод | Описание |
|---|---|
| renderButton | Отображает хром кнопки. |
| renderButtonContent | Отображает содержимое кнопки. |
| renderSignedInButtonContent | Отображение содержимого кнопки, если пользователь выполнил вход. |
| renderSignedOutButtonContent | Отображение содержимого кнопки, если пользователь не выполнил вход. |
| renderFlyout | Отображает хром всплывающего окна. |
| renderFlyoutContent | Отображает содержимое всплывающего окна. |
| renderFlyoutPersonDetails | Отображение сведений о пользователе во всплывающем окне. |
| renderFlyoutCommands | Отображение команд всплывающего окна. |
Создание собственного всплывающего окна
Можно использовать собственный компонент всплывающего окна вместо встроенного, переопределив метод renderFlyout() и предоставив новое всплывающее окно.
В этом случае нужно убедиться, что компонент входа продолжает правильно работать, переопределяя методы отображения всплывающего окна protected, чтобы изменить видимость альтернативного всплывающего окна.
| Метод | Описание |
|---|---|
| hideFlyout | Закрывает всплывающее окно. |
| showFlyout | Отображает всплывающее окно. |
| toggleFlyout | Переключает состояние всплывающего окна. |