Microsoft Graph 工具包中的登录组件

  • 项目

登录组件是按钮和浮出控件，用于简化Microsoft 标识平台身份验证。 它提供两种状态：

  • 当用户未登录时，控件是用于启动登录过程的简单按钮。
  • 用户登录后，控件将显示当前登录的用户名、配置文件图像和电子邮件。 单击后，会打开浮出控件，其中包含用于注销的命令。

还可以允许使用多个帐户登录。 这会列出所有已登录帐户，并提供使用其他新帐户登录的选项。

示例

以下示例演示具有 mgt-login 已登录用户的组件。

在没有身份验证提供程序的情况下使用控件

该组件适用于现成的提供程序和 Microsoft Graph。 但是，如果要提供自己的逻辑和身份验证，可以使用 userDetails 属性来设置登录用户的详细信息。

属性 属性 说明
login-view loginView 确定要应用于已登录用户的视图样式。 选项为“full”、“compact”、“avatar”，默认值为“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",
};

null设置为 userDetails 将 转到已注销状态。

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 空 用于在用户未登录时在按钮中呈现内容的模板。
flyout-commands handleSignOut：注销函数 用于在浮出控件中呈现命令的模板
flyout-person-details personDetails：person 对象、personImage：人员图像字符串 用于在浮出控件中呈现人员详细信息的模板。

Microsoft Graph 权限

此组件使用以下 Microsoft Graph API。 对于每个 API 请求，需要列出的权限之一。

配置 权限 API
默认 User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All /users/me/
默认 User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、User.ReadWrite.All /users/me//photo/$value

子组件

组件 mgt-login 由一个或多个子组件组成，这些子组件可能需要除前面列出的权限以外的其他权限。 有关详细信息，请参阅每个子组件的文档： mgt-person。

身份验证

登录控件使用身份验证文档中所述的全局 身份验证提供程序。

缓存

此组件使用 Person 组件 显示用户，并从中继承所有缓存配置。

扩展以获得更多控制

对于更复杂的方案或真正自定义的 UX，此组件公开了组件扩展中的多种 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