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

아티클
06/21/2024

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

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

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

필수 조건

자습서: Vanilla JavaScript SPA에서 사용자를 인증하기 위해 외부 테넌트 준비
Vanilla JavaScript 애플리케이션을 지원하는 모든 IDE(통합 개발 환경)를 사용할 수 있지만 이 가이드에서는 Visual Studio Code를 권장합니다. 이 IDE는 다운로드 페이지에서 다운로드할 수 있습니다.
Node.js

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

Visual Studio Code를 열고 파일>폴더 열기...를 선택합니다. 프로젝트를 만들 위치로 이동하여 선택합니다.
터미널 >새 터미널을 선택하여 새 터미널을 엽니다.
다음 명령을 실행하여 새 Vanilla JavaScript 프로젝트를 만듭니다.
```
npm init -y
```

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

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

앱 종속성 업그레이드

터미널에서 다음 명령을 실행하여 프로젝트에 필요한 종속성을 설치합니다.
```
npm install express morgan @azure/msal-browser
```

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

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

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에서 인증 흐름 처리

다음을 통해 공유