Compartilhar via

Tutorial: Configurar um aplicativo Web Node.js para conectar usuários usando a plataforma de identidade da Microsoft

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

Neste tutorial, você aprenderá a criar um aplicativo Web node/Express.js que insere 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, você irá;

  • Configurar um projeto de Node.js
  • Instalar dependências
  • Adicionar exibições de aplicativo e componentes da interface do usuário

Pré-requisitos

  • Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
    • ID do aplicativo (cliente)
    • ID do diretório (locatário)
  • Adicione as 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.
    • URI de redirecionamento: http://localhost:3000/auth/redirect
    • URL de logoff do canal frontal: https://localhost:5001/signout-callback-oidc
  • Adicione um segredo do cliente ao registro do aplicativo. Não use segredos do 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 de escolha no 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, em seguida, execute o seguinte comando para criar um novo projeto de Node.js:

    npm init -y

    O init -y comando cria um arquivo depackage.json padrão para seu projeto de 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 aplicativo

Para instalar a identidade necessária e Node.js pacotes npm relacionados, execute o comando a seguir em seu terminal

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

Compilar componentes da interface do usuário do aplicativo

  1. No editor de código, 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}}

    Nesse modo de exibiçã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 posteriormente neste artigo.

  2. No editor de código, 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 para este aplicativo depois que um usuário entra com êxito.

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

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

    Usamos essa exibição para exibir os erros que ocorrem quando o aplicativo é executado.

  4. No editor de código, 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 exigimos em toda a exibição do aplicativo.

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

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

    a {
      color: #00B7FF;
    }

Próxima etapa

Tutorial: Adicionar entrada em seu aplicativo Web Node/Express.js.

  • Last updated on