다음을 통해 공유

자습서: 외부 테넌트에 대한 ASP.NET Core 웹 애플리케이션에 로그인 및 로그아웃 추가

  • 아티클

이 자습서는 ASP.NET Core 웹 애플리케이션을 빌드하고 Microsoft Entra 관리 센터를 사용하여 인증을 준비하는 방법을 보여 주는 시리즈의 마지막 부분입니다. 이 시리즈의 2부에서는 Visual Studio Code에서 ASP.NET Core 프로젝트를 만들고 인증을 위해 구성했습니다. 이 마지막 단계에서는 로그인 및 로그아웃 환경을 추가하고 애플리케이션의 로그인 및 로그아웃을 수행합니다.

이 자습서에서는 다음을 수행합니다.

  • 로그인 및 로그아웃 환경 추가
  • ID 토큰 소유권 클레임을 보기 위한 코드 추가
  • 사용자 흐름을 사용하여 애플리케이션에 로그인 및 로그아웃

필수 조건

로그인 및 로그아웃 환경 추가

NuGet 패키지를 설치하고 인증에 필요한 코드를 추가한 후 로그인 및 로그아웃 환경을 추가해야 합니다. 코드는 ID 토큰 클레임을 읽어 사용자가 인증되었는지 확인하고 User.Claims를 사용하여 ID 토큰 클레임을 추출합니다.

  1. IDE에서 Views/Shared로 이동하여 _LoginPartial.cshtml이라는 새 파일을 만듭니다.

  2. _LoginPartial.cshtml을 열고 로그인 및 로그아웃 환경을 추가하기 위해 다음 코드를 추가합니다.

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity is not null && User.Identity.IsAuthenticated)
{
        <li class="nav-item">
            <span class="nav-link text-dark">Hello @User.Claims.First(c => c.Type == "preferred_username").Value!</span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

  3. 그런 다음 동일한 폴더에 있는 Layout.cshtml 파일에 _LoginPartial에 대한 참조를 추가합니다. 다음 코드 조각에 표시된 대로 이를 navbar-collapse 클래스 뒤에 배치하는 것이 좋습니다.

    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <partial name="_LoginPartial" />
</div>

ID 토큰 클레임 보기

이제 웹앱은 Microsoft ID 플랫폼을 사용하여 사용자를 로그인하도록 구성되었습니다. 다음 단계는 ID 토큰 클레임을 볼 수 있는 코드를 추가하는 것입니다. 앱은 User.Identity.IsAuthenticated를 사용하여 사용자가 인증되었는지 확인하고 User.Claims의 각 항목을 반복하여 Type 및 Value를 반환하여 ID 토큰 클레임을 나열합니다.

  1. Views/Home/Index.cshtml을 열고 파일 콘텐츠를 다음 코드 조각으로 바꿉니다.

    @{
ViewData["Title"] = "Home Page";
}

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        text-align: justify;
        padding: 8px;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
</style>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>

    @if (@User.Identity is not null && @User.Identity.IsAuthenticated)
    {
        <p>You are signed in! Below are the claims in your ID token. For more information, visit: <a href="https://learn.microsoft.com/azure/active-directory/develop/id-tokens">Microsoft identity platform ID tokens</a></p>
        <table>
            <tbody>

                @foreach (var item in @User.Claims)
                {
                    <tr>
                        <td>@item.Type</td>
                        <td>@item.Value</td>
                    </tr>
                }
            </tbody>
        </table>
    }

    <br />
    <p>Learn about <a href="https://learn.microsoft.com/azure/active-directory/develop/v2-overview">building web apps with Microsoft identity platform</a>.</p>
</div>

애플리케이션에 로그인합니다.

  1. 터미널에 다음을 입력하여 애플리케이션을 시작하여 launchSettings.json 파일에서 https 프로필을 시작합니다.

    dotnet run --launch-profile https

  2. 새 프라이빗 브라우저를 열고 브라우저에 애플리케이션 URI(이 경우 https://localhost:7274)를 입력합니다.

  3. 이전에 구성한 등록 사용자 흐름을 테스트하려면 계정이 없나요? 하나를 만듭니다를 선택합니다.

  4. 계정 만들기 창에서 외부 테넌트에 등록된 메일 주소를 입력하면 애플리케이션 사용자로 가입 흐름이 시작됩니다.

  5. 외부 테넌트에서 일회용 암호를 입력한 다음 새 암호와 계정 세부 정보를 추가로 입력하면 이 가입 흐름이 완료됩니다.

    1. 창에 로그인 상태를 유지하라는 메시지가 표시되면, 예, 아니요 중 하나를 선택합니다.

  6. 다음 스크린샷에 표시된 대로 ASP.NET Core 시작 페이지가 브라우저에 나타납니다.

    ASP.NET Core 웹앱 로그인 스크린샷

애플리케이션에서 로그아웃

  1. 애플리케이션에서 로그아웃하려면 탐색 모음에서 로그아웃을 선택합니다.
  2. 로그아웃할 계정을 묻는 창이 나타납니다.
  3. 로그아웃에 성공하면 모든 브라우저 창을 닫으라는 최종 창이 나타납니다.

참고 항목