Поделиться через


Компонент входа в 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