Tutorial: Configurar uma aplicação Web Node.js para autenticar utilizadores usando a plataforma de identidade da Microsoft

Aplica-se a: Locatários do Workforce Inquilinos externos (saber mais)

Neste tutorial, você aprenderá a criar um aplicativo Web Node/Express.js que conecta usuários em um aplicativo voltado para o cliente em um locatário externo ou funcionários em um locatário da força de trabalho. O tutorial também demonstra como adquirir um token de acesso para chamar a API do Microsoft Graph.

Este tutorial é a parte 1 de uma série de 3 partes.

Neste tutorial, irá aprender;

• Configurar um projeto Node.js
• Instalar dependências
• Adicionar vistas da aplicação e componentes UI

Pré-requisitos

• Se ainda não tiver feito isso, conclua as etapas em Guia de início rápido: iniciar sessão com utilizadores em uma aplicação Web de exemplo. No início rápido, você não precisa clonar e executar o exemplo de código.
• Node.js.
• Visual Studio Code ou outro editor de código.

Criar o projeto Node.js

1. Em um local à tua escolha no teu computador, cria uma pasta para hospedar a tua aplicação em Node.js, como ciam-sign-in-node-express-web-app.

2. No terminal, altere o diretório para a pasta do aplicativo Web Node, como cd ciam-sign-in-node-express-web-appe, em seguida, execute o seguinte comando para criar um novo projeto Node.js:

   npm init -y
   

   O comando init -y cria um arquivo de package.json padrão para seu projeto Node.js.

3. Crie pastas e arquivos adicionais para obter a seguinte estrutura de projeto:

       ciam-sign-in-node-express-web-app/
       ├── server.js
       └── app.js
       └── authConfig.js
       └── package.json
       └── .env
       └── auth/
           └── AuthProvider.js
       └── controller/
           └── authController.js
       └── routes/
           └── auth.js
           └── index.js
           └── users.js
       └── views/
           └── layouts.hbs
           └── error.hbs
           └── id.hbs
           └── index.hbs   
       └── public/stylesheets/
           └── style.css
   

Instalar dependências de aplicativos

Para instalar os pacotes npm necessários de identidade e relacionados a Node.js, execute o seguinte comando no seu terminal.

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node   

Criar componentes da interface do usuário do aplicativo

1. No editor de códigos, abra arquivo de views/index.hbs e adicione o seguinte código:

       <h1>{{title}}</h1>
       {{#if isAuthenticated }}
       <p>Hi {{username}}!</p>
       <a href="/users/id">View ID token claims</a>
       <br>
       <a href="/auth/signout">Sign out</a>
       {{else}}
       <p>Welcome to {{title}}</p>
       <a href="/auth/signin">Sign in</a>
       {{/if}}
   

   Nesta visualização, se o utilizador for autenticado, mostramos o seu nome de utilizador e links para visitar os pontos de extremidade /auth/signout e /users/id; caso contrário, o utilizador precisará visitar o ponto de extremidade /auth/signin para iniciar sessão. Definimos as rotas expressas para esses pontos de extremidade mais adiante neste artigo.

2. No editor de código, abra o ficheiro views/id.hbs e adicione o seguinte código:

       <h1>Azure AD for customers</h1>
       <h3>ID Token</h3>
       <table>
           <tbody>
               {{#each idTokenClaims}}
               <tr>
                   <td>{{@key}}</td>
                   <td>{{this}}</td>
               </tr>
               {{/each}}
           </tbody>
       </table>
       <a href="/">Go back</a>
   

   Usamos esta vista para mostrar as declarações do token de ID que o Microsoft Entra External ID retorna a esta aplicação depois que um utilizador inicia sessão com sucesso.

3. No editor de código, abra o ficheiro views/error.hbs e adicione o seguinte código:

       <h1>{{message}}</h1>
       <h2>{{error.status}}</h2>
       <pre>{{error.stack}}</pre>
   

   Utilizamos esta vista para apresentar quaisquer erros que ocorram quando a aplicação é executada.

4. No editor de código, abra o ficheiro views/layout.hbs e adicione o seguinte código:

       <!DOCTYPE html>
       <html>        
           <head>
               <title>{{title}}</title>
               <link rel='stylesheet' href='/stylesheets/style.css' />
           </head>            
           <body>
               {{{content}}}
           </body>        
       </html>
   

   O arquivo layout.hbs está no arquivo de layout. Ele contém o código HTML que precisamos em toda a visualização do aplicativo.

5. No editor de código, abra o arquivo public/stylesheets/style.csse adicione o seguinte código:

       body {
         padding: 50px;
         font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
       }
   
       a {
         color: #00B7FF;
       }
   

Próximo passo

Tutorial: Adicionar login na sua aplicação Web Node/Express.js.