在Laravel中使用Breeze进行认证

本文将深入探讨Laravel Breeze的特点，将其与其他Laravel入门套件进行比较，并指导你完成安装过程。此外，我们将探讨生成的文件，定制注册流程，并调整UI(用户界面)以适应你的项目需求。

1. 什么是Laravel Breeze
2. 在一个新的Laravel项目中安装Laravel Breeze
3. 如何自定义用户界面
4. 如何定制注册流程
5. 修改后台以存储新的电话字段
6. 如何启用电子邮件验证

什么是Laravel Breeze

Laravel Breeze是一个Laravel的用户安全验证脚手架包。使用它，你可以在几分钟内拥有一个完整的登录和注册系统。它支持Blade, Vue, 和React，也有一个API版本。

Laravel Breeze的主要功能是：

• 登录
• 注册
• 密码重置
• 电子邮件验证
• 个人资料页, 有编辑功能

一个常见的问题可能是什么时候选择Breeze，什么时候使用其他Laravel用户安全认证包。

在Laravel生态系统中，有两个类似的软件包，如果你是这个领域的新手，可能会感到困惑。

第一个是Laravel Fortify，它是一个无头的认证后端，使其成为构建自定义认证系统的理想选择，没有一个预先构建的UI。

如果你有非常定制的UI需求，或者你只负责认证的后端，请选择Fortify。

另一个软件包是Laravel Jetstream，它为Laravel应用程序提供了一个更高级的起点，包括双因素认证和团队管理等功能。

相比之下, Laravel Breeze最适合那些寻找一个简单但可定制的认证支架的开发者，它支持各种前端框架，开销最小。

在一个新的Laravel项目中安装Laravel Breeze

为了简单起见, 假设我们已经创建了一个新的Laravel项目。

之后, 我们需要用以下命令来安装Laravel Breeze：

composer require laravel/breeze --dev

在本教程中, 我们将使用Blade，它是Laravel的默认模板引擎。要启动脚手架，请运行这些命令：

php artisan breeze:install blade
php artisan migrate
npm install
npm run dev

Laravel Breeze也有Vue / React / 自定义API版本，要使用它们，你只需要在命令中加一个标志。

用于Vue运行：

php artisan breeze:install vue

用于React运行：

php artisan breeze:install react

用于自定义API运行：

php artisan breeze:install api

在安装Laravel Breeze之后，你会注意到在你的项目目录中已经生成了几个文件。这些文件包括路由，控制器，以及处理认证，密码重置，和电子邮件验证的视图。你可以探索这些文件并定制它们以适应你的应用程序的要求。

如何定制用户界面

Laravel Breeze使用TailwindCSS，我们可以使用任何Tailwind工具类来定制用户界面。

你可以通过编辑 resources/views/auth ；文件夹中的视图文件来定制UI的每个部分, UI的某些部分被组织成Blade组件, 你可以在 resources/views/components 文件夹中找到这些组件.

将Laravel的Logo改为我们自己的Logo

Laravel Breeze使用Blade组件来组织多次使用的代码。因此, 例如, 这里你可以改变 resources/views/components/application-blade.php 文件中的标志。

打开该文件，用你的svg文件替换当前内容。

改变主按钮的颜色

打开 resources/views/components/primary-button.blade.php 文件。你可以在这里做任何修改，比如将登录页面的按钮定制为你的品牌颜色。

主按钮改为品牌颜色

如何定制注册流程

Laravel Breeze的注册页面有4个预定义的字段：

1. 姓名
2. 电子邮件
3. 密码
4. 密码确认

注册页预定义字段

为了扩展我们希望注册表单具有的字段，我们需要打开 resources/views/auth/register.blade.php 文件。

为了继续我们的例子，我们将在电子邮件字段之后制作一个电话字段。要做到这一点，请在电子邮件字段后添加以下代码：

<div class="mt-4">
<x-input-label for="phone" :value="__('Phone')" />
<x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
<x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

电话字段现在在注册表中是可见的。

添加了电话字段

修改后端以存储新的电话字段

我们现在需要在后端处理新的数据。这需要三个步骤：首先，创建并运行一个新的迁移，然后在控制器中添加逻辑来存储数据，最后，在 User 模型的可填充属性中添加 phone 。

创建一个新的迁移，为我们的 users 表添加一个电话字段。

php artisan make:migration add_phone_field_to_users_table

打开创建的文件，添加一个名为 “phone” 的字符串字段：

Schema::table('users', function (Blueprint $table) {
$table->string('phone')->nullable();
});

之后，运行迁移：

php artisan migrate

为了存储电话字段，我们需要修改 RegisteredUserController.php ，在 store 方法中做这些修改：

$request->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
‘phone’ => [‘required’, ‘string’, ‘max:255’],
'password' => ['required', 'confirmed', Rules\Password::defaults()],
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
‘phone’ => $request->phone,
'password' => Hash::make($request->password),
]);

不要忘记将 phone 字段添加到用户模型的可填充属性中。

protected $fillable = [
'name',
'email',
'phone',
'password',
];

就这样，现在我们有了修改后的登记表

如何启用电子邮件验证

电子邮件验证是检查和验证用户在注册表格中提供的电子邮件的过程。

为了启用这个功能，我们需要在我们的用户模型中实现 MustVerifyEmail 接口。

use Illuminate\Contracts\Auth\MustVerifyEmail;
…
class User extends Authenticatable implements MustVerifyEmail
{
…
}

之后，当用户注册时，将发送一封电子邮件，其中有验证其电子邮件的链接。

然而，我们仍然需要在我们的路由中添加一个中间件，在那里我们要限制对未验证的用户的访问。

我们将创建一个名为 “only-verified” 的新路由，我们将添加 “auth” 和 “verified” 中间件。auth中间件防止客人访问，而verified中间件则检查用户是否已经验证了他们的电子邮件。

下面是一个例子：

Route::get('/only-verified', function () {
return view('only-verified');
})->middleware(['auth', 'verified']);

小结

Laravel Breeze是一个伟大的工具, 可以为你的Laravel项目快速建立一个认证系统.

凭借其简单而可定制的脚手架, 你可以专注于构建你的应用程序而不必担心认证过程.