Laravel Jetstream Password Confirmation

애플리케이션을 구축하는 동안, 특정 행동을 수행하기 전에 사용자가 자신의 비밀번호를 확인해야 하는 경우가 간혹 있을 수 있습니다. 예를 들어, 제트스트림 자체는 사용자가 이중 인증 설정을 변경하기 전에 비밀번호를 확인하도록 요구합니다. 다행히도, 제트스트림은 이를 간단하게 구현할 수 있는 내장 기능을 제공합니다.

제트스트림은 비밀번호 확인을 위해 두 가지 접근 방식을 제공합니다:

Redirect Based Password Confirmation

리디렉트 기반 비밀번호 확인은 사용자가 애플리케이션에 의해 렌더링된 전체 화면, 예를 들어 결제 설정 화면에 액세스하기 전에 비밀번호를 확인해야 할 때 일반적으로 사용됩니다.

이 비밀번호 확인 형태는 사용자를 전용 비밀번호 확인 화면으로 리디렉션합니다. 여기서 사용자는 의도한 목적지로 리디렉션되기 전에 비밀번호를 확인해야 합니다.

Modal Based Password Confirmation

모달 기반 비밀번호 인증은 사용자가 특정 행동을 수행하기 전에, 예를 들어 이중 인증을 활성화할 때 비밀번호를 확인하도록 하고 싶을 때 사용할 수 있습니다.

이 비밀번호 확인 형태는 사용자가 의도한 요청이 실행되기 전에 비밀번호를 확인할 수 있도록 모달 창을 표시합니다.

 

Redirect Password Confirmation

다음 문서는 제트스트림에서 리디렉트 기반 비밀번호 확인을 사용하는 방법에 대해 설명합니다. 리디렉트 기반 비밀번호 확인은 사용자가 애플리케이션에 의해 렌더링된 전체 화면, 예를 들어 결제 설정 화면에 액세스하기 전에 비밀번호를 확인해야 할 때 일반적으로 사용됩니다.

이 비밀번호 확인 형태는 사용자를 전용 비밀번호 확인 화면으로 리디렉션합니다. 여기서 사용자는 의도한 목적지로 리디렉션되기 전에 비밀번호를 확인해야 합니다.

 

Redirect Password Confirmation Via Livewire

Protecting Routes

비밀번호 확인 화면으로 리디렉션하는 방식으로 비밀번호 확인을 구현하려면, 비밀번호 확인이 필요한 뷰를 렌더링할 경로와 확인된 작업을 수행하는 모든 경로가 `password.confirm` 미들웨어에 할당되어 있는지 확인해야 합니다.

이 미들웨어는 라라벨의 기본 설치에 포함되어 있으며, 사용자가 비밀번호를 확인하지 않고 경로에 접근하려고 시도할 경우 사용자를 애플리케이션의 비밀번호 확인 화면으로 리디렉션하도록 보장합니다:

 

Route::get('/billing', function () {
    // ...
})->middleware(['password.confirm']);

Route::post('/billing', function () {
    // ...
})->middleware(['password.confirm']);

 

Livewire 스택의 비밀번호 확인 화면을 렌더링하는 뷰는 `resources/views/auth/confirm-password.blade.php`에 위치해 있습니다. 일반적으로 이 뷰는 사용자 정의할 필요가 없지만, 애플리케이션의 디자인에 따라 이 페이지에 일반적인 프레젠테이션 조정을 할 수 있습니다.

Ensuring The Password Has Been Confirmed
다음으로, 비밀번호 확인을 요구하는 액션을 포함하는 Livewire 컴포넌트는 `Laravel\Jetstream\ConfirmsPasswords` 트레이트를 사용해야 합니다.

이 트레이트를 컴포넌트에 추가한 후에는 비밀번호 확인이 필요한 Livewire 액션 내에서 `ensurePasswordIsConfirmed` 메소드를 호출해야 합니다. 이는 관련 액션 메소드의 매우 시작 부분에서 수행되어야 합니다:

 

/**
 * Enable administration mode for user.
 */
public function enableAdminMode(): void
{
    $this->ensurePasswordIsConfirmed();

    // ...
}

 

사용자가 비밀번호를 확인하면, 애플리케이션의 `auth.password_timeout` 구성 옵션에 정의된 초 수가 경과할 때까지 다시 비밀번호를 입력할 필요가 없습니다:

 

Redirect Password Confirmation Via Inertia

비밀번호 확인 화면으로 리디렉션하는 방식으로 비밀번호 확인을 구현하려면, 비밀번호 확인이 필요한 뷰를 렌더링할 경로와 확인된 작업을 수행하는 모든 경로가 `password.confirm` 미들웨어에 할당되어 있는지 확인해야 합니다.

이 미들웨어는 라라벨의 기본 설치에 포함되어 있으며, 사용자가 비밀번호를 확인하지 않고 경로에 접근하려고 시도할 경우 사용자를 애플리케이션의 비밀번호 확인 화면으로 리디렉션하도록 보장합니다:

 

Route::get('/billing', function () {
    // ...
})->middleware(['password.confirm']);

Route::post('/billing', function () {
    // ...
})->middleware(['password.confirm']);

 

Inertia 스택의 비밀번호 확인 화면을 렌더링하는 페이지는 `resources/js/Pages/Auth/ConfirmPassword.vue`에 위치해 있습니다. 일반적으로 이 페이지는 사용자 정의할 필요가 없지만, 애플리케이션의 디자인에 따라 이 페이지에 일반적인 프레젠테이션 조정을 할 수 있습니다.

사용자가 비밀번호를 확인하면, 애플리케이션의 `auth.password_timeout` 구성 옵션에 정의된 초 수가 경과할 때까지 다시 비밀번호를 입력할 필요가 없습니다:

 

Modal Password Confirmation

다음 문서에서는 제트스트림에서 모달 기반 비밀번호 확인을 사용하는 방법에 대해 설명합니다. 모달 기반 비밀번호 인증은 특정 행동을 수행하기 전에, 예를 들어 이중 인증을 활성화할 때 사용자에게 비밀번호를 확인하도록 하고 싶을 때 일반적으로 사용됩니다.

이 비밀번호 확인 형태는 사용자가 의도한 요청이 실행되기 전에 비밀번호를 확인할 수 있도록 모달 창을 표시합니다.

 

Modal Password Confirmation Via Livewire

Component Preparation

Livewire 스택을 사용하는 경우, 호출되기 전에 비밀번호 확인이 필요한 액션을 포함하는 Livewire 컴포넌트는 `Laravel\Jetstream\ConfirmsPasswords` 트레이트를 사용해야 합니다.

The `confirms-password` Blade Component
다음으로, 애플리케이션의 사용자 인터페이스에서, 액션을 트리거하는 버튼을 confirms-password 블레이드 컴포넌트로 감싸야 합니다. confirms-password 래퍼 컴포넌트는 사용자의 비밀번호가 확인된 후 실행될 Livewire 액션을 지정하는 wire:then 지시문을 포함해야 합니다:

<x-confirms-password wire:then="enableAdminMode">
    <x-button type="button" wire:loading.attr="disabled">
        {{ __('Enable') }}
    </x-button>
</x-confirms-password>

 

Ensuring The Password Is Confirmed

애플리케이션의 사용자 인터페이스에 confirms-password 컴포넌트를 추가한 후, 비밀번호 확인이 필요한 Livewire 액션 내에서 `ensurePasswordIsConfirmed` 메소드를 호출해야 합니다. 이는 관련 액션 메소드의 매우 시작 부분에서 수행되어야 합니다:

 

/**
 * Enable administration mode for user.
 */
public function enableAdminMode(): void
{
    $this->ensurePasswordIsConfirmed();

    // ...
}

 

사용자가 비밀번호를 확인하면, 애플리케이션의 `auth.password_timeout` 구성 옵션에 정의된 초 수가 경과할 때까지 다시 비밀번호를 입력할 필요가 없습니다:

Modal Password Confirmation Via Inertia

The `ConfirmsPassword` Vue Component

Inertia 스택을 사용하는 경우, 비밀번호 확인이 필요한 액션을 트리거하는 사용자 인터페이스 요소를 제트스트림에서 제공하는 ConfirmsPassword Vue 컴포넌트로 감싸야 합니다. 시작하려면, 페이지에 ConfirmsPassword 컴포넌트를 가져와야 합니다:

 

import ConfirmsPassword from './Components/ConfirmsPassword.vue'

 

다음으로, 확인해야 하는 액션을 트리거하는 사용자 인터페이스 요소 주변에 컴포넌트를 감싸세요. 페이지는 사용자의 비밀번호가 확인되면 호출되어야 하는 메소드를 트리거하기 위해 ConfirmsPassword 컴포넌트의 @confirmed 이벤트를 감지해야 합니다:

 

<ConfirmsPassword @confirmed="enableAdminMode">
    <PrimaryButton type="button" :class="{ 'opacity-25': enabling }" :disabled="enabling">
        Enable
    </PrimaryButton>
</ConfirmsPassword>

 

Ensuring The Password Is Confirmed

사용자 인터페이스에 ConfirmsPassword 컴포넌트를 추가한 후, 확인된 액션을 수행하는 경로가 `password.confirm` 미들웨어에 할당되어 있는지 확인해야 합니다. 이 미들웨어는 라라벨의 기본 설치에 포함되어 있습니다:

 

Route::post('/admin-mode', function () {
    // ...
})->middleware(['password.confirm']);

 

사용자가 비밀번호를 확인하면, 애플리케이션의 `auth.password_timeout` 구성 옵션에 정의된 초 수가 경과할 때까지 다시 비밀번호를 입력할 필요가 없습니다:

Customizing How Password Are Confirmed

가끔, 비밀번호 확인 중 사용자의 비밀번호가 어떻게 검증되는지 사용자 정의하고 싶을 수 있습니다. 이를 위해 `Fortify::confirmPasswordsUsing` 메소드를 사용할 수 있습니다. 이 메소드는 인증된 사용자 인스턴스와 요청의 비밀번호 입력 필드를 받는 클로저를 받습니다. 클로저는 주어진 사용자에 대해 비밀번호가 유효하면 true를 반환해야 합니다. 일반적으로 이 메소드는 `JetstreamServiceProvider`의 `boot` 메소드에서 호출해야 합니다:

 

use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Laravel\Fortify\Fortify;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    // ...

    Fortify::confirmPasswordsUsing(function (User $user, string $password) {
        return Hash::check($password, $user->password);
    });
}

 

클로저 대신 클래스 내에 비밀번호 확인 프로세스를 캡슐화하고 싶다면, `confirmPasswordsUsing` 메소드에 PHP "callable" 배열을 전달할 수 있습니다:

use App\Actions\ConfirmPassword;
use Laravel\Fortify\Fortify;

Fortify::confirmPasswordsUsing([new ConfirmPassword, '__invoke']);