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

적용: 직원 테넌트 외부 테넌트(자세히 알아보기)

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

필수 조건

• 새 앱을 Microsoft Entra 관리 센터에 등록하고, 해당 조직 디렉터리의 계정만을 위해 구성합니다. 애플리케이션 등록에서 자세한 내용을 참조하세요. 다음 값을 애플리케이션 개요 페이지에서 기록하여 나중에 사용하십시오.
  • 애플리케이션(클라이언트) ID
  • 디렉터리(테넌트) ID
• 단일 페이지 애플리케이션 플랫폼 구성을 사용하여 다음 리디렉션 URI를 추가합니다. 자세한 내용은 애플리케이션에서 리디렉션 URI를 추가하는 방법을 참조하세요 .
  • 리디렉션 URI: http://localhost:3000/.

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

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

언어 / 프레임워크	프로젝트 시작 깃허브	패키지	가져오기 시작했다	사용자 로그인	웹 API 액세스
리액트	MSAL React2	msal-react	빠른 시작
JavaScript	MSAL.js2	msal-browser	빠른 시작
앵귤러 (Angular)	MSAL Angular2	msal-angular	빠른 시작

애플리케이션 코드 구성

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

반응

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')
);

JavaScript

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

각도

// 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 { }

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

다음 단계

• 로그인 및 로그아웃 코드를 추가합니다.