다음을 통해 공유

자습서: 인증을 위한 JavaScript 단일 페이지 앱 준비

적용: 녹색 원 안에 흰색 확인 표시 기호 . 워크포스 테넌트에도 녹색 원 안에 흰색 확인 표시 기호가 있습니다 . 외부 테넌트(자세히 알아보기)

이 자습서에서는 JavaScript SPA(단일 페이지 애플리케이션)를 빌드하고 Microsoft ID 플랫폼을 사용하여 인증을 준비합니다. 이 자습서에서는 npm사용하여 JavaScript SPA를 만들고, 인증 및 권한 부여에 필요한 파일을 만들고, 테넌트 세부 정보를 소스 코드에 추가하는 방법을 보여 줍니다. 애플리케이션은 직원 테넌트에 있는 직원 또는 외부 테넌트를 사용하는 고객에 사용할 수 있습니다.

이 자습서에서는

  • 새 JavaScript 프로젝트 만들기
  • 인증에 필요한 패키지 설치
  • 파일 구조를 만들고 서버 파일에 코드 추가
  • 인증 구성 파일에 테넌트 세부 정보 추가

필수 구성 요소

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

  1. Microsoft Entra 관리 센터에 전역 관리자로 로그인합니다.

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

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

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

    npm init -y

  5. 다음 프로젝트 구조를 달성하기 위해 추가 폴더 및 파일을 만듭니다.

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

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

    npm install express morgan @azure/msal-browser

서버 파일에 코드 추가

ExpressNode.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}!`);
});

module.exports = app;

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

MSAL 구성에 테넌트 세부 정보 추가

authConfig.js 파일에는 인증 흐름에 대한 구성 설정이 포함되어 있으며 인증에 필요한 설정으로 MSAL.js 구성하는 데 사용됩니다.

  1. public/authConfig.js 열고 다음 코드를 추가합니다.

    /**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. 다음 값을 Microsoft Entra 관리 센터의 값으로 바꿉다.

    • Enter_the_Application_Id_Here 값을 찾아서 Microsoft Entra 관리 센터에 등록한 앱의 애플리케이션 ID(clientId) 로 바꾸세요.
    • Enter_the_Tenant_Info_Here 값을 찾아서 Microsoft Entra 관리 센터에서 생성한 워크포스 테넌트의 테넌트 ID로 바꿉니다.

  3. 파일을 저장합니다.

다음 단계

JavaScript SPA에서 인증 흐름 처리하기