Componente de logon no Microsoft Graph Toolkit - Microsoft Graph

Artigo
11/07/2024

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.

HTML
React

Abra este exemplo no mgt.dev.

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.

É 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`

Compartilhar via