به طراح وب خوش آمدید.
در این مقاله به بررسی ویژگیهای Laravel Breeze میپردازیم، آن را با سایر کیتهای شروع لاراول مقایسه میکنیم و شما را در مراحل نصب راهنمایی میکنیم. علاوه بر این، فایل های تولید شده را بررسی می کنیم، فرآیند ثبت نام را سفارشی می کنیم و رابط کاربری (User Interface) را متناسب با نیاز پروژه شما سفارشی می کنیم.
لاراول بریز چیست؟
Laravel Breeze یک بسته پشتیبانی احراز هویت برای لاراول است. با استفاده از آن می توانید در عرض چند دقیقه یک سیستم ورود و ثبت نام کاملاً فعال داشته باشید. این برنامه از Blade، Vue و React پشتیبانی می کند و همچنین دارای یک نسخه API است.
ویژگی های اصلی Laravel Breeze:
- وارد شدن
- ثبت
- بازیابی رمز عبور
- تایید ایمیل
- صفحه نمایه، با ویرایش
یک سوال متداول ممکن است این باشد که چه زمانی باید Breeze را انتخاب کرد و چه زمانی از سایر بسته های احراز هویت لاراول استفاده کرد.
دو بسته مشابه در اکوسیستم لاراول وجود دارد که اگر تازه وارد این فضا شده باشید می تواند گیج کننده باشد.
اولین مورد Laravel Fortify است، که یک پشتیبان احراز هویت بدون هد است و آن را برای ساخت سیستمهای احراز هویت سفارشی بدون رابط کاربری از پیش ساخته شده ایدهآل میکند.
اگر یک رابط کاربری بسیار قابل تنظیم دارید یا اگر فقط مسئول تأیید اعتبار هستید، Fortify را انتخاب کنید.
بسته دیگر Laravel Jetstream است که نقطه شروع پیشرفته تری را برای برنامه های لاراول ارائه می دهد، از جمله ویژگی هایی مانند احراز هویت دو مرحله ای و مدیریت تیم.
برعکس، Laravel Breeze برای توسعه دهندگانی که به دنبال یک چارچوب احراز هویت ساده و در عین حال قابل تنظیم با پشتیبانی از فریم ورک های مختلف جلویی و حداقل هزینه هستند، مناسب است.
نصب لاراول بریز در پروژه تازه لاراول
برای سادگی، بیایید فرض کنیم که قبلاً یک پروژه جدید لاراول ایجاد کرده ایم. اگر به کمک نیاز دارید، میتوانید راهنمای ما را در مورد راهاندازی یک برنامه جدید لاراول در Kinsta دنبال کنید.
پس از آن باید Laravel Breeze را با دستور زیر نصب کنیم:
composer require laravel/breeze --dev
در این آموزش، ما از Blade استفاده می کنیم که موتور قالب پیش فرض لاراول است. برای شروع داربست، دستورات زیر را اجرا کنید:
php artisan breeze:install blade
php artisan migrate
npm install
npm run dev
Laravel Breeze همچنین دارای نسخه های Vue/React/Custom API است، برای استفاده از آنها فقط باید یک پرچم در دستور قرار دهید.
برای شروع Vue:
php artisan breeze:install vue
برای شروع یک واکنش
php artisan breeze:install react
برای راه اندازی API سفارشی
php artisan breeze:install api
پس از نصب لاراول بریز متوجه خواهید شد که چندین فایل در فهرست پروژه شما تولید شده است. این فایلها شامل مسیرها، کنترلکنندهها و نماهایی هستند که احراز هویت، بازنشانی رمز عبور و اعتبارسنجی ایمیل را انجام میدهند. میتوانید این فایلها را کاوش کرده و آنها را متناسب با برنامه خود سفارشی کنید.
نحوه سفارشی سازی رابط کاربری
Laravel Breeze از TailwindCSS در زیر هود استفاده می کند، ما می توانیم از هر کلاس ابزار Tailwind برای سفارشی سازی UI استفاده کنیم.
شما می توانید هر قسمت از رابط کاربری را با ویرایش فایل های مشاهده در آن سفارشی کنید resources/views/auth
; پوشه، برخی از رابط کاربری در اجزای Blade سازماندهی شده است، می توانید آنها را در آن پیدا کنید resources/views/components
پوشه
لوگوی لاراول را به لوگوی سازمان خود تغییر دهید
Laravel Breeze از اجزای Blade برای سازماندهی کدهای قابل استفاده مجدد استفاده می کند. بنابراین، برای مثال، در اینجا نحوه تغییر لوگو آمده است resources/views/components/application-blade.php
فایل.
فایل را باز کنید و محتوای فعلی را با فایل svg خود جایگزین کنید.
باز کن resources/views/components/primary-button.blade.php
فایل. در اینجا می توانید هر گونه تغییری مانند سفارشی کردن دکمه در صفحه ورود برای مطابقت با رنگ برند خود ایجاد کنید.
نحوه تنظیم مراحل ثبت نام
صفحه ثبت نام Laravel Breeze شامل ۴ فیلد از پیش تعریف شده است:
- نام
- پست الکترونیک
- کلمه عبور
- تایید رمز عبور
برای گسترش زمینه هایی که می خواهیم در فرم ثبت نام خود داشته باشیم، باید باز کنیم 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>
اکنون فیلد تلفن در فرم ثبت نام قابل مشاهده است.
تغییر پس زمینه برای ذخیره فیلد تلفن جدید
اکنون باید داده های جدید را در backend پردازش کنیم. این به سه مرحله نیاز دارد: ابتدا یک مهاجرت جدید ایجاد و اجرا کنید، سپس منطق را به کنترل کننده اضافه کنید تا داده ها را ذخیره کند و در نهایت اضافه کنید. phone
به املاک مسکونی در User
مدل.
یک مهاجرت جدید ایجاد کنید که فیلد تلفن را به ما اضافه می کند 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
V 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
{
…
}
پس از آن، هنگام ثبت نام کاربر با لینک تایید ایمیل خود، ایمیلی ارسال می شود.
با این حال، ما هنوز باید میانافزار را به مسیرهای خود اضافه کنیم، جایی که میخواهیم دسترسی به کاربران تایید نشده را محدود کنیم.
ما یک مسیر جدید به نام “فقط تایید شده” ایجاد خواهیم کرد و میان افزار “Authentication” و “verified” را اضافه می کنیم. میانافزار احراز هویت از دسترسی مهمانان جلوگیری میکند و میانافزار تأیید شده بررسی میکند که آیا کاربر ایمیل خود را تأیید کرده است یا خیر.
به عنوان مثال:
Route::get('/only-verified', function () {
return view('only-verified');
})->middleware(['auth', 'verified']);
خلاصه
Laravel Breeze یک ابزار عالی برای راه اندازی سریع یک سیستم احراز هویت برای پروژه لاراول شما است.
با یک چارچوب ساده و در عین حال قابل تنظیم، می توانید بدون نگرانی در مورد فرآیند احراز هویت، بر روی ساخت برنامه خود تمرکز کنید.
اگر به دنبال مکانی برای میزبانی برنامه جدید لاراول خود هستید، راه حل میزبانی لاراول ما را با ویژگی های قدرتمند آن که استقرار و مدیریت برنامه را سریع و آسان می کند، بررسی کنید.