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

아티클
05/09/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 {}

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

// 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및/또는 UnauthenticatedTemplate 함수를 AuthenticatedTemplate 사용합니다.

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

리디렉션 환경을 사용하도록 설정하려면 구성 InteractionType.Redirect 을 MsalGuardConfiguration/>interactionType로 설정한 다음 부트스트랩 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 커넥트 프런트 채널 로그아웃입니다. 앱이 새 앱과 로그인 상태를 공유하지만 자체 세션 토큰/쿠키를 관리하는 경우 이 옵션을 사용할 수 있습니다. 브라우저에서 타사 쿠키를 차단하는 경우와 같이 콘텐츠가 차단되는 이 구현에는 몇 가지 제한 사항이 있습니다.
팝업 창 및/또는 로컬 앱 로그아웃에 대한 리디렉션 입니다. 팝업 및 리디렉션 메서드는 엔드포인트 및 로컬 앱에서 사용자의 세션을 종료합니다. 그러나 프런트 채널 통신이 차단되는 경우 이러한 메서드는 다른 페더레이션된 애플리케이션에 대한 세션을 즉시 지우지 않을 수 있습니다.

팝업 창으로 로그아웃

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

로그아웃 후 환경의 경우 사용자를 특정 URI로 리디렉션하도록 설정할 postLogoutRedirectUri 수 있습니다. 애플리케이션 등록에서 이 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 v1의 메서드와 브라우저 스토리지의 캐시를 지우고 logoutRedirect Microsoft Entra 로그아웃 페이지로 리디렉션하는 v2의 메서드를 제공합니다logout. 로그아웃한 후 리디렉션은 기본적으로 로그인 시작 페이지로 설정됩니다.

로그아웃 후 환경의 경우 사용자를 특정 URI로 리디렉션하도록 설정할 postLogoutRedirectUri 수 있습니다. 애플리케이션 등록에서 이 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>
    </>
  );
}

다음 단계

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

Share via

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

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

팝업 창으로 로그아웃

리디렉션을 사용하여 로그아웃

다음 단계

추가 리소스

Share via

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

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

팝업 창으로 로그인

리디렉션으로 로그인

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

팝업 창으로 로그아웃

리디렉션을 사용하여 로그아웃

다음 단계

추가 리소스