Componente de inicio de sesión en microsoft Graph Toolkit

Un componente De inicio de sesión es un botón y control de control desplegable para facilitar Plataforma de identidad de Microsoft autenticación. 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 que ha iniciado sesión. Cuando se hace clic en, se abre un control desplegable con un comando para cerrar sesión.

Ejemplo

En el ejemplo siguiente se muestra el mgt-login componente con un usuario que ha iniciado sesión.

Abra este ejemplo en mgt.dev

Uso del control sin un proveedor de autenticación

El componente funciona con un proveedor y Microsoft Graph de la caja. 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
user-details userDetails Establezca el objeto de usuario que se mostrará en el control.

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'
}

Si userDetails se null establece en, se irá al estado de salida.

Use los loginInitiated eventos and logoutInitiated para controlar la sesión y la salida.

Propiedades personalizadas css

El mgt-login componente define las siguientes propiedades personalizadas css.

mgt-login {
  --font-size: 14px;
  --font-weight: 600;
  --weith: '100%';
  --height: '100%';
  --margin: 0;
  --padding: 12px 20px;
  --button-color: #201f1e;
  --button-color--hover: var(--theme-primary-color);
  --button-background-color: transparent;
  --button-background-color--hover: #edebe9;
  --popup-background-color: white;
  --popup-command-font-size: 12px;
  --popup-color: #201f1e;
}

Para obtener más información, vea componentes de estilo.

Eventos

Los siguientes eventos se desencadenan desde el control.

Evento Cuándo se emite Datos personalizados Cancelable Burbujas Funciona con plantilla personalizada
loginInitiated El usuario hizo clic en el botón de inicio de sesión para iniciar el proceso de inicio de sesión Ninguno No
loginCompleted El proceso de inicio de sesión se ha realizado correctamente y el usuario ha iniciado sesión. Ninguno No No
loginFailed El usuario canceló el proceso de inicio de sesión o no pudo iniciar sesión Ninguno No No
logoutInitiated El usuario empezó a cerrar sesión Ninguno No
logoutCompleted El usuario ha iniciado sesión Ninguno No No

Para obtener más información acerca del control de eventos, vea eventos.

Plantillas

El mgt-login componente admite varias plantillas que permiten reemplazar determinadas 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: person object, personImage: person image string 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.
flyout-commands handleSignOut: función de cierre de sesión Plantilla usada para representar los comandos en el control desplegable
flyout-person-details personDetails: objeto person, personImage: cadena de imagen de persona Plantilla usada para representar los detalles de la persona en el control desplegable.

Permisos de Microsoft Graph

Este componente usa los siguientes permisos y API Graph Microsoft:

Configuración Permiso API
Es el valor predeterminado. User.Read /users/me/

Al usar el valor signed-in-button-content predeterminado y las flyout-person-details plantillas, este componente usa el componente Person para mostrar al usuario y hereda todos los permisos.

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 métodos protected render* para invalidar en extensiones de componentes.

Método Descripción
renderButton Representa el cromo del botón.
renderButtonContent Representa el contenido del botón.
renderSignedInButtonContent Representar el contenido del botón cuando el usuario ha iniciado sesión.
renderSignedOutButtonContent Representa el contenido del botón cuando el usuario no ha iniciado sesión.
renderFlyout Representa el cromo desplegable.
renderFlyoutContent Representa el contenido desplegable.
renderFlyoutPersonDetails Represente los detalles de la persona que se muestra en el menú desplegable.
renderFlyoutCommands Representar los comandos desplegables.

Traer su propio flyout

Es posible usar su propio componente de flyout en lugar del integrado, renderFlyout() reemplazando el método y proporcionando el nuevo flyout.

En este caso, asegúrese de que el componente de protected inicio de sesión siga funcionando como se esperaba al invalidar los métodos de visualización de control remoto para actualizar la visibilidad del control remoto alternativo.

Método Descripción
hideFlyout Descarta el flyout.
showFlyout Muestra el menú desplegable.
toggleFlyout Alterna el estado del control desplegable.