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

Esse início rápido usa um aplicativo Web Node.js de amostra para mostrar a você como fazer login nos 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

• Uma assinatura do Azure. Crie uma assinatura do Azure gratuitamente.
• Node.js
• Visual Studio Code ou outro editor de código

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.

   

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.

   

   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 só é exibido 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