다음을 통해 공유

자습서: 외부 테넌트에서 인증을 위한 Vanilla JavaScript SPA 만들기

  • 아티클

이 자습서는 Vanilla JS(JavaScript) SPA(단일 페이지 애플리케이션)를 빌드하고 Microsoft Entra 관리 센터를 사용하여 인증을 준비하는 방법을 보여 주는 시리즈의 2부입니다. 이 시리즈의 1부에서는 애플리케이션을 등록하고 외부 테넌트에서 사용자 흐름을 구성했습니다. 이 자습서에서는 npm을 사용하여 Vanilla JavaScript SPA를 만들고 인증 및 권한 부여에 필요한 파일을 만드는 방법을 보여 줍니다.

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

  • Visual Studio Code에서 Vanilla JavaScript 프로젝트 만들기
  • 필요한 패키지를 설치합니다.
  • server.js에 코드를 추가하여 서버 만들기

필수 조건

새 Vanilla JavaScript 프로젝트 만들기 및 종속성 설치

  1. Visual Studio Code를 열고 파일>폴더 열기...를 선택합니다. 프로젝트를 만들 위치로 이동하여 선택합니다.

  2. 터미널 >새 터미널을 선택하여 새 터미널을 엽니다.

  3. 다음 명령을 실행하여 새 Vanilla JavaScript 프로젝트를 만듭니다.

    npm init -y

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

        └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

앱 종속성 업그레이드

  1. 터미널에서 다음 명령을 실행하여 프로젝트에 필요한 종속성을 설치합니다.

    npm install express morgan @azure/msal-browser

server.js 파일을 편집합니다.

Express는 Node.js의 웹 애플리케이션 프레임워크입니다. 애플리케이션을 호스트하는 서버를 만드는 데 사용됩니다. Morgan은 HTTP 요청을 콘솔에 기록하는 미들웨어입니다. 서버 파일은 이러한 종속성을 호스트하는 데 사용되며 애플리케이션에 대한 경로를 포함합니다. 인증 및 권한 부여는 JavaScript용 Microsoft 인증 라이브러리(MSAL.js)에서 처리됩니다.

  1. server.js 파일에에 다음 코드 조각을 추가합니다.

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

이 코드에서 앱 변수는 express 모듈을 사용하여 초기화되고 express는 퍼블릭 자산을 제공하는 데 사용됩니다. MSAL-browser는 정적 자산으로 제공되며 인증 흐름을 시작하는 데 사용됩니다.

다음 단계

3부: Vanilla JavaScript SPA에서 인증 흐름 처리