Dados da organização: fazer login como um usuário e obter um token de acesso

Os usuários precisam se autenticar com a ID do Microsoft Entra para que o Microsoft Graph acesse os 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.

Neste exercício, você vai:

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

Usando o recurso de login

1. No exercício anterior, você criou um registro de aplicativo na ID do Microsoft Entra e iniciou o servidor de aplicativos e o servidor de API. Você também atualizou os seguintes valores no .env 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>
   

   Verifique se você concluiu o exercício anterior antes de continuar.

2. Volte para o navegador (http://localhost:4200), selecione Entrar no cabeçalho e entre usando uma conta de usuário administrador do seu locatário do Desenvolvedor do Microsoft 365.

   Dica

   Entre com sua conta de administrador de locatário de desenvolvedor do Microsoft 365. Você pode exibir outros usuários no locatário do desenvolvedor acessando o Centro de administração do Microsoft 365.

3. Se você estiver entrando no aplicativo pela primeira vez, será solicitado que você concorde com as permissões solicitadas pelo aplicativo. Você aprenderá mais sobre essas permissões (também chamadas de "escopos") na próxima seção à medida que explora o código. Selecione Aceitar para continuar.

4. Depois de fazer login, você verá o nome do usuário exibido no cabeçalho.

   

Explorando o código de login

Agora que você entrou, vamos examinar o código usado para conectar o usuário e recuperar um token de acesso e um perfil de usuário. Você aprenderá sobre o componente web de logon mgt que faz parte do Kit de Ferramentas do Microsoft Graph.

1. Abra o cliente/package.json e observe que os pacotes e os @microsoft/mgt pacotes @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 conectar usuários e recuperar e exibir dados organizacionais.

2. Abra o cliente/src/main.ts e observe as seguintes importações do @microsoft/mgt-components pacote. Os símbolos importados são usados para registrar os componentes do Microsoft Graph Toolkit usados no aplicativo.

   import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
   

3. Role até a parte inferior do arquivo e observe 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.

4. Para usar o componente mgt-login para conectar usuários, a ID do cliente do aplicativo Microsoft Entra ID (armazenada no arquivo .env como ENTRAID_CLIENT_ID) precisa ser referenciada e usada.

5. 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 da ID do Microsoft Entra do registro do aplicativo e o para o scopes qual o aplicativo solicitará acesso. Eles 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.

6. 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 habilita a entrada do usuário e fornece acesso a um token que é usado com o Microsoft Graph. Após a entrada bem-sucedida, o evento é disparado, o loginCompleted que chama a loginCompleted() função. Embora o mgt-login seja usado em 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 ambiente para confirmar se o aplicativo está configurado corretamente e pode ser autenticado na ID do ENTRAID_CLIENT_ID Microsoft Entra. O sinalizador é adicionado para acomodar casos em que os usuários optam por concluir apenas os exercícios de IA ou Comunicação dentro do tutorial, em vez de seguir toda a sequência de exercícios.

7. Abra header.component.ts e localize a loginCompleted função. Essa função é chamada quando o loginCompleted evento é emitido e manipula a recuperação do perfil do usuário conectado usando Providers.globalProvider.

   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 nesse caso, que é o componente raiz do aplicativo.

   Para saber mais sobre o componente mgt-login , visite a documentação do Kit de Ferramentas do Microsoft Graph .

8. Agora que você fez logon no aplicativo, vamos ver como os dados organizacionais podem ser recuperados.

Próxima Etapa