إتقان Laravel Breeze: انطلاقك السريع نحو مصادقة آمنة

إتقان Laravel Breeze: انطلاقك السريع نحو مصادقة آمنة #

Laravel Breeze هو تطبيق بسيط ومفتوح المصدر لجميع ميزات المصادقة في Laravel، بما في ذلك تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني وتأكيد كلمة المرور. إنه مبني على Tailwind CSS، ويوفر نقطة بداية جميلة وعملية لواجهة المستخدم لتطبيقك.

سيرشدك هذا الدليل خلال تثبيت Laravel Breeze وتكوينه وفهمه، مما يساعدك على دمج مصادقة قوية في مشاريع Laravel الخاصة بك بسهولة.

ما هو Laravel Breeze؟ #

يعمل Laravel Breeze كحزمة بداية (starter kit) بسيطة وواضحة لتنفيذ المصادقة في تطبيقات Laravel. يقوم بتوليد المتحكمات (controllers) والمسارات (routes) والعروض (views) اللازمة (أو نقاط نهاية API) لمهام المصادقة الشائعة. على عكس Laravel Jetstream، يقدم Breeze نهجًا أبسط وغير مقيد، مما يمنح المطورين مزيدًا من التحكم في حزمة الواجهة الأمامية والتخصيص.

الميزات الرئيسية:

• المصادقة: تسجيل الدخول، التسجيل، إعادة تعيين كلمة المرور، التحقق من البريد الإلكتروني، تأكيد كلمة المرور.
• الواجهة الأمامية: مبني باستخدام Tailwind CSS، ويوفر حزم Blade، Livewire، React، أو Vue.
• مصادقة API: دعم جاهز لمصادقة API باستخدام Laravel Sanctum.
• البساطة: تعليمات برمجية أقل، وأسهل في التخصيص لتلبية الاحتياجات المحددة.

المتطلبات الأساسية #

قبل أن نبدأ، تأكد من تثبيت ما يلي على نظامك:

• PHP: الإصدار 8.1 أو أعلى
• Composer: أحدث إصدار
• Node.js و npm: أحدث إصدار LTS (لتجميع الأصول)
• قاعدة بيانات: MySQL، PostgreSQL، SQLite، إلخ. (تم تكوينها في .env)
• Laravel Installer (اختياري): composer global require laravel/installer

الخطوة 1: إنشاء مشروع Laravel جديد #

إذا لم يكن لديك مشروع Laravel موجود، فقم بإنشاء واحد باستخدام Composer:

composer create-project laravel/laravel my-breeze-app
cd my-breeze-app

الخطوة 2: تثبيت Laravel Breeze #

بمجرد إعداد مشروعك، قم بتثبيت Laravel Breeze عبر Composer:

composer require laravel/breeze

الخطوة 3: تثبيت حزمة Breeze الأساسية (Scaffolding) #

بعد تثبيت حزمة Composer، يمكنك تثبيت حزمة Breeze الأساسية باستخدام أمر Artisan breeze:install. سيقوم هذا الأمر بنشر عروض المصادقة والمسارات والمتحكمات والموارد الأخرى لتطبيقك.

عند المطالبة، يمكنك اختيار حزمة الواجهة الأمامية المفضلة لديك. لهذا الدليل، سنركز على حزمة Blade، وهي الافتراضية.

php artisan breeze:install

سيُطلب منك اختيار حزمة:

1. Blade مع Alpine.js (افتراضي)
2. Livewire مع Alpine.js
3. React مع Inertia.js
4. Vue مع Inertia.js
5. API scaffolding

لتطبيق ويب أساسي، اضغط Enter لاختيار "Blade with Alpine.js" الافتراضي. سيُسأل أيضًا عما إذا كنت تريد دعم الوضع المظلم (Dark Mode) وما إذا كنت ترغب في تثبيت Pest للاختبار.

بعد التثبيت، سترى رسالة تطالبك بتثبيت تبعيات NPM وتشغيل بناء:

npm install
npm run dev

سيقوم الأمر npm run dev بتجميع أصول الواجهة الأمامية الخاصة بك (CSS عبر Tailwind CSS و JavaScript عبر Vite). للإنتاج، ستقوم بتشغيل npm run build.

الخطوة 4: تكوين قاعدة البيانات والترحيل #

تأكد من تكوين اتصال قاعدة البيانات الخاص بك بشكل صحيح في ملف .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_breeze_app
DB_USERNAME=root
DB_PASSWORD=

بمجرد التكوين، قم بتشغيل ترحيلات قاعدة البيانات لإنشاء الجداول الضرورية، بما في ذلك جدول users:

php artisan migrate

الخطوة 5: بدء تشغيل خادم التطوير #

يمكنك الآن بدء تشغيل خادم تطوير Laravel:

php artisan serve

قم بزيارة http://127.0.0.1:8000 في متصفحك. يجب أن ترى الآن روابط "Log in" و "Register" في الزاوية العلوية اليمنى. انقر على "Register" لإنشاء مستخدم جديد واختبار تدفق المصادقة.

فهم بنية Breeze #

ينشر Laravel Breeze العديد من الملفات والدلائل التي تعد حاسمة لوظيفته:

• app/Http/Controllers/Auth/: يحتوي على المتحكمات لمعالجة تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني وتأكيد كلمة المرور.
• routes/auth.php: يحدد جميع المسارات المتعلقة بالمصادقة (مثل /register, /login, /forgot-password). يتم عادةً تضمين هذه المسارات في routes/web.php.
• resources/views/auth/: قوالب Blade لجميع عروض المصادقة (تسجيل الدخول، التسجيل، نسيت كلمة المرور، إلخ.).
• resources/views/components/: مكونات Blade قابلة لإعادة الاستخدام تُستخدم عبر عروض المصادقة وأجزاء أخرى من تطبيقك، مثل auth-card.blade.php, input-error.blade.php, إلخ.
• resources/css/app.css & resources/js/app.js: ملفات CSS و JavaScript الرئيسية لتطبيقك، ودمج Tailwind CSS و Alpine.js.
• tailwind.config.js: ملف تكوين Tailwind CSS، حيث يمكنك تخصيص نظام التصميم الخاص بك.
• vite.config.js: تكوين Vite لتجميع الأصول.
• database/migrations/: يتضمن ترحيل create_users_table.php، من بين ترحيلات أخرى.

تخصيص Laravel Breeze #

إحدى نقاط قوة Breeze هي سهولة تخصيصه.

1. تخصيص العروض (Views)

نظرًا لأن Breeze يستخدم قوالب Blade، يمكنك تعديل أي ملف مباشرة داخل resources/views/auth/ و resources/views/components/. على سبيل المثال، لتغيير تخطيط صفحة تسجيل الدخول:

• افتح resources/views/auth/login.blade.php.
• عدّل HTML وتوجيهات Blade حسب الحاجة.

يمكنك أيضًا إنشاء مكونات جديدة أو تعديل المكونات الموجودة في resources/views/components/.

2. تخصيص منطق المصادقة

يوجد منطق المصادقة الأساسي في دليل app/Http/Controllers/Auth/. على سبيل المثال، لتعديل عملية التسجيل:

• افتح app/Http/Controllers/Auth/RegisteredUserController.php.
• تتعامل طريقة store مع إنشاء المستخدم. يمكنك إضافة قواعد تحقق مخصصة أو حقول إضافية أو إجراءات ما بعد التسجيل هنا.

مثال: إضافة حقل username أثناء التسجيل

1. الترحيل (Migration): أضف عمود username إلى جدول users الخاص بك.

   Schema::table('users', function (Blueprint $table) {
       $table->string('username')->unique()->after('name');
   });
   

   Run php artisan migrate:fresh --seed (or create a new migration) if you want to apply changes to an existing database, but be careful as it will wipe all data.

2. العرض (View): أضف حقل إدخال اسم مستخدم إلى resources/views/auth/register.blade.php.

   <!-- Add this after the Name input -->
   <div class="mt-4">
       <x-input-label for="username" :value="__('اسم المستخدم')" />
       <x-text-input id="username" class="block mt-1 w-full" type="text" name="username" :value="old('username')" required autocomplete="username" />
       <x-input-error :messages="$errors->get('username')" class="mt-2" />
   </div>
   

3. المتحكم (Controller): حدث app/Http/Controllers/Auth/RegisteredUserController.php.

   // في طريقة store، حدّث قواعد التحقق ومنطق إنشاء المستخدم
   $request->validate([
       'name' => ['required', 'string', 'max:255'],
       'username' => ['required', 'string', 'max:255', 'unique:'.User::class], // إضافة التحقق من اسم المستخدم
       'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
       'password' => ['required', 'confirmed', Rules\Password::defaults()],
   ]);
   
   $user = User::create([
       'name' => $request->name,
       'username' => $request->username, // إضافة اسم المستخدم
       'email' => $request->email,
       'password' => Hash::make($request->password),
   ]);
   

3. Customizing Routes

Authentication routes are defined in routes/auth.php. You can modify existing routes or add new ones here. For example, if you want to change the URL path for registration from /register to /signup, you would edit routes/auth.php.

// In routes/auth.php
// Replace
Route::get('register', [RegisteredUserController::class, 'create'])->name('register');
Route::post('register', [RegisteredUserController::class, 'store']);
// With
Route::get('signup', [RegisteredUserController::class, 'create'])->name('signup');
Route::post('signup', [RegisteredUserController::class, 'store']);

Remember to also update any links referencing route('register') in your views.

Laravel Breeze with API (Sanctum) #

Laravel Breeze can also scaffold an API-only authentication backend using Laravel Sanctum, perfect for SPAs (Single Page Applications) or mobile applications.

To install Breeze with API scaffolding:

php artisan breeze:install --api

This command will:

• Install Laravel Sanctum.
• Generate API authentication routes in routes/auth.php (for stateless API authentication via Sanctum tokens).
• Remove frontend views and assets, providing only the backend API endpoints.

You'll need to run php artisan migrate afterwards.

For API authentication, you would typically make requests to /api/login, /api/register, etc., and then use the generated Sanctum tokens for subsequent authenticated requests.

Conclusion #

Laravel Breeze provides an excellent, lightweight starting point for implementing robust authentication in your Laravel applications. Its simplicity and flexibility make it ideal for developers who prefer more control over their frontend and authentication logic without the overhead of a full-featured starter kit like Jetstream.

By following this tutorial, you should now be equipped to install, configure, and customize Laravel Breeze to fit your project's specific needs, ensuring a secure and user-friendly authentication experience.

Next Steps:

• Explore more about Laravel Sanctum for advanced API authentication.
• Dive deeper into Tailwind CSS for styling your application.
• Learn about Laravel policies and gates for authorization.