Компонент входа в Microsoft Graph Toolkit

Предостережение

Набор средств Microsoft Graph не рекомендуется использовать. Период выхода на пенсию начинается 1 сентября 2025 года, а полный выход на пенсию запланирован на 28 августа 2026 года. Разработчикам следует перейти на использование пакетов SDK для Microsoft Graph или других поддерживаемых средств Microsoft Graph для создания веб-интерфейсов. Дополнительные сведения см. в объявлении об устаревании.

Компонент входа — это кнопка и всплывающий элемент управления для упрощения проверки подлинности платформа удостоверений Майкрософт. Он обеспечивает два состояния:

Если пользователь не вошел в систему, элемент управления представляет собой простую кнопку для запуска процесса входа.
Когда пользователь вошел в систему, элемент управления отображает текущее имя пользователя, изображение профиля и адрес электронной почты. При щелчке открывается всплывающее окно с командой для выхода.

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

Пример

В примере ниже показан компонент mgt-login с указанием вошедшего пользователя.

HTML
React;

Откройте этот пример в mgt.dev.

Использование элемента управления без поставщика проверки подлинности

По умолчанию компонент поддерживает поставщика и 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`

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2024-11-07