Componente de inicio de sesión en Microsoft Graph Toolkit
Un componente De inicio de sesión es un control de botón y control flotante para facilitar la autenticación Plataforma de identidad de Microsoft. Proporciona dos estados:
- Cuando el usuario no ha iniciado sesión, el control es un botón sencillo para iniciar el proceso de inicio de sesión.
- Cuando el usuario ha iniciado sesión, el control muestra el nombre de usuario, la imagen de perfil y el correo electrónico con la sesión iniciada actual. Cuando se hace clic en , se abre un control flotante con un comando para cerrar la sesión.
También puede permitir el inicio de sesión con varias cuentas. Esto enumera todas las cuentas que ha iniciado sesión y le ofrece una opción para iniciar sesión con otras cuentas nuevas.
Ejemplo
En el ejemplo siguiente se muestra el mgt-login componente con un usuario que ha iniciado sesión.
Uso del control sin un proveedor de autenticación
El componente funciona con un proveedor y Microsoft Graph de fábrica. Sin embargo, si desea proporcionar su propia lógica y autenticación, puede usar la userDetails propiedad para establecer los detalles del usuario que ha iniciado sesión.
| Atributo | Propiedad | Descripción |
|---|---|---|
| login-view | loginView | Determina el estilo de vista que se va a aplicar al usuario que ha iniciado sesión. Las opciones son "full", "compact", "avatar", el valor predeterminado es "full" |
| show-presence | showPresence | Determina si el indicador de presencia del usuario actual en el mgt-person control se muestra con un usuario autenticado. El valor predeterminado es false. |
| detalles del usuario | userDetails | Permite establecer los detalles del objeto de usuario que mostrará el componente. |
En el ejemplo siguiente se establecen los detalles de la persona.
let loginControl = document.getElementById("myLoginControl");
loginControl.userDetails = {
displayName: "Nikola Metulev",
mail: "nikola@contoso.com",
personImage: "url to the image",
};
La configuración de userDetails en null va al estado de la sesión iniciada.
Propiedades personalizadas css
El mgt-login componente define las siguientes propiedades personalizadas 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;
}
Para obtener más información, consulte Componentes de estilo.
Eventos
Los siguientes eventos se desencadenan desde el control .
| Evento | Cuándo se emite | Datos personalizados | Cancelable | Burbujas | Funciona con una plantilla personalizada |
|---|---|---|---|---|---|
loginInitiated |
El usuario ha hecho clic en el botón de inicio de sesión para iniciar el proceso de inicio de sesión. | Ninguno | Sí | No | Sí |
loginCompleted |
El proceso de inicio de sesión se realizó correctamente y el usuario ha iniciado sesión. | Ninguno | No | No | Sí |
loginFailed |
El usuario canceló el proceso de inicio de sesión o no pudo iniciar sesión. | Ninguno | No | No | Sí |
logoutInitiated |
El usuario comenzó a cerrar la sesión | Ninguno | Sí | No | Sí |
logoutCompleted |
El usuario ha iniciado sesión | Ninguno | No | No | Sí |
Use los eventos y logoutInitiated para controlar el loginInitiated inicio de sesión y la salida.
Para obtener más información sobre el control de eventos, vea eventos.
Plantillas
El mgt-login componente admite varias plantillas que permiten reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los valores enumerados en la tabla siguiente.
| Tipo de datos | Contexto de datos | Descripción |
|---|---|---|
| signed-in-button-content |
personDetails: objeto person, personImage: cadena de imagen de persona |
Plantilla usada para representar el contenido en el botón cuando el usuario ha iniciado sesión. |
| signed-out-button-content | nulo | Plantilla usada para representar el contenido en el botón cuando el usuario no ha iniciado sesión. |
| comandos de control flotante |
handleSignOut: función de cierre de sesión |
Plantilla usada para representar los comandos en el control flotante |
| flyout-person-details |
personDetails: objeto person, personImage: cadena de imagen de persona |
Plantilla usada para representar los detalles de la persona en el control flotante. |
Permisos de Microsoft Graph
Este componente usa las siguientes API de Microsoft Graph. Para cada una de las solicitudes de API, se requiere uno de los permisos enumerados.
| Configuración | Permiso | API |
|---|---|---|
| Es el valor predeterminado. | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/me/ |
| Es el valor predeterminado. | User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/me//photo/$value |
Subcomponentes
El mgt-login componente consta de uno o varios subcomponentes que pueden requerir permisos distintos de los enumerados anteriormente. Para obtener más información, consulte la documentación de cada subcomponente: mgt-person.
Autenticación
El control de inicio de sesión usa el proveedor de autenticación global descrito en la documentación de autenticación.
Caché
Este componente usa el componente Person para mostrar al usuario y hereda toda la configuración de caché de él.
Ampliar para obtener más control
Para escenarios más complejos o una experiencia de usuario realmente personalizada, este componente expone varios protected render* métodos para invalidar en extensiones de componente.
| Método | Descripción |
|---|---|
| renderButton | Representa el cromo del botón. |
| renderButtonContent | Representa el contenido del botón. |
| renderSignedInButtonContent | Represente el contenido del botón cuando el usuario haya iniciado sesión. |
| renderSignedOutButtonContent | Represente el contenido del botón cuando el usuario no haya iniciado sesión. |
| renderFlyout | Representa el cromo del control flotante. |
| renderFlyoutContent | Representa el contenido del control flotante. |
| renderFlyoutPersonDetails | Represente los detalles de la persona del control flotante. |
| renderFlyoutCommands | Representar los comandos de control flotante. |
Traiga su propio control flotante
Es posible usar su propio componente de control flotante en lugar del integrado, reemplazando el renderFlyout() método y proporcionando el nuevo control flotante.
En este caso, asegúrese de que el componente de inicio de sesión sigue funcionando según lo esperado reemplazando los protected métodos de visualización del control flotante para actualizar la visibilidad del control flotante alternativo.
| Método | Descripción |
|---|---|
| hideFlyout | Descarta el control flotante. |
| showFlyout | Muestra el control flotante. |
| toggleFlyout | Alterna el estado del control flotante. |
Localización
El control expone las siguientes variables que se pueden localizar. Para obtener más información, consulte Localización de componentes.
| Nombre de cadena | Valor predeterminado |
|---|---|
| signInLinkSubtitle | Sign In |
| signOutLinkSubtitle | Sign Out |
| signInWithADifferentAccount | Sign in with a different account |