登录组件是按钮和浮出控件,用于简化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
将 转到已注销状态。
组件 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-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 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 |