Dados organizacionais: Iniciar sessão de um utilizador e obter um token de acesso

2025-06-13

Os usuários precisam se autenticar com o ID do Microsoft Entra para que o Microsoft Graph acesse dados organizacionais. Neste exercício, você verá como o componente do mgt-login Microsoft Graph Toolkit pode ser usado para autenticar usuários e recuperar um token de acesso. O token de acesso pode ser usado para fazer chamadas para o Microsoft Graph.

Observação

Se você é novo no Microsoft Graph, pode saber mais sobre ele no caminho de aprendizado do Microsoft Graph Fundamentals .

Neste exercício, você irá:

Saiba como associar um aplicativo Microsoft Entra ID ao Microsoft Graph Toolkit para autenticar usuários e recuperar dados organizacionais.
Saiba mais sobre a importância dos escopos.
Saiba como o componente mgt-login do Microsoft Graph Toolkit pode ser usado para autenticar usuários e recuperar um token de acesso.

No exercício anterior, você criou um registro de aplicativo no Microsoft Entra ID e iniciou o servidor de aplicativos e o servidor de API. Você também atualizou os .env seguintes valores no arquivo (TEAM_ID e CHANNEL_ID são opcionais):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Certifique-se de ter concluído o exercício anterior antes de continuar.
Volte para o navegador (http://localhost:4200), selecione Entrar no cabeçalho e entre usando uma conta de usuário administrador do locatário do Microsoft 365 Developer.

Sugestão

Entre com sua conta de administrador de locatário de desenvolvedor do Microsoft 365. Pode ver outros utilizadores no seu inquilino de programador acedendo ao Centro de administração do Microsoft 365.
Se estiver a iniciar sessão na aplicação pela primeira vez, ser-lhe-á pedido que autorize as permissões solicitadas pela aplicação. Você aprenderá mais sobre essas permissões (também chamadas de "escopos") na próxima seção enquanto explora o código. Selecione Aceitar para continuar.
Depois de entrar, você verá o nome do usuário exibido no cabeçalho.

Agora que você entrou, vamos examinar o código usado para entrar no usuário e recuperar um token de acesso e um perfil de usuário. Você aprenderá sobre o componente da Web mgt-login que faz parte do Microsoft Graph Toolkit.

Sugestão

Se você estiver usando o Visual Studio Code, poderá abrir arquivos diretamente selecionando:

Windows/Linux: Ctrl + P
Mac: Cmd + P

Em seguida, digite o nome do arquivo que deseja abrir.

Abra o cliente/package.json e observe que os @microsoft/mgt pacotes e @microsoft/mgt-components estão incluídos nas dependências. O @microsoft/mgt pacote contém recursos do provedor MSAL (Biblioteca de Autenticação da Microsoft) e componentes da Web, como mgt-login e outros, que podem ser usados para entrar em usuários e recuperar e exibir dados organizacionais.
Abra client/src/main.ts e observe as @microsoft/mgt-components seguintes importações do pacote. Os símbolos importados são usados para registrar os componentes do Microsoft Graph Toolkit que são usados no aplicativo.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Desloque-se para a parte inferior do ficheiro e anote o seguinte código:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Esse código registra os mgt-logincomponentes , mgt-search-resultse mgt-person Web e os habilita para uso no aplicativo.
Para usar o componente mgt-login para entrar usuários, a ID do cliente do aplicativo Microsoft Entra ID (armazenada no arquivo .env como ENTRAID_CLIENT_ID) precisa ser referenciada e usada.
Abra graph.service.ts e localize a init() função. O caminho completo para o arquivo é client/src/app/core/graph.service.ts. Você verá a seguinte importação e código:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Esse código cria um novo Msal2Provider objeto, passando a ID do cliente Microsoft Entra ID do seu registro de aplicativo e para o scopes qual o aplicativo solicitará acesso. Os scopes são usados para solicitar acesso aos recursos do Microsoft Graph que o aplicativo acessará. Depois que o Msal2Provider objeto é criado, ele é atribuído ao Providers.globalProvider objeto, que é usado pelos componentes do Microsoft Graph Toolkit para recuperar dados do Microsoft Graph.
Abra header.component.html no editor e localize o componente mgt-login . O caminho completo para o arquivo é client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
O componente mgt-login permite o login do usuário e fornece acesso a um token que é usado com o Microsoft Graph. Após o login bem-sucedido, o evento é acionado, o loginCompleted que chama a loginCompleted() função. Embora mgt-login seja usado dentro de um componente Angular neste exemplo, ele é compatível com qualquer aplicativo Web.

A exibição do componente mgt-login depende do featureFlags.microsoft365Enabled valor que está sendo definido como true. Esse sinalizador personalizado verifica a presença da variável de ENTRAID_CLIENT_ID ambiente para confirmar se o aplicativo está configurado corretamente e pode se autenticar no Microsoft Entra ID. A bandeira é adicionada para acomodar casos em que os usuários optam por completar apenas os exercícios de IA ou Comunicação dentro do tutorial, em vez de seguir toda a sequência de exercícios.
Abra header.component.ts e localize a loginCompleted função. Essa função é chamada quando o loginCompleted evento é emitido e lida com a recuperação do perfil do usuário conectado usando Providers.globalProvidero .
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
Neste exemplo, uma chamada está sendo feita para a API do Microsoft Graph me para recuperar o perfil do usuário (me representa o usuário conectado atual). A this.userLoggedIn.emit(me) instrução de código emite um evento do componente para passar os dados de perfil para o componente pai. O componente pai é app.component.ts arquivo neste caso, que é o componente raiz do aplicativo.

Para saber mais sobre o componente mgt-login , visite a documentação do Microsoft Graph Toolkit .
Agora que você fez login no aplicativo, vamos ver como os dados organizacionais podem ser recuperados.

Próximo Passo

Dados organizacionais: recuperando arquivos, bate-papos e enviando mensagens para equipes

Partilhar via

Dados organizacionais: Iniciar sessão de um utilizador e obter um token de acesso

Utilizar a funcionalidade de início de sessão

Explorando o código de login

Próximo Passo

Comentários

Recursos adicionais