Componente de logon no 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. Ele fornece dois estados:

• Quando o usuário não está conectado, o controle é um botão simples para iniciar o processo de entrada.
• Quando o usuário estiver conectado, o controle exibirá o nome de usuário conectado atual, a imagem de perfil e o email. Quando clicado, um submenu é aberto com um comando para sair.

Você também pode permitir a entrada com várias contas. Isso lista todas as suas contas conectadas e oferece a opção de entrar com outras contas novas.

Exemplo

O exemplo a seguir mostra o mgt-login componente com um usuário conectado.

Usando o controle sem um provedor de autenticação

O componente funciona com um provedor e o Microsoft Graph prontos para uso. No entanto, se você quiser fornecer sua própria lógica e autenticação, poderá usar a userDetails propriedade para definir os detalhes do usuário conectado.

O exemplo a seguir define os detalhes da pessoa.

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

A configuração userDetails de null vai para o estado de saída.

Propriedades personalizadas CSS

O mgt-login componente define as seguintes propriedades 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 saber mais, consulte Componentes de estilo.

Eventos

Os eventos a seguir são disparados do controle.

Use os eventos and logoutInitiated para lidar com a loginInitiated entrada e saída.

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

O mgt-login componente suporta vários modelos que permitem substituir certas partes do componente. 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.

Permissões do Microsoft Graph

Este componente usa as seguintes APIs do Microsoft Graph. Para cada uma das solicitações de API, uma das permissões listadas é necessária.

Subcomponentes

O mgt-login componente consiste em um ou mais subcomponentes que podem exigir outras permissões além das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente: mgt-person.

Autenticação

O controle de logon usa o provedor de autenticação global descrito na documentação de autenticação.

Cache

Esse componente usa o componente Pessoa para exibir o usuário e herda todas as configurações de cache dele.

Estenda para mais controle

Para cenários mais complexos ou uma experiência de usuário verdadeiramente personalizada, esse componente expõe vários protected render* métodos de substituição em extensões de componente.

Traga seu próprio submenu

É possível usar seu próprio componente de submenu no lugar do interno substituindo o renderFlyout() método e fornecendo o novo submenu.

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.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes, consulte Localização de componentes.