다음을 통해 공유

자습서: Microsoft ID 플랫폼을 사용하여 사용자를 로그인하도록 Node.js 웹앱 설정

적용 대상: 이 내용은 워크포스 테넌트에 적용됩니다. 흰색 체크 표시가 있는 녹색 원으로 표시됩니다.이 내용은 외부 테넌트에 적용됩니다. 흰색 체크 표시가 있는 녹색 원으로 표시됩니다. 외부 테넌트(자세한 정보)

이 자습서에서는 외부 테넌트 또는 직원 테넌트에 있는 직원의 고객 연결 앱에 사용자를 로그인하는 노드/Express.js 웹앱을 빌드하는 방법을 알아봅니다. 이 자습서에서는 Microsoft Graph API를 호출하기 위한 액세스 토큰을 획득하는 방법도 보여 줍니다.

이 자습서는 3부로 구성된 시리즈의 1부입니다.

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

  • Node.js 프로젝트 설정
  • 종속성 설치
  • 앱 뷰 및 UI 구성 요소 추가

필수 조건

Node.js 프로젝트 만들기

  1. 컴퓨터에서 선택한 위치에 ciam-sign-in-node-express-web-app과 같은 노드 애플리케이션을 호스트할 폴더를 만듭니다.

  2. 터미널에서 디렉터리를 노드 웹앱 폴더로 cd ciam-sign-in-node-express-web-app변경한 다음, 다음 명령을 실행하여 새 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

앱 종속성 설치

필요한 identity 및 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 엔드포인트를 방문해야 합니다. 이 문서의 뒷부분에서 이러한 엔드포인트에 대한 기본 경로를 정의합니다.

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

다음 단계

자습서: Node/Express.js 웹앱에 로그인을 추가합니다.

  • Last updated on