Компонент входа в Microsoft Graph Toolkit
Компонент входа — это кнопка и всплывающий элемент управления, предназначенные для упрощения проверки подлинности платформы удостоверений Майкрософт. Он обеспечивает два состояния:
- Если пользователь не вошел в систему, элемент управления является простой кнопкой для запуска входа в систему.
- Если пользователь вошел в систему, элемент управления отображает имя, изображение профиля и электронную почту вошедшего пользователя. При щелчке открывается всплывающее окно с командой для выхода.
Вы также можете разрешить вход с несколькими учетными записями. Отобразится список всех ваших учетных записей, вошедшего в систему, и вы можете выполнить вход с помощью других новых учетных записей.
Пример
В примере ниже показан компонент mgt-login с указанием вошедшего пользователя.
Использование элемента управления без поставщика проверки подлинности
По умолчанию компонент поддерживает поставщика и Microsoft Graph. Но если вы хотите указать свою логику и проверку подлинности, вы можете воспользоваться свойством userDetails, чтобы настроить сведения о вошедшем пользователе.
| Атрибут | Свойство | Описание |
|---|---|---|
| login-view | loginView | Определяет стиль представления, применяемый к вошедшего в систему пользователя. Параметры: full, compact, аватар, по умолчанию — full. |
| show-presence | showPresence | Определяет, отображается ли индикатор присутствия для текущего пользователя в элементе mgt-person управления с пользователем, прошедшим проверку подлинности. Значение по умолчанию: false. |
| user-details | userDetails | Позволяет задать сведения об объекте пользователя, которые будет отображать компонент. |
В примере ниже настраиваются сведения о пользователе.
let loginControl = document.getElementById("myLoginControl");
loginControl.userDetails = {
displayName: "Nikola Metulev",
mail: "nikola@contoso.com",
personImage: "url to the image",
};
Если userDetails задано значение , null вы перейдете в состояние выхода.
Настраиваемые свойства CSS
Компонент mgt-login определяет следующие настраиваемые свойства CSS.
<mgt-login class="login"></mgt-login>
.login {
--login-signed-out-button-background: red;
--login-signed-out-button-hover-background: orange;
--login-signed-out-button-text-color: purple;
--login-signed-in-background: red;
--login-signed-in-hover-background: green;
--login-button-padding: 5px;
--login-popup-background-color: blue;
--login-popup-text-color: brown;
--login-popup-command-button-background-color: orange;
--login-popup-padding: 8px;
--login-add-account-button-text-color: yellow;
--login-add-account-button-background-color: red;
--login-add-account-button-hover-background-color: purple;
--login-command-button-background-color: orange;
--login-command-button-hover-background-color: purple;
--login-command-button-text-color: black;
--login-person-avatar-size: 60px;
/** person component tokens **/
--person-line1-text-color: whitesmoke;
--person-line2-text-color: white;
--person-background-color: blue;
}
Дополнительные сведения см. в статье Компоненты стиля.
События
Из элемента управления инициируются следующие события.
| Событие | Когда он генерируется | Пользовательские данные | Отменяемым | Пузыри | Работает с пользовательским шаблоном |
|---|---|---|---|---|---|
loginInitiated |
Пользователь нажал кнопку входа, чтобы начать процесс входа. | Нет | Да | Нет | Да |
loginCompleted |
Процесс входа выполнен успешно, и пользователь вошел в систему. | Нет | Нет | Нет | Да |
loginFailed |
Пользователь отменил процесс входа или не смог войти в систему. | Нет | Нет | Нет | Да |
logoutInitiated |
Пользователь начал выход из системы | Нет | Да | Нет | Да |
logoutCompleted |
Пользователь вышел из | Нет | Нет | Нет | Да |
Чтобы обрабатывать вход и выход, используйте события loginInitiated и logoutInitiated.
Дополнительные сведения об обработке событий см. в разделе События.
Шаблоны
Компонент mgt-login поддерживает несколько шаблонов, позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте элемент <template> в компонент и присвойте параметру data-type одно из значений, указанных в следующей таблице.
| Тип данных | Контекст данных | Описание |
|---|---|---|
| signed-in-button-content |
personDetails: объект person, personImage: строка изображения пользователя |
Шаблон, используемый для отображения содержимого в кнопке, если пользователь выполнил вход. |
| signed-out-button-content | null | Шаблон, используемый для отображения содержимого в кнопке, если пользователь не выполнил вход. |
| flyout-commands |
handleSignOut: функция выхода |
Шаблон, используемый для отображения команд во всплывающем окне. |
| flyout-person-details |
personDetails: объект person, personImage: строка изображения пользователя |
Шаблон, используемый для отображения сведений о пользователе во всплывающем окне. |
Разрешения Microsoft Graph
Этот компонент использует следующие API Microsoft Graph. Для каждого из запросов API требуется одно из перечисленных разрешений.
| Конфигурация | Разрешение | API |
|---|---|---|
| default | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/me/ |
| default | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/me//photo/$value |
Подкомпоненты
Компонент mgt-login состоит из одного или нескольких подкомпонентов, для которых могут потребоваться другие разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту: mgt-person.
Проверка подлинности
В элементе управления входом используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.
Кэш
Этот компонент использует компонент Person для отображения пользователя и наследует от него всю конфигурацию кэша.
Расширение для дополнительного управления
В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected render* для переопределения в расширениях компонента.
| Метод | Описание |
|---|---|
| renderButton | Отображает хром кнопки. |
| renderButtonContent | Отображает содержимое кнопки. |
| renderSignedInButtonContent | Отображение содержимого кнопки, если пользователь выполнил вход. |
| renderSignedOutButtonContent | Отрисовка содержимого кнопки, если пользователь не вошел в систему. |
| renderFlyout | Отображает хром всплывающего окна. |
| renderFlyoutContent | Отображает содержимое всплывающего окна. |
| renderFlyoutPersonDetails | Отображение сведений о пользователе во всплывающем окне. |
| renderFlyoutCommands | Отображение команд всплывающего окна. |
Создание собственного всплывающего окна
Можно использовать собственный компонент всплывающего окна вместо встроенного, переопределив метод renderFlyout() и предоставив новое всплывающее окно.
В этом случае нужно убедиться, что компонент входа продолжает правильно работать, переопределяя методы отображения всплывающего окна protected, чтобы изменить видимость альтернативного всплывающего окна.
| Метод | Описание |
|---|---|
| hideFlyout | Закрывает всплывающее окно. |
| showFlyout | Отображает всплывающее окно. |
| toggleFlyout | Переключает состояние всплывающего окна. |
Локализация
Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения см. в разделе Локализация компонентов.
| Имя строки | Значение по умолчанию |
|---|---|
| signInLinkSubtitle | Sign In |
| signOutLinkSubtitle | Sign Out |
| signInWithADifferentAccount | Sign in with a different account |