Partilhar via

Tutorial: Criar um aplicativo Web Node.js para entrar em usuários

  • Artigo

Este tutorial é a parte 2 de uma série que demonstra a criação de um aplicativo Web Node.js e prepará-lo para autenticação usando o centro de administração do Microsoft Entra. Na parte 1 desta série, você registrou um aplicativo e configurou fluxos de usuário em seu locatário externo. Neste tutorial, você cria um projeto Node.js(Express) e organiza todas as pastas e arquivos necessários. Você habilita o login no aplicativo que você prepara aqui. As visualizações do aplicativo Web Node.js(Express) usam guiador.

Neste tutorial você vai;

  • Criar um projeto de Node.js
  • Instalar dependências
  • Adicionar vistas da aplicação e componentes da IU

Pré-requisitos

Criar o projeto Node.js

  1. Em um local de escolha em seu computador, crie uma pasta para hospedar seu aplicativo de nó, 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-app, e execute o seguinte comando para criar um novo projeto Node.js:

    npm init -y

    O init -y comando 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 a identidade necessária e Node.js pacotes npm relacionados, 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 o arquivo 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}}

    Nessa visualização, se o usuário for autenticado, mostraremos seu nome de usuário e links para visitar /auth/signout e /users/id pontos de extremidade, caso contrário, o usuário precisará visitar o /auth/signin ponto de extremidade para entrar. Definimos as rotas expressas para esses pontos de extremidade mais adiante neste artigo.

  2. No editor de códigos, abra o arquivo 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 essa exibição para exibir declarações de token de ID que a ID Externa do Microsoft Entra retorna a este aplicativo depois que um usuário entra com êxito.

  3. No editor de códigos, abra o arquivo 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ódigos, abra o arquivo 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 layout.hbs arquivo 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ódigos, abra o arquivo public/stylesheets/style.css e adicione o seguinte código:

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

Próximo passo

Parte 3: Adicionar adicionar entrada e sair em seu aplicativo Web Node.js