Início Rápido: Conectar usuários e chamar a API do Microsoft Graph de um aplicativo Web Node.js

  • Artigo

Este guia de início rápido usa um exemplo Node.js aplicativo Web para mostrar como conectar usuários usando o fluxo de código de autorização e chamar a API do Microsoft Graph. O exemplo usa o nó MSAL para lidar com a autenticação.

Pré-requisitos

Registrar o aplicativo e os identificadores de registro

Para concluir o registro, forneça um nome ao aplicativo e especifique os tipos de conta com suporte. Depois de registrada, o painel Visão geral do aplicativo exibirá os identificadores necessários no código-fonte do aplicativo.

  1. Entre no Centro de administração do Microsoft Entra.

  2. Se você tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para o locatário no qual deseja registrar o aplicativo no menu Diretórios + assinaturas.

  3. Navegue até Identidade>Aplicativos>Registros de aplicativo e selecione Novo registro.

  4. Insira um Nome para o aplicativo, como identity-client-web-app.

  5. Para Tipos de contas com suporte, selecione Contas somente neste diretório organizacional. Para obter informações sobre diferentes tipos de conta, selecione a opção Ajudar-me a escolher.

  6. Selecione Registrar.

    Captura de tela mostrando como inserir um nome e selecionar o tipo de conta no centro de administração do Microsoft Entra.

  7. O painel Visão geral do aplicativo é exibido quando o registro for concluído. Registre a ID do Diretório (locatário) e a ID do aplicativo (cliente) a ser usada no código-fonte do aplicativo.

    Captura de tela mostrando os valores do identificador na página de visão geral no centro de administração do Microsoft Entra.

    Observação

    Os Tipos de conta com suporte podem ser alterados referindo-se a Modificar as contas suportadas por um aplicativo.

Adicionar um URI de redirecionamento de plataforma e criar um segredo do cliente

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

  1. Em Gerenciar, selecione Autenticação.
  2. Na página de Configurações da plataforma, selecione Adicionar uma plataforma e, em seguida, selecione a opção Web.
  3. Para o Redirecionamento de URIs, insira http://localhost:3000/auth/redirect.
  4. Em URL de logoff de front-channel, insira https://localhost:5001/signout-callback-oidc para sair do serviço.
  5. Selecione Configurar para salvar as alterações.
  6. Em Gerenciar, selecione Certificados e segredos>Segredos do cliente>Novo segredo do cliente. Escolha uma descrição e selecione Adicionar.
  7. Anote o valor do Segredo do cliente para uso posterior. Esse valor é exibido apenas uma vez.

Clone ou baixe o aplicativo de exemplo

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

  • Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

    git clone https://github.com/Azure-Samples/ms-identity-node.git

  • Baixar o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome seja menor que 260 caracteres.

Configurar o projeto

Extraia o projeto, abra a pasta ms-identity-node-main e abra o arquivo .env na pasta App. Substitua os valores acima da seguinte forma:

Variável Descrição Exemplo(s)
Enter_the_Cloud_Instance_Id_Here A instância de nuvem do Azure na qual seu aplicativo está registrado https://login.microsoftonline.com/ (inclua a barra de avanço à direita)
Enter_the_Tenant_Info_here ID do locatário ou domínio primário contoso.microsoft.com ou aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here ID do cliente do aplicativo que você registrou 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here Segredo do cliente do aplicativo que você registrou A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here A instância de nuvem da API do Microsoft Graph que seu aplicativo chamará https://graph.microsoft.com/ (inclua a barra de avanço à direita)
Enter_the_Express_Session_Secret_Here Uma cadeia aleatória de caracteres usada para assinar o Cookie de sessão Expresso A1b-C2d_E3f.H4...

Seu arquivo deve ser semelhante ao abaixo:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Agora execute o aplicativo e entre

Execute o projeto usando o Node.js.

  1. Para iniciar o servidor, execute os seguintes comandos no diretório do projeto:

    cd App
npm install
npm start

  2. Ir para http://localhost:3000/.

  3. Selecione Entrar para iniciar o processo de entrada.

    Na primeira vez que você entrar, você será solicitado a fornecer seu consentimento para permitir que o aplicativo faça login e acesse seu perfil. Depois de entrar com êxito, você será redirecionado de volta para a página inicial do aplicativo.

Mais informações

Como o exemplo funciona

O exemplo hospeda um servidor Web no localhost, porta 3000. Quando um navegador da web acessa esse endereço, o aplicativo renderiza a página inicial. Depois que o usuário seleciona Entrar, o aplicativo redireciona o navegador para a tela de entrada do Microsoft Entra, por meio da URL gerada pela biblioteca MSAL Node. Após o consentimento do usuário, o navegador redireciona o usuário de volta para a página inicial do aplicativo, juntamente com um ID e um token de acesso.

Nó MSAL

A biblioteca de nó MSAL conecta usuários e solicita os tokens que são usados para acessar uma API protegida pela plataforma de identidade da Microsoft. Você pode baixar a versão mais recente usando o npm (Gerenciador de Pacotes do Node.js):

npm install @azure/msal-node

Próxima etapa

Saiba mais sobre a compilação de um aplicativo Web ASP.NET Core que conecta usuários na seguinte série de tutoriais de várias partes:

Tutorial: Aplicativo Web que conecta os usuários