Laravel, 프로필 수정 시 비밀번호 재확인 기능 구현 및 레이아웃 커스텀

이번 포스트에서는 라라벨 애플리케이션의 보안성을 한층 더 높이기 위해, 프로필 수정 등 민감한 페이지에 진입할 때 비밀번호를 재확인하는 컨펌^Confirm 기능을 구현해 보겠다.

이전 포스트

라라벨 Livewire, 폼 객체(Form Object)로 유효성 검사 로직 분리 및 카테고리 셀렉트 에러 해결

라라벨 Livewire 프로젝트에서 폼 객체(Form Object)를 생성해 유효성 검사 로직을 깔끔하게 분리하고 코드를 리팩토링하는 방법과, 개발 과정에서 우연히 발견한 셀렉트 박스 폼 에러의 원인 및 해결 방법을 상세하게 살펴봅니다.

프로필 수정 시 비밀번호 컨펌 기능 구현 · 4th-avenue/laravel13-livewire@853a6c4 · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해 확인하자.

프로필 수정 시 비밀번호 컨펌 기능 구현하기

오늘 구현할 기능은 사실 굉장히 간단하게 구현할 수 있다.

라라벨^Laravel 프레임워크 내부에는 이미 비밀번호 확인 상태를 검사하는 클래스가 구현되어 있기 때문이다.

이 미들웨어는 라우트에서 password.confirm이라는 별칭^Alias으로 바로 호출해서 사용할 수 있다.

routes/web.php

Route::middleware('auth')->group(function () {
    Route::view('profile', 'profile')
        ->middleware('password.confirm') // 추가
        ->name('profile');
    Route::livewire('articles/new', 'pages::articles.new')->name('articles.new');
    Route::livewire('articles/{article:id}/edit', 'pages::articles.edit')->name('articles.edit');
});

이렇게 web.php에서 주석으로 표시해 놓은 코드 한 줄만 추가하면 된다.

저장 후에 프로필 수정 페이지로 이동하려고 하면 이렇게 비밀번호를 다시 한번 물어보는 페이지가 뜬다.

사실상 오늘 구현할 기능은 이것으로 끝이다.

하지만 여기서 디자인만 조금 수정해 보겠다.

일단 캡처 이미지에서 보이는 것과 같이 이 비밀번호 확인 페이지로 이동하면 상단의 내비게이션이 사라지게 된다.

그 이유는 confirm-password.blade.php가 애플리케이션의 게스트용 레이아웃(layouts/guest.blade.php)을 사용하도록 설정되어 있기 때문이다.

비밀번호 확인 페이지의 레이아웃 바꾸기

상단에 내비게이션 바를 포함하고 있는 기존 레이아웃(layouts/app.blade.php)을 사용하려면, 해당 뷰 파일의 최상단 레이아웃 지정 부분을 수정해야 한다.

resources/views/livewire/pages/auth/confirm-password.blade.php

new #[Layout('layouts.app')] class extends Component

이 부분이다.

guest라고 쓰여있던 부분은 app으로 수정했다.

하지만 이것만 적용하면, (캡처는 하지 않겠지만) 비밀번호 확인 페이지의 디자인이 이상해진다.

confirm-password.blade.php는 게스트용 레이아웃에 최적화되어 있었기 때문이다.

layouts/app.blade.php를 사용하는 다른 페이지들처럼 깔끔하게 박스 형태의 레이아웃으로 감싸야 한다.

resources/views/livewire/pages/auth/confirm-password.blade.php

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Confirm Password') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="flex flex-col items-center justify-center min-h-[55vh]">
                <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 text-gray-900 dark:text-gray-100">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                        {{ __('This is a secure area of the application.') }}
                    </h3>
                    <div class="my-4 text-sm text-gray-600 dark:text-gray-400">
                        {{ __('Please confirm your password before continuing.') }}
                    </div>

                    <form wire:submit="confirmPassword">
                        <!-- 생략 -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

뭔가 많이 수정된 것처럼 보이지만,

• 다른 페이지들처럼 상단에 헤더 슬롯을 활용했고,
• 카드 형태의 입력 폼이 상하좌우 모두 정중앙에 오도록 여러 개의 div 태그로 스타일을 적용했고,
• 가독성을 위해서 한 줄로 표시되고 있던 메시지를 둘로 나눴다.

이렇게 수정한 최종 결과물은??

이렇게 바뀌었다.

이제는 프로필 수정 페이지로 이동하려고 하면 이렇게 비밀번호 확인 페이지가 먼저 뜨고, 패스워드를 정확히 입력하면 프로필 수정 페이지로 이동하게 된다.

이미지처럼 두 줄로 나눈 메시지도 한글화를 하려면 lang/ko.json 파일도 수정해야 한다.

Laravel 회원가입 폼 수정: 아이디와 닉네임 필드 추가 및 한글화

라라벨 브리즈 회원가입 폼을 수정하여 기본 name 필드를 삭제하고, userid와 nickname 컬럼을 추가하는 방법입니다. 데이터베이스 테이블 변경부터 #[Fillable] 어트리뷰트 정의, 그리고 유효성 검사 에러 메시지를 한글화 하는 팁까지 정리했습니다.

lang/ko.json 파일을 수정해서 한글화 하는 내용은 이 포스트에서 다뤘었다.

참고로 세션 만료 시간이나 그 외 설정을 변경하고 싶다면, config/session.php 파일을 수정하면 된다.

세션과 관련된 모든 설정은 config/session.php 파일에서 관리된다.

이 파일을 직접 수정해도 되고, 환경 변수(.env)를 통해 제어할 수 있다.