密码确认

未匹配的标注

密码确认

介绍

在构建你的应用程序时,你可能偶尔会有一些操作需要用户在执行该操作前确认他们的密码。例如,Jetstream 本身要求用户在改变他们的双因素身份验证设置之前确认他们的密码。幸运的是,Jetstream 有内置的功能来让这件事变得很简单

Jetstream 提供了两种密码确认方法:基于重定向的密码确认和基于模态框的密码确认。

基于重定向的密码确认

基于重定向的密码确认通常用于用户需要在访问由你的应用程序渲染的整个界面之前确认他们的密码的情况,比如一个账单设置界面。

这种密码确认形式会将用户重定向到一个专门的密码确认界面,在被重定向到目标页面之前,用户必须确认他们的密码。

基于模态框的密码确认

当你想用户在执行特定操作之前确认他们的密码时,可以使用基于模态框的密码验证,例如启用双因素身份验证。

这种密码确认形式会显示一个模态窗口,让用户在执行预定请求之前确认他们的密码。

重定向密码确认

以下文档将讨论如何在Jetstream中使用基于重定向的密码确认。基于重定向的密码确认通常用于用户在访问由你的应用程序渲染的整个界面之前需要确认他们的密码,比如一个账单设置界面。

这种密码确认形式会将用户重定向到一个专门的密码确认界面,在被重定向到目标页面之前,用户必须确认密码。

Screenshot of Password Confirmation

通过 Livewire 实现重定向密码确认

保护路由

要通过重定向到密码确认界面来实现密码确认,你应该确保需要密码确认的视图的路由和任何执行确认操作的路由都被分配到 password.confirm 中间件。

这个中间件已经包含在 Laravel 的默认安装中,如果用户尝试在未确认密码的情况下访问路由,则会将其重定向到你的应用程序的密码确认界面:

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

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

Livewire 技术栈的密码确认界面的视图位于 resources/views/auth/confirm-password.blade.php。如果有需要,可以自己编辑进行该视图页面的自定义。

确认密码已被确认

接下来,包含一个在调用之前需要密码确认操作的 Livewire 组件应该使用 Laravel\Jetstream\ConfirmsPasswords trait。

在组件中添加了这个 trait 之后,你应该在任何需要密码确认的 Livewire 操作中调用 ensurePasswordIsConfirmed 方法。这应该在相关操作方法的最开始处进行:

/**
 * 为用户启用管理模式。
 */
public function enableAdminMode(): void
{
    $this->ensurePasswordIsConfirmed();

    // ...
}

警告:密码确认过期
用户确认密码后,在你的应用程序的配置选项 auth.password_timeout 定义的秒数过期之前,不需要重新输入他们的密码:

通过 Inertia 实现重定向密码确认

要通过重定向到密码确认界面来实现密码确认,你应该确保需要密码确认的视图的路由和任何执行确认操作的路由都被分配到 password.confirm 中间件。

这个中间件已经包含在 Laravel 的默认安装中,如果用户尝试在未确认密码的情况下访问路由,则会将其重定向到你的应用程序的密码确认界面:

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

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

Inertia 技术栈的密码确认界面的页面位于 resources/js/Pages/Auth/ConfirmPassword.vue。通常,这个视图不需要自定义;但是,你可以根据你自己的应用程序的设计,对这个页面进行一些展示性调整。

警告:密码确认过期
用户确认密码后,在你的应用程序的配置选项 auth.password_timeout 定义的秒数过期之前,不需要重新输入他们的密码:

模态框密码确认

以下文档将讨论如何在 Jetstream 中使用基于模态框的密码确认。模态框密码验证通常用于想在执行特定操作之前让用户确认其密码的情况,例如启用双因素身份验证。

这种密码确认形式会显示一个模态窗口,让用户在执行预定请求之前确认他们的密码。

Screenshot of Password Confirmation

通过 Livewire 实现模态框密码确认

组件准备

如果你使用的是 Livewire 技术栈,包含一个在调用之前需要密码确认操作的 Livewire 组件应该使用 Laravel\Jetstream\ConfirmsPasswords trait。 。

confirms-password Blade组件

接下来,在你的应用程序的用户界面上,你应该把触发操作的按钮嵌入在 confirms-password Blade组件中。confirms-password 封装组件应包含一个 wire:then 指令,指定一旦用户的密码被确认,运行 Livewire wire:then 指令里的操作。

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

确保密码已确认

在你的应用程序的用户界面上添加 confirms-password 组件后,你应该在需要确认密码的 Livewire action 中调用 ensurePasswordIsConfirmed 方法。这应该在相关 action 方法的最开始处进行。

/**
 * 为用户启用管理模式。
 */
public function enableAdminMode(): void
{
    $this->ensurePasswordIsConfirmed();

    // ...
}

警告:密码确认过期
用户确认密码后,在你的应用程序的配置选项 auth.password_timeout 定义的秒数过期之前,不需要重新输入他们的密码:

通过 Inertia 进行模态框密码确认

ConfirmsPassword Vue 组件

如果你使用的是 Inertia 技术栈,你应该使用 Jetstream 提供的 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>

确保密码已被确认

在用户界面中添加了 ConfirmsPassword 组件后,你应该确保执行确认操作的路由被分配了 password.confirm 中间件。这个中间件包含在Laravel的默认安装中:

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

警告:密码确认过期
用户确认密码后,在你的应用程序的配置选项 auth.password_timeout 定义的秒数过期之前,不需要重新输入他们的密码:

自定义密码确认方式

有时,你可能想自定义用户密码在确认时的验证方式。要做到这一点,你可以使用 Fortify::confirmPasswordsUsing 方法。这个方法接受一个闭包,它接收已身份验证的用户实例和请求的 password 输入字段。如果给定用户的密码有效,闭包应该返回 true。通常,这个方法应该从你的 JetstreamServiceProviderboot 方法中调用:

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

/**
 * 启动任何应用程序服务。
 */
public function boot(): void
{
    // ...

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

如果你更喜欢将你的密码确认过程封装在一个类中,而不是一个闭包,你可以将一个 PHP “callable” 数组 传递给 confirmPasswordsUsing 方法:

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

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

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 查看所有版本


暂无话题~