Exercício – Entrar em seu aplicativo usando o componente de login do Kit de ferramentas do Microsoft Graph
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 registo da aplicação Microsoft Entra 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.
Adicionar código para entrar em seu aplicativo com o componente Logon
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 ao 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 do 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>
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 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.
Agora você implementou com êxito um mecanismo de autenticação para acessar Microsoft 365 dados.
Observação
Agradecemos o seu feedback sobre a sua experiência com a utilização do Proxy Dev para concluir este exercício. Dedique um momento para concluir este breve inquérito.