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 o Proxy de Programador

Para concluir este exercício, tem de instalar a versão mais recente do Dev Proxy. O Proxy de Programador é uma ferramenta que simula respostas de API. Permite-lhe criar e testar a sua aplicação sem precisar de um inquilino do Microsoft 365. Siga as instruções de introdução e verifique se o Proxy de Programador está em execução antes de continuar.

Observação

Quando utiliza o Proxy de Programador para concluir este exercício, a sua aplicação utiliza dados estáticos simulados. O código que escreve funciona com configurações de dados simulados e dinâmicos. Para utilizar dados dinâmicos de um inquilino do Microsoft 365, só precisa de criar um Microsoft Entra registo de aplicações e atualizar a referência do ID de cliente na sua aplicação.

Transferir predefinição do Proxy de Desenvolvimento

Para concluir este exercício, tem de transferir a predefinição de Proxy Dev para este módulo. O predefinição contém os dados fictícios e as respostas que utiliza para criar a sua aplicação. Para transferir a predefinição, execute o seguinte comando no terminal:

devproxy preset get learn-msgraph-toolkit-intro

Configurar a estrutura do aplicativo para seu aplicativo Web

Criar uma nova pasta para o projeto

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

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

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

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

Adicione uma pasta chamada .vscode na raiz da pasta do projeto.
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.

Antes de começar a adicionar código para utilizar o toolkit na sua aplicação Web, terá de configurar uma aplicação Microsoft Entra.

Irá utilizar os detalhes da aplicação Microsoft Entra para autenticar a sua aplicação através do fornecedor da Biblioteca de Autenticação da Microsoft (MSAL) v2.

Configurar uma aplicação Microsoft Entra

No browser, aceda à centro de administração do Microsoft Entra, inicie sessão e aceda a Microsoft Entra ID.
Selecione Registros de aplicativo no painel esquerdo e selecione Novo Registro.
Na tela Registrar um aplicativo, insira os seguintes valores:
- Nome: insira o nome do seu aplicativo.
- Tipos de conta suportados: selecione Contas em qualquer diretório organizacional (Qualquer diretório Microsoft Entra - Multi-inquilino) e contas Microsoft pessoais (por exemplo, Skype, Xbox).
- URI de redirecionamento (opcional): selecione Aplicativo de página única (SPA) e digite http://localhost:3000.
- Selecione Registrar.

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 a sua aplicação, inicialize o fornecedor MSAL v2 com f601c4cb-6902-4675-8415-7db28a4a332d o ID da aplicação. O Proxy de Programador irá simular o processo de autenticação para este registo de aplicações fictícias.

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

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

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 Programador

Comece por iniciar o Proxy de Programador. Num terminal, execute o seguinte comando:

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

Mantenha o terminal aberto e a executar o Proxy Dev enquanto testa a sua aplicação.

Iniciar a aplicação

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 Iniciar sessão, o Proxy de Programador simulará o processo de autenticação e a aplicação apresentará as informações de início de sessão 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.