Componente de logon no kit de ferramentas do Microsoft GraphLogin component in the Microsoft Graph Toolkit

Um componente de logon é um botão e um controle de submenu para facilitar a autenticação da plataforma de identidade da Microsoft.A Login component is a button and flyout control to facilitate Microsoft identity platform authentication. Ele fornece dois Estados:It provides two states:

  • Quando o usuário não está conectado, o controle é um botão simples para iniciar o processo de entrada.When user is not signed in, the control is a simple button to initiate the sign in process.
  • Quando o usuário está conectado, o controle exibe o nome de usuário conectado atual, a imagem de perfil e o email.When user is signed in, the control displays the current signed in user name, profile image, and email. Quando clicado, um submenu é aberto com um comando para sair.When clicked, a flyout is opened with a command to sign out.

ExemploExample

O exemplo a seguir mostra o mgt-login componente com um usuário conectado.The following example shows the mgt-login component with a signed-in user.

Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev

Usando o controle sem um provedor de autenticaçãoUsing the control without an authentication provider

O componente funciona com um provedor e o Microsoft Graph.The component works with a provider and Microsoft Graph out of the box. No entanto, se você quiser fornecer sua própria lógica e autenticação, você pode usar a userDetails propriedade para definir os detalhes do usuário conectado.However, if you want to provide your own logic and authentication, you can use the userDetails property to set the signed in user's details.

AtributoAttribute PropriedadeProperty DescriçãoDescription
User-detalhesuser-details userdetailsuserDetails Defina o objeto de usuário que será exibido no controle.Set the user object that will be displayed on the control.

O exemplo a seguir define os detalhes da pessoa.The following example sets the person details.

let loginControl = document.getElementById('myLoginControl');
loginControl.userDetails = {
    displayName: 'Nikola Metulev',
    mail: 'nikola@contoso.com',
    personImage: 'url'
}

userDetailsA configuração para vai null para o estado de desconectar.Setting userDetails to null will go to the signed out state.

Use os loginInitiated logoutInitiated eventos e para lidar com a entrada e a saída.Use the loginInitiated and logoutInitiated events to handle signing in and out.

Propriedades personalizadas de CSSCSS custom properties

O mgt-login componente define as seguintes propriedades personalizadas de CSS.The mgt-login component defines the following CSS custom properties.

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

Para saber mais, confira estilos de componentes.To learn more, see styling components.

EventosEvents

Os eventos a seguir são acionados do controle.The following events are fired from the control.

EventoEvent DescriçãoDescription
loginInitiated O usuário clicou no botão entrar para iniciar o processo de logon-cancelable.The user clicked the sign in button to start the login process - cancelable.
loginCompleted o processo de login foi bem-sucedido e o usuário está conectado.the login process was successful and the user is now signed in.
loginFailed O usuário cancelou o processo de logon ou não pôde entrar.The user canceled the login process or was unable to sign in.
logoutInitiated O usuário iniciou o logout-cancelamento.The user started to logout - cancelable.
logoutCompleted O usuário saiu.The user signed out.

ModelosTemplates

O mgt-login componente oferece suporte a vários modelos que permitem substituir determinadas partes do componente.The mgt-login component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos valores listados na tabela a seguir.To specify a template, include a <template> element inside of a component and set the data-type value to one of the values listed in the following table.

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
conectado ao botão de conteúdosigned-in-button-content personDetails: objeto Person, personImage : cadeia de caracteres de imagem de pessoapersonDetails: person object, personImage: person image string O modelo usado para renderizar o conteúdo no botão quando o usuário está conectado.The template used to render the content in the button when the user is signed in.
desconectado-botão-conteúdosigned-out-button-content nullnull O modelo usado para renderizar o conteúdo no botão quando o usuário não está conectado.The template used to render the content in the button when the user is not signed in.
submenu-comandosflyout-commands handleSignOut: função de saídahandleSignOut: sign out function O modelo usado para renderizar os comandos no submenuThe template used to render the commands in the flyout
submenu de pessoas-detalhesflyout-person-details personDetails: objeto Person, personImage: cadeia de caracteres de imagem de pessoapersonDetails: person object, personImage: person image string O modelo usado para renderizar os detalhes da pessoa no submenu.The template used to render the person details in the flyout.

Permissões do Microsoft GraphMicrosoft Graph permissions

Este componente usa o componente Person para exibir o usuário e herda todas as permissões.This component uses the Person component to display the user and inherits all permissions.

AutenticaçãoAuthentication

O controle de logon usa o provedor de autenticação global descrito na documentação de autenticação.The login control uses the global authentication provider described in the authentication documentation.

Estender para mais controleExtend for more control

Para cenários mais complexos ou uma UX verdadeiramente personalizada, esse componente expõe vários protected render* métodos para substituir em extensões de componente.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MétodoMethod DescriçãoDescription
renderButtonrenderButton Renderiza o cromo do botão.Renders the button chrome.
renderButtonContentrenderButtonContent Renderiza o conteúdo do botão.Renders the button content.
renderSignedInButtonContentrenderSignedInButtonContent Processe o conteúdo do botão quando o usuário estiver conectado.Render the button content when the user is signed in.
renderSignedOutButtonContentrenderSignedOutButtonContent Renderiza o conteúdo do botão quando o usuário não está conectado.Render the button content when the user is not signed in.
renderFlyoutrenderFlyout Renderiza o cromo domenu.Renders the flyout chrome.
renderFlyoutContentrenderFlyoutContent Renderiza o conteúdo do submenu.Renders the flyout content.
renderFlyoutPersonDetailsrenderFlyoutPersonDetails Renderizar os detalhes da pessoa de submenu.Render the flyout person details.
renderFlyoutCommandsrenderFlyoutCommands Renderizar os comandos de submenu.Render the flyout commands.

Traga seu próprio submenuBring your own flyout

É possível usar seu próprio componente de submenu no lugar do interno, substituindo o renderFlyout() método e fornecendo o novo submenu.It is possible to use your own flyout component in place of the built-in one, by overriding the renderFlyout() method and providing the new flyout.

Nesse caso, verifique se o componente de login continua funcionando conforme o esperado, substituindo os protected métodos de exibição de submenu para atualizar a visibilidade do submenu alternativo.In this case, ensure the login component continues to work as expected by overriding the protected flyout display methods to update the visibility of your alternative flyout.

MétodoMethod DescriçãoDescription
hideFlyouthideFlyout Descarta o submenu.Dismisses the flyout.
Menu de atalhoshowFlyout Exibe o submenu.Displays the flyout.
toggleFlyouttoggleFlyout Alterna o estado do submenu.Toggles the state of the flyout.