다음을 통해 공유

자습서: 사용자 로그인을 위한 Node.js 웹 애플리케이션 만들기

  • 아티클

이 자습서는 Node.js 웹앱을 빌드하고 Microsoft Entra 관리 센터를 사용하여 인증을 준비하는 방법을 설명하는 시리즈의 2부입니다. 이 시리즈의 1부에서는 외부 테넌트에 애플리케이션을 등록하고 사용자 흐름을 구성했습니다. 이 자습서에서는 Node.js(Express) 프로젝트를 만들고 필요한 모든 폴더와 파일을 구성합니다. 여기에서 준비한 애플리케이션에 대한 로그인을 사용하도록 설정합니다. 이 Node.js(Express) 웹 애플리케이션의 보기는 핸들바를 사용합니다.

이 자습서에서는 다음을 수행합니다.

  • Node.js 프로젝트 만들기
  • 종속성 설치
  • 앱 보기 및 UI 구성 요소 추가

필수 조건

Node.js 프로젝트 만들기

  1. 컴퓨터에서 원하는 위치에 노드 애플리케이션을 호스팅할 폴더(예: ciam-sign-in-node-express-web-app)를 만듭니다.

  2. 터미널에서 디렉터리를 cd ciam-sign-in-node-express-web-app와 같은 Node 웹앱 폴더로 변경한 후 다음 명령을 실행하여 새 Node.js 프로젝트를 만듭니다.

    npm init -y

    init -y 명령은 Node.js 프로젝트에 대한 기본 package.json 파일을 만듭니다.

  3. 다음 프로젝트 구조를 구현하려면 추가 폴더와 파일을 만듭니다.

        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

앱 종속성 업그레이드

필수 ID 및 Node.js 관련 npm 패키지를 설치하려면 터미널에서 다음 명령을 실행합니다.

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

앱 UI 구성 요소 빌드

  1. 코드 편집기에서 views/index.hbs 파일을 열고 다음 코드를 추가합니다.

        <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}}

    이 보기에서 사용자가 인증되면 해당 사용자 이름과 방문 /auth/signout 및 /users/id 엔드포인트 링크가 표시됩니다. 그렇지 않으면 사용자가 /auth/signin 엔드포인트를 방문하여 로그인해야 합니다. 이 문서의 뒷부분에서 이러한 엔드포인트에 대한 Express Route를 정의합니다.

  2. 코드 편집기에서 views/id.hbs 파일을 열고 다음 코드를 추가합니다.

        <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>

    이 보기를 사용하여 사용자가 성공적으로 로그인한 후 Microsoft Entra 외부 ID가 이 앱에 반환하는 ID 토큰 클레임을 표시합니다.

  3. 코드 편집기에서 views/error.hbs 파일을 열고 다음 코드를 추가합니다.

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

    이 보기를 사용하여 앱이 실행될 때 발생하는 오류를 표시합니다.

  4. 코드 편집기에서 views/layout.hbs 파일을 열고 다음 코드를 추가합니다.

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

    layout.hbs 파일은 레이아웃 파일에 있습니다. 여기에는 애플리케이션 보기 전체에 필요한 HTML 코드가 포함되어 있습니다.

  5. 코드 편집기에서 public/stylesheets/style.css 파일을 열고 다음 코드를 추가합니다.

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

    a {
      color: #00B7FF;
    }

다음 단계

3부: Node.js 웹 애플리케이션에 로그인 및 로그아웃 추가