Componente de início de sessão no Microsoft Graph Toolkit

Um componente de Início de Sessão é um botão e um controlo de lista de opções para facilitar plataforma de identidade da Microsoft autenticação. Fornece dois estados:

• Quando o utilizador não tem sessão iniciada, o controlo é um botão simples para iniciar o processo de início de sessão.
• Quando o utilizador tem sessão iniciada, o controlo apresenta o nome de utilizador, a imagem de perfil e o e-mail com sessão iniciada atual. Quando clicado, é aberta uma lista de opções com um comando para terminar sessão.

Também pode permitir o início de sessão com várias contas. Esta ação lista todas as suas contas com sessão iniciada e dá-lhe uma opção para iniciar sessão com outras contas novas.

Exemplo

O exemplo seguinte mostra o mgt-login componente com um utilizador com sessão iniciada.

Utilizar o controlo sem um fornecedor de autenticação

O componente funciona com um fornecedor e o Microsoft Graph fora da caixa. No entanto, se quiser fornecer a sua própria lógica e autenticação, pode utilizar a userDetails propriedade para definir os detalhes do utilizador com sessão iniciada.

O exemplo seguinte 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 definição userDetails para null passa para o estado de sessão terminada.

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, veja Componentes de estilo.

Eventos

Os seguintes eventos são acionados a partir do controlo.

Utilize os loginInitiated eventos e logoutInitiated para processar o início e a saída.

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

O mgt-login componente suporta vários modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor para um dos valores listados na tabela seguinte.

Permissões do Microsoft Graph

Este componente utiliza as seguintes APIs do Microsoft Graph. Para cada um dos pedidos de API, é necessária uma das permissões listadas.

Subcomponentes

O mgt-login componente é composto por um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, consulte a documentação para cada subcomponente: mgt-person.

Autenticação

O controlo de início de sessão utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

Este componente utiliza o componente Pessoa para apresentar o utilizador e herda toda a configuração da cache do mesmo.

Expandir para obter mais controlo

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

Traga a sua própria lista de opções

É possível utilizar o seu próprio componente de lista de opções em vez do incorporado, substituindo o renderFlyout() método e fornecendo a nova lista de opções.

Neste caso, certifique-se de que o componente de início de sessão continua a funcionar conforme esperado ao substituir os protected métodos de apresentação de lista de opções para atualizar a visibilidade da sua lista de opções alternativa.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes, veja Localizar componentes.