在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專案快速建立一個認證系統.

憑藉其簡單而可定製的腳手架, 你可以專注於構建你的應用程式而不必擔心認證過程.