Exercício – Entrar em seu aplicativo usando o componente de login do Kit de ferramentas do Microsoft Graph

  • 12 minutos

Nesta unidade, você criará um aplicativo Web e explorará um projeto inicial. Em seguida, você usará o componente logon do kit de ferramentas para entrar em seu aplicativo e acessar Microsoft Graph funcionalidade.

Instalar Proxy de Desenvolvimento

Para concluir este exercício, você precisa instalar a versão mais recente do Dev Proxy. O Dev Proxy é uma ferramenta que simula respostas de API. Ele permite que você crie e teste seu aplicativo sem precisar de um locatário do Microsoft 365. Siga as instruções de introdução e verifique se o Proxy de Desenvolvimento está em execução antes de continuar.

Observação

Quando você usa o Dev Proxy para concluir este exercício, seu aplicativo usa dados estáticos e simulados. O código que você escreve funciona com configurações de dados simulados e ao vivo. Para usar dados dinâmicos de um locatário do Microsoft 365, você só precisa criar um registro do aplicativo Microsoft Entra e atualizar a referência de ID do cliente em seu aplicativo.

Baixar a predefinição de Proxy de Desenvolvimento

Para concluir este exercício, você precisa baixar a predefinição do Proxy do Desenvolvedor para este módulo. A predefinição contém os dados simulados e as respostas que você usa para criar seu aplicativo. Para baixar a predefinição, execute o seguinte comando em seu terminal:

devproxy preset get learn-msgraph-toolkit-intro

Configurar a estrutura do aplicativo para seu aplicativo Web

Criar uma nova pasta para o projeto

  1. Abra o Visual Studio Code. Selecione Arquivo>Abrir Pasta no menu de comando.
  2. Quando você está abrindo uma pasta, o sistema operacional fornece um botão para criar um nova pasta.
  3. Vá para o local onde você deseja criar a nova pasta e selecione Nova Pasta. Nomeie a pasta mgt-app.
  4. Abra a pasta mgt-app no Visual Studio Code.

Criar arquivos e pastas na pasta do projeto

Seu aplicativo Web terá um arquivo HTML e uma pasta para as configurações do Live Server. O Live Server é uma extensão Visual Studio Code aplicativo. Vamos criar a estrutura do projeto.

  1. Selecione arquivo>novo arquivo.

  2. Nomeie o arquivo index.htmle salve o arquivo usando CTRL+S (Windows) ou COMMAND+S (macOS).

  3. Adicione o html a seguir index.htmle salve o arquivo.

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

  4. Adicione uma pasta chamada .vscode na raiz da pasta do projeto.

  5. Adicione um arquivo chamado settings.json na pasta .vscode. Copie e cole o código a seguir no settings.jsone salve o arquivo.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Essas configurações garantem o teste suave do aplicativo localmente, quando você estiver usando o Live Server.

Adicionar código para entrar em seu aplicativo com o componente Logon

Antes de começar a adicionar código para usar o kit de ferramentas em seu aplicativo Web, você precisará configurar um aplicativo Microsoft Entra.

Você usará os detalhes do aplicativo Microsoft Entra para autenticar seu aplicativo usando o provedor MSAL (Biblioteca de Autenticação da Microsoft) v2.

Configurar um aplicativo do Microsoft Entra

  1. No navegador, vá para o centro de administração do Microsoft Entra, entre e vá para o Microsoft Entra ID.

  2. Selecione Registros de aplicativo no painel esquerdo e selecione Novo Registro.

    Captura de tela que mostra a seleção de Novo registro para criar um novo registro de aplicativo.

  3. Na tela Registrar um aplicativo, insira os seguintes valores:

    • Nome: insira o nome do seu aplicativo.
    • Tipos de conta com suporte: selecione Contas em qualquer diretório organizacional (qualquer diretório do Microsoft Entra - Multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox).
    • URI de redirecionamento (opcional): selecione Aplicativo de página única (SPA) e digite http://localhost:3000.
    • Selecione Registrar.

    Captura de tela que mostra o registro do seu aplicativo no Microsoft Entra ID.

Agora que você configurou o aplicativo com êxito, vamos adicionar algum código!

Adicionar o Microsoft Graph Toolkit ao seu projeto

Anteriormente, você aprendeu que pode referenciar o kit de ferramentas diretamente da rede de distribuição de conteúdo. Para fazer isso, adicione o seguinte snippet de código logo antes da tag </head> no seu arquivo index.html.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Inicializar o provedor MSAL v2

Para autenticar seu aplicativo, inicialize o provedor da MSAL v2 usando a ID do Application(client) que você salvou na seção anterior.

Adicione o snippet a seguir ao <body> do arquivo index.html.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Substitua YOUR-CLIENT-ID pela ID aplicativo (cliente) que você salvou na seção anterior.

Para autenticar seu aplicativo, inicialize o provedor MSAL v2 usando f601c4cb-6902-4675-8415-7db28a4a332d como ID do aplicativo. O Proxy de Desenvolvimento simulará o processo de autenticação para esse registro de aplicativo simulado.

Adicione o snippet a seguir ao <body> do arquivo index.html.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Adicionar o componente logon ao seu aplicativo Web

Para adicionar o componente Logon, adicione o seguinte elemento no corpo do arquivo index.html.

<mgt-login></mgt-login>

Depois de todas as alterações, arquivo index.html deverá ser semelhante ao seguinte:

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Salve o arquivo e vamos testar os resultados!

Testar seu aplicativo em um navegador

Iniciar Proxy de Desenvolvimento

Comece iniciando o Proxy de Desenvolvimento. Em um terminal, execute o seguinte comando:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Mantenha o terminal aberto e executando o Dev Proxy enquanto você testa seu aplicativo.

Iniciar o aplicativo

Para testar seu aplicativo em um navegador, você precisa ter instalado o Visual Studio Code Live Server.

Para executar seu aplicativo no Live Server, pressione a seguinte combinação de teclas no Visual Studio Code e pesquise o Live Server:

  • Windows: CTRL+SHIFT+P
  • macOS: COMMAND+SHIFT+P

Abrir com Live Server, selecione a opção e pressione Enter.

Depois que o Live Server estiver em execução, ele poderá abrir a página http://localhost:3000/index.html. Abrir http://localhost:3000 no navegador.

Selecione Entrar, o Dev Proxy simulará o processo de autenticação e o aplicativo exibirá as informações de entrada simuladas.

Selecione Entrare insira sua conta de locatário Microsoft 365 desenvolvedor. Você será solicitado a consentir com as permissões necessárias pela primeira vez. Depois que você consentir, o aplicativo exibirá suas informações de entrada.

Captura de tela que mostra os resultados finais do aplicativo após a entrada do usuário.

Agora você implementou com êxito um mecanismo de autenticação para acessar Microsoft 365 dados.

Observação

Agradecemos sua experiência com o uso do Proxy de Desenvolvimento para concluir este exercício. Reserve um momento para concluir esta breve pesquisa.