Componente de logon no Microsoft Graph Toolkit

  • Artigo

Um componente Logon é um botão e um controle de sobrevoo para facilitar plataforma de identidade da Microsoft autenticação. 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 é conectado, o controle exibe o nome de usuário, a imagem de perfil e o email conectados atualmente. Quando clicado, um flyout é aberto com um comando para sair.

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

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 fora da caixa. 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.

Atributo Propriedade Descrição
modo de exibição de logon Loginview Determina o estilo de exibição a ser aplicado ao usuário conectado. As opções são 'full', 'compact', 'avatar', defaults to 'full'
show-presence showPresence Determina se o indicador de presença do usuário atual no mgt-person controle é mostrado com um usuário autenticado. O padrão é false.
detalhes do usuário userDetails Permite definir os detalhes do objeto do usuário que o componente exibirá.

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 para null vai para o estado de saída assinado.

Propriedades personalizadas do CSS

O mgt-login componente define as seguintes propriedades personalizadas do 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, confira componentes de estilo.

Eventos

Os eventos a seguir são disparados do controle.

Evento Quando ele é emitido Dados personalizados Cancelável Bolhas Funciona com modelo personalizado
loginInitiated O usuário clicou no botão de entrada para iniciar o processo de logon Nenhum Sim Não Sim
loginCompleted O processo de logon foi bem-sucedido e o usuário agora está conectado Nenhum Não Não Sim
loginFailed O usuário cancelou o processo de logon ou não pôde entrar Nenhum Não Não Sim
logoutInitiated O usuário começou a fazer logon Nenhum Sim Não Sim
logoutCompleted O usuário saiu Nenhum Não Não Sim

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

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

Modelos

O mgt-login componente dá suporte a vários modelos que permitem substituir determinadas 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.

Tipo de dados Contexto de dados Descrição
signed-in-button-content personDetails: objeto person, personImage: cadeia de caracteres de imagem de pessoa O modelo usado para renderizar o conteúdo no botão quando o usuário está conectado.
signed-out-button-content null O modelo usado para renderizar o conteúdo no botão quando o usuário não está conectado.
comandos de flyout handleSignOut: função de saída O modelo usado para renderizar os comandos no flyout
flyout-person-details personDetails: objeto personImage: cadeia de caracteres de imagem de pessoa O modelo usado para renderizar os detalhes da pessoa no flyout.

Permissões do Microsoft Graph

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

Configuração Permissão API
Padrão. User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/me/
Padrão. User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All /users/me//photo/$value

Subcomponentes

O mgt-login componente consiste em um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, confira 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 Person para exibir o usuário e herda toda a configuração de cache dele.

Estender para obter mais controle

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

Método Descrição
renderButton Renderiza o botão cromado.
renderButtonContent Renderiza o conteúdo do botão.
renderSignedInButtonContent Renderize o conteúdo do botão quando o usuário estiver conectado.
renderSignedOutButtonContent Renderize o conteúdo do botão quando o usuário não estiver conectado.
renderFlyout Renderiza o cromado de flyout.
renderFlyoutContent Renderiza o conteúdo do flyout.
renderFlyoutPersonDetails Renderize os detalhes da pessoa de sobrevoo.
renderFlyoutCommands Renderize os comandos de flyout.

Traga seu próprio flyout

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

Nesse caso, verifique se o componente de logon continua funcionando conforme o esperado substituindo os protected métodos de exibição de flyout para atualizar a visibilidade do seu flyout alternativo.

Método Descrição
hideFlyout Descarta o sobrevoo.
showFlyout Exibe o flyout.
toggleFlyout Alterna o estado do flyout.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes, confira Localizando componentes.

Nome da cadeia de caracteres Valor padrão
signInLinkSubtitle Sign In
signOutLinkSubtitle Sign Out
signInWithADifferentAccount Sign in with a different account