Partilhar via

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

Aplica-se a: círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica aos locatários da força de trabalho. Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica a locatários externos. Inquilinos externos (saiba 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

  • Registre um novo aplicativo no centro de administração do Microsoft Entra, configurado para Contas somente neste diretório organizacional. Consulte Registar uma candidatura para obter mais detalhes. Registre os seguintes valores na página Visão geral do aplicativo para uso posterior:
    • ID da aplicação (cliente)
    • ID do diretório (inquilino)
  • Adicione os seguintes URIs de redirecionamento usando a configuração da plataforma Web . Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
    • Redirecionar URI: http://localhost:3000/auth/redirect
    • URL de término de sessão do canal frontal: https://localhost:5001/signout-callback-oidc
  • Adicione um segredo de cliente ao registro do seu aplicativo. Não use segredos de cliente em aplicativos de produção. Em vez disso, use certificados ou credenciais federadas. Para obter mais informações, consulte Adicionar credenciais ao seu aplicativo.

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.

  • Last updated on