ASP.NET Core MVC 6 앱 보안 - 프로필 페이지 추가 - 2부

앞으로 몇 분 안에 이전 프로젝트에 기본 정보가 포함된 프로필 페이지를 추가할 것입니다.
기사의 첫 부분을 놓친 경우 아래 링크를 사용할 수 있습니다.

ASP.NET Core MVC 6 앱 보안 - 애플리케이션에 인증 추가 - 1부

Emanuele Bartolesi ・ 6월 15일 ・ 4분 읽기

범위 추가

기본적으로 이메일은 Auth0이 인증 후 애플리케이션으로 다시 보내는 정보에 포함되지 않습니다.
다른 인증 공급자에서도 일반적인 관행입니다.
먼저 범위에 이메일을 추가해 보겠습니다.

Program.cs 파일에서 Auth0 인증 구성을 다음 코드로 바꿉니다.

builder.Services
    .AddAuth0WebAppAuthentication(options => {
        options.Domain = builder.Configuration["Auth0:Domain"];
        options.ClientId = builder.Configuration["Auth0:ClientId"];
        options.Scope = "openid profile email";
    });

이 코드 조각에서 가장 중요한 부분은 Scope 속성입니다.
지금부터 프로필에 이메일도 있습니다.

프로필 모델 만들기

Model 폴더(또는 모델에 사용하는 폴더)에서 "UserProfile"이라는 클래스를 추가합니다.
사용자 프로필에 대한 정보를 사용하여 세 가지 속성(현재)을 만듭니다.

public class UserProfile
{
    public string Avatar { get; set; }
    public string Email { get; set; }
    public string Name { get; set; }
}

프로필 정보 관리

보기 폴더 아래에 "계정"이라는 새 폴더를 만들고 "UserProfile"이라는 빈 Razor 보기를 추가합니다.
아래 코드를 새 면도기 보기에 붙여넣을 수 있습니다.

@model UserProfile

<section class="vh-100" style="background-color: #9de2ff;">
    <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col col-md-9 col-lg-7 col-xl-5">
                <div class="card" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <div class="d-flex text-black">
                            <div class="flex-shrink-0">
                                <img src="@Model.Avatar"
                                     alt="" class="img-fluid"
                                     style="width: 180px; border-radius: 10px;">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">@Model.Name</h5>
                                <p class="mb-2 pb-1" style="color: #2b2a2a;">@Model.Email</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

그리고 이제 AccountController.cs 파일에서 아래 코드를 추가하여 Auth0 프로필 정보에서 정보를 검색하고 해당 정보를 프로필 보기로 전송해야 합니다.

[Authorize]
public IActionResult UserProfile()
{
    return View(new UserProfile()
    {
        Name = User.Identity.Name,
        Email = User.FindFirst(c => c.Type == ClaimTypes.Email)?.Value,
        Avatar = User.FindFirst(c => c.Type == "picture")?.Value
    });
}

이제 마지막으로 할 일은 프로필 페이지에 대한 링크가 있는 메뉴 항목을 탐색 모음에 추가하는 것입니다.

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="UserProfile">Profile</a>
</li>

탐색 표시줄의 로그아웃 링크 앞에 이 코드 스니펫을 붙여넣을 수 있습니다.

프로필 페이지 테스트

이제 새 프로필 페이지를 테스트할 준비가 되었습니다.
F5 키를 눌러 애플리케이션을 실행하고 탐색 모음에서 "로그인"링크를 클릭합니다.
로그인 후 "프로필"링크를 클릭하면 응용 프로그램에서 다음 UI로 프로필 페이지를 열어야 합니다.

결론

시리즈 2부에서는 기본 프로필 페이지를 사용자 정보로 구현하는 방법을 알아보았습니다.
다음 부분에서는 Auth0 및 ASP.NET MVC와 관련된 역할 및 기타 멋진 기능을 사용하는 방법을 배웁니다.

여기에서 소스 코드를 찾을 수 있습니다link.