MSAL.js를 사용하여 클라이언트 애플리케이션 초기화

이 문서에서는 사용자 에이전트 애플리케이션의 인스턴스를 사용하여 MSAL.js(JavaScript용 Microsoft 인증 라이브러리)를 초기화하는 방법을 설명합니다.

사용자 에이전트 애플리케이션은 클라이언트 코드가 웹 브라우저와 같은 사용자 에이전트에서 실행되는 퍼블릭 클라이언트 애플리케이션의 형태입니다. 이와 같은 클라이언트는 브라우저 컨텍스트에 공개적으로 액세스할 수 있기 때문에 비밀을 저장하지 않습니다.

클라이언트 애플리케이션 유형 및 애플리케이션 구성 옵션에 관한 자세한 내용은 MSAL의 퍼블릭 및 기밀 클라이언트 앱을 참조하세요.

필수 조건

애플리케이션을 초기화하기 전에 먼저 Microsoft Entra 관리 센터에서 등록하여 애플리케이션과 Microsoft ID 플랫폼 간의 신뢰 관계를 설정해야 합니다.

앱을 등록한 후 Microsoft Entra 관리 센터에서 찾을 수 있는 다음 값의 일부 또는 모두가 필요합니다.

MSAL.js 2.x 앱 초기화

구성 개체로 PublicClientApplication을 인스턴스화하여 MSAL.js 인증 컨텍스트를 초기화합니다. 필요한 최소 구성 속성은 Microsoft Entra 관리 센터의 앱 등록 개요 페이지에 애플리케이션(클라이언트) ID로 표시되는 애플리케이션의 clientID입니다.

다음은 PublicClientApplication의 구성 개체 및 인스턴스화에 대한 예제입니다.

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

handleRedirectPromise

애플리케이션에서 리디렉션 흐름을 사용할 때 handleRedirectPromise를 호출합니다. 리디렉션 흐름을 사용할 때는 페이지 로드마다 handleRedirectPromise를 실행해야 합니다.

다음 프라미스에서 세 가지 출력이 가능합니다.

• .then이 호출되고 tokenResponse가 true인 경우: 애플리케이션이 성공한 리디렉션 작업에서 반환됩니다.
• .then이 호출되고 tokenResponse가 false인 경우(null): 애플리케이션이 리디렉션 작업에서 반환되지 않습니다.
• .catch가 호출된 경우: 애플리케이션이 리디렉션 작업에서 반환되고 오류가 발생했습니다.

MSAL.js 1.x 앱 초기화

구성 개체로 UserAgentApplication을 인스턴스화하여 MSAL 1.x 인증 컨텍스트를 초기화합니다. 필요한 최소 구성 속성은 Microsoft Entra 관리 센터의 앱 등록 개요 페이지에 애플리케이션(클라이언트) ID로 표시되는 애플리케이션의 clientID입니다.

MSAL.js 1.2.x 또는 그 이전 버전에서 리디렉션 흐름(loginRedirect 및 acquireTokenRedirect)을 사용하는 인증 방법의 경우 handleRedirectCallback() 메서드를 통해 성공 또는 오류에 대한 콜백을 명시적으로 등록해야 합니다. 리디렉션 흐름은 팝업 항목 환경을 사용하는 메서드처럼 프라미스를 반환하지 않기 때문에 명시적으로 MSAL.js 1.2.x 또는 그 이전 버전에서 콜백을 등록해야 합니다. MSAL.js 버전 1.3.x 이상에서는 콜백을 ‘선택적으로’ 등록할 수 있습니다.

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

단일 인스턴스 및 구성

MSAL.js 1.x 및 2.x는 각각 단일 인스턴스 및 UserAgentApplication 또는 PublicClientApplication 구성을 갖도록 설계되어 단일 인증 컨텍스트를 나타냅니다.

UserAgentApplication 또는 PublicClientApplication의 여러 인스턴스는 브라우저에서 충돌하는 캐시 항목 및 동작을 유발할 수 있으므로 권장하지는 않습니다.

다음 단계

GitHub의 이 MSAL.js 2.x 코드 샘플에서는 구성 개체로 PublicClientApplication의 인스턴스화를 보여 줍니다.