Componente de inicio de sesión en Microsoft Graph Toolkit

  • Artículo

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