단일 페이지 애플리케이션: 코드 구성

SPA(단일 페이지 애플리케이션)용 코드를 구성하는 방법을 알아봅니다.

단일 페이지 앱을 지원하는 Microsoft 라이브러리

다음 Microsoft 라이브러리는 단일 페이지 앱을 지원합니다.

언어 / 프레임워크	프로젝트 설정 GitHub	Package(패키지)	가져오기 시작됨	사용자 로그인	웹 API 액세스	GA(일반 공급) 또는 공개 미리 보기1
Angular	MSAL Angular v22	msal-angular	자습서			GA
Angular	MSAL Angular3	msal-angular	—			GA
AngularJS	MSAL AngularJS3	msal-angularjs	—			공개 프리뷰
JavaScript	MSAL.js v22	msal-browser	자습서			GA
JavaScript	MSAL.js 1.03	msal-core	—			GA
React	MSAL React2	msal-react	자습서			GA

¹온라인 서비스에 대한 유니버설 사용 조건은 공개 미리 보기의 라이브러리에 적용됩니다.

²PKCE에만 사용하는 인증 코드 흐름(권장).

³암시적 허용 흐름 만(권장되지 않음)

애플리케이션 코드 구성

MSAL 라이브러리에서 애플리케이션 등록 정보는 라이브러리 초기화 중에 구성으로 전달됩니다.

JavaScript(MSAL.js v2)

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

구성 가능한 옵션에 대한 자세한 내용은 MSAL.js를 사용하여 애플리케이션 초기화를 참조하세요.

JavaScript(MSAL.js v1)

import * as Msal from "msal"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create UserAgentApplication instance
const userAgentApplication = new Msal.UserAgentApplication(config);

구성 가능한 옵션에 대한 자세한 내용은 MSAL.js를 사용하여 애플리케이션 초기화를 참조하세요.

Angular(MSAL.js v2)

// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'Enter_the_Application_Id_Here',
            }
        }), null, null)
    ]
})
export class AppModule { }

Angular(MSAL.js v1)

// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})
export class AppModule { }

React

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);

// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={publicClientApplication}>
            <App />
        </ MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

다음 단계

이 시나리오의 다음 문서인 로그인 및 로그아웃으로 이동합니다.