단일 페이지 앱 로그인 및 로그아웃 - Microsoft identity platform

아티클
06/19/2024

애플리케이션의 API에 액세스하기 위한 토큰을 얻으려면 인증된 사용자 컨텍스트가 필요합니다. 사용자를 인증하려면 팝업 창 및/또는 리디렉션 로그인 방법을 사용하면 됩니다.

애플리케이션에 인증된 사용자 컨텍스트 또는 ID 토큰에 대한 액세스 권한이 있으면 로그인 단계를 건너뛰고 토큰을 직접 획득할 수 있습니다. 자세한 내용은 사용자 힌트가 있는 SSO(Single Sign-On)를 참조하세요.

팝업 또는 리디렉션 환경 중에서 선택

팝업이나 리디렉션 환경 중 선택은 애플리케이션 흐름에 따라 다릅니다.

인증하는 동안 사용자가 기본 애플리케이션 페이지에서 벗어나지 않도록 하려면 팝업 창을 사용합니다. 인증 리디렉션은 팝업 창에서 발생하기 때문에 기본 애플리케이션의 상태가 유지됩니다.
사용자에게 팝업 창이 비활성화된 브라우저 제약 조건 또는 정책이 있는 경우 리디렉션을 사용합니다. 예를 들어 Internet Explorer의 팝업 창에는 알려진 문제가 있습니다.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

특정 경로에 대한 로그인 환경을 호출하려면 @angular/router를 가져오고 경로 정의에 MsalGuard를 추가합니다.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

팝업 창 환경을 사용하도록 설정하려면 MsalGuardConfiguration에서 interactionType 구성을 InteractionType.Popup으로 설정합니다. 동의가 필요한 범위를 전달할 수도 있습니다.

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

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

사용자가 아직 로그인하지 않은 경우 로그인 환경을 호출하려면 @azure/msal-react의 MsalAuthenticationTemplate 함수를 사용합니다. MSAL React 래퍼는 특정 구성 요소를 MsalAuthenticationTemplate 구성 요소에 래핑하여 보호합니다.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

사용자 상호 작용(예: 단추 선택)에 따라 특정 로그인 환경을 호출하려면 @azure/msal-react의 AuthenticatedTemplate 및/또는 UnauthenticatedTemplate 함수를 사용합니다.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup sign in when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

리디렉션 환경을 사용하도록 설정하려면 MsalGuardConfiguration에서 interactionType 구성을 InteractionType.Redirect로 설정한 다음, 리디렉션을 처리하도록 MsalRedirectComponent를 부트스트랩합니다.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

사용자가 로그인하지 않은 경우 로그인 환경을 호출하려면 @azure/msal-react의 MsalAuthenticationTemplate 함수를 사용합니다.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

브라우저에서 로그아웃 동작

하나 이상의 앱에서 안전한 로그아웃을 보장하려면 다음 방법을 사용하는 것이 좋습니다.

공유 디바이스에서 사용자는 브라우저의 프라이빗/시크릿 모드를 사용하고 디바이스에서 나가기 전에 모든 브라우저 창을 닫아야 합니다.
공유되지 않는 디바이스에서 사용자는 운영체제 잠금 화면을 사용하여 디바이스의 전체 운영체제 세션을 잠그거나 로그아웃해야 합니다. Microsoft는 로그아웃 페이지를 사용하여 사용자에게 이러한 개인 정보 보호 및 보안 모범 사례를 상기시킵니다.

자세한 내용은 Microsoft의 인터넷 개인 정보 보호 모범 사례를 참조하세요.

사용자가 권장 사항을 사용하여 로그아웃하지 않기로 선택하는 경우 로그아웃 기능을 사용하도록 설정하는 다른 방법은 다음과 같습니다.

페더레이션 로그아웃에 대한 Microsoft의 OpenID Connect 프런트 채널 로그아웃 . 앱이 새 앱과 로그인 상태를 공유하지만 자체 세션 토큰/쿠키를 관리하는 경우 이 옵션을 사용할 수 있습니다. 브라우저에서 타사 쿠키를 차단하는 경우와 같이 콘텐츠가 차단되는 이 구현에는 몇 가지 제한 사항이 있습니다.
팝업 창 및/또는 로컬 앱 로그아웃에 대한 리디렉션 . 팝업 및 리디렉션 메서드는 엔드포인트 및 로컬 앱에서 사용자의 세션을 종료합니다. 그러나 프런트 채널 통신이 차단되는 경우 이러한 메서드는 다른 페더레이션된 애플리케이션에 대한 세션을 즉시 지우지 못할 수도 있습니다.

팝업 창으로 로그아웃

MSAL.js v2 이상에서는 브라우저 스토리지에서 캐시를 지우고 Microsoft Entra 로그아웃 페이지에 대한 팝업 창을 여는 logoutPopup 메서드를 제공합니다. 로그아웃한 후에는 리디렉션이 기본적으로 로그인 시작 페이지로 설정되고 팝업이 닫힙니다.

로그아웃 후 환경의 경우 postLogoutRedirectUri를 설정하여 사용자를 특정 URI로 리디렉션할 수 있습니다. 애플리케이션 등록에서 이 URI를 리디렉션 URI로 등록해야 합니다. 요청의 일부로 mainWindowRedirectUri를 전달하여 홈페이지 또는 로그인 페이지와 같은 다른 페이지로 주 창을 리디렉션하도록 logoutPopup을 구성할 수도 있습니다.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton component returns a button that invokes a pop-up sign out when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

리디렉션을 사용한 로그아웃

MSAL.js는 브라우저 스토리지의 캐시를 지우고 Microsoft Entra 로그아웃 페이지로 리디렉션하는 logout 메서드(v1)와 logoutRedirect 메서드(v2)를 제공합니다. 로그아웃한 후에는 리디렉션이 기본적으로 로그인 시작 페이지로 설정됩니다.

로그아웃 후 환경의 경우 postLogoutRedirectUri를 설정하여 사용자를 특정 URI로 리디렉션할 수 있습니다. 애플리케이션 등록에서 이 URI를 리디렉션 URI로 등록해야 합니다.

개인 브라우저 및 잠금 화면 사용에 대한 Microsoft의 인터넷 개인 정보 보호 모범 사례 미리 알림은 이 방법에 표시되지 않으므로 모범 사례를 설명하고 사용자에게 모든 브라우저 창을 닫도록 상기시키는 것이 좋습니다.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

다음 단계

본 시나리오의 다음 문서인 앱용 토큰 획득으로 이동합니다.

다음을 통해 공유

팝업 또는 리디렉션 환경 중에서 선택

브라우저에서 로그아웃 동작

팝업 창으로 로그아웃

리디렉션을 사용한 로그아웃

다음 단계

피드백

추가 리소스

다음을 통해 공유

단일 페이지 애플리케이션: 로그인 및 로그아웃

팝업 또는 리디렉션 환경 중에서 선택

팝업 창으로 로그인

리디렉션으로 로그인

브라우저에서 로그아웃 동작

팝업 창으로 로그아웃

리디렉션을 사용한 로그아웃

다음 단계

피드백

추가 리소스