LaraveL 11

Laravel authentication and authorization

تعد مصادقة جوجل في تطبيقات Laravel من الحلول الهامة التي تعزز تجربة المستخدم وتزيد من أمان التطبيق. من أهميتها أنها تتيح للمستخدمين تسجيل الدخول بسرعة وسهولة باستخدام حساباتهم على جوجل، مما يقلل من عبء إنشاء وإدارة حسابات جديدة ويزيد من معدلات التسجيل والاحتفاظ بالمستخدمين. بالإضافة إلى ذلك، توفر جوجل طبقات متعددة من الحماية مثل التحقق بخطوتين وتشفير البيانات، مما يعزز من أمان عملية المصادقة ويقلل من مخاطر الاختراق وسرقة البيانات. 

Laravel authentication and authorization

تثبيت laravel 11

بعد التاكد من تثبيت Composer على نظامك نقوم بتثبيت لارافيل باستخدام الكود التالي

				
					composer create-project laravel/laravel googleAuth
				
			

تثبيت laravel/breeze

				
					composer require laravel/breeze --dev
				
			
				
					php artisan breeze:install
				
			
				
					npm install && npm run dev
				
			

ضبط اعدادات ملف env.

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

تشغيل الهجرة

				
					php artisan migrate
				
			

تثبيت Laravel Socialite

تقدم Laravel Socialite طريقة سهلة ومريحة للمصادقة مع موفري OAuth مثل جوجل.

				
					composer require laravel/socialite

				
			

تهيئة Socialite

نقوم بالتعديل في ملف config/app.php

				
					'providers' => [
    // مزودو الخدمات الآخرين...

    Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
    // الأسماء المستعارة الأخرى...

    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

				
			

إعداد بيانات اعتماد OAuth من جوجل

لإنشاء مشروع في Google Cloud Console

  • انتقل إلى Google Cloud Console.
  • تسجيل الدخول بحساب جوجل الخاص بك
  • انقر على قائمة المشاريع واختر مشروع جديد.
  • أدخل اسم المشروع وانقر على إنشاء.
Laravel authentication and authorization

لتمكين شاشة موافقة OAuth

  • في Google Cloud Console، انتقل إلى APIs & Services > OAuth consent screen.
  • اختر External أو Internal بناءً على متطلباتك وانقر على Create.
  • املأ التفاصيل المطلوبة:
    • اسم التطبيق
    • بريد دعم المستخدم
    • معلومات اتصال المطور
  • انقر على Save and Continue من خلال الأقسام المتعلقة بالنطاقات ومستخدمي الاختبار ما لم تحتاج إلى تخصيصها.
  • أخيرًا، احفظ التكوين الخاص بك.
10027

لإنشاء معرف عميل OAuth 2.0

  • انتقل إلى APIs & Services > Credentials.

  • انقر على Create Credentials > OAuth client ID.

  • اختر Web application كنوع التطبيق.

  • سمِّ معرف العميل الخاص بك (مثلاً، “تطبيق Laravel”).

  • المصادر الأصلية لـ JavaScript المعتمدة:

    • أضف عنوان URL الأساسي لتطبيقك، مثل http://localhost:8000 أو https://yourdomain.com.
    • أضف URI إعادة التوجيه حيث يجب على جوجل إرسال استجابة المصادقة. عادةً، بالنسبة لـ Laravel Socialite، يتبع هذا النمط:
				
					http://localhost:8000/auth/google/callback

				
			

استبدل http://localhost:8000 بعنوان URL الخاص بتطبيقك.

  • انقر على Create.

  • بعد الإنشاء، ستحصل على Client ID و Client Secret. احتفظ بهما بأمان.

  • ستحتاج إليهما في الخطوة التالية.

10028

تهيئة Laravel ببيانات اعتماد جوجل

تحديث ملف .env:

افتح ملف .env الخاص بمشروعك وأضف الأسطر التالية مع بيانات اعتماد OAuth الخاصة بجوجل

				
					GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

				
			

استبدل your-google-client-id و your-google-client-secret بالبيانات التي حصلت عليها من جوجل. أيضًا، عدل GOOGLE_REDIRECT_URI إذا كان عنوان URL اعادة التوجية الخاص بتطبيقك مختلفًا.

تحديث ملف config/services.php : أضف تكوين جوجل إلى ملف services.php

				
					// config/services.php

return [

    // خدمات أخرى...

    'google' => [
        'client_id'     => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect'      => env('GOOGLE_REDIRECT_URI'),
    ],

];

				
			

تحديث نموذج المستخدم والهجرة

لتخزين معلومات المستخدم الخاصة بجوجل، قد تحتاج إلى تحديث جدول users.

				
					php artisan make:migration add_google_fields_to_users_table --table=users

				
			

بعد ذلك نقوم بتحديد الهجرة في الملف المودود بالمسار التالي

database/migrations/xxxx_xx_xx_xxxxxx_add_google_fields_to_users_table.php

				
					// database/migrations/xxxx_xx_xx_xxxxxx_add_google_fields_to_users_table.php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddGoogleFieldsToUsersTable extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('google_id')->nullable()->unique();
            $table->string('avatar')->nullable();
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn(['google_id', 'avatar']);
        });
    }
}

				
			

بعد ذلك نقوم بتشغيل الهجرة

				
					php artisan migrate

				
			

تحديث نموذج المستخدم :

نذهب الي المسار app/Models/User.php ونقوم بتحديث الكود ليصبح بالشكل الاتي

				
					// app/Models/User.php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * السمات التي يمكن تعبئتها.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'google_id',
        'avatar',
    ];

    // طرق النموذج الأخرى...
}

				
			

إنشاء مسارات المصادقة Routes

قم بتعريف المسارات للتوجيه إلى جوجل ومعالجة الرد بعد المصادقة.

افتح ملف routes/web.php:

				
					use App\Http\Controllers\Auth\GoogleController;

Route::get('auth/google', [GoogleController::class, 'redirectToGoogle'])->name('auth.google');
Route::get('auth/google/callback', [GoogleController::class, 'handleGoogleCallback']);

				
			

إنشاء وحدة تحكم جوجل Controller

قم بإنشاء وحدة تحكم للتعامل مع التوجيه إلى جوجل ومعالجة الرد.

				
					php artisan make:controller Auth/GoogleController

				
			

نذهب الي المسار app/Http/Controllers/Auth/GoogleController.php ونقوم بتحديث الكود ليصبح بالشكل الاتي

				
					// app/Http/Controllers/Auth/GoogleController.php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Str;

class GoogleController extends Controller
{
    /**
     * إعادة توجيه المستخدم إلى صفحة مصادقة جوجل.
     *
     * @return \Illuminate\Http\Response
     */
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * الحصول على معلومات المستخدم من جوجل.
     *
     * @return \Illuminate\Http\Response
     */
    public function handleGoogleCallback()
    {
        try {
            $googleUser = Socialite::driver('google')->stateless()->user();
        } catch (\Exception $e) {
            // التعامل مع الخطأ، ربما إعادة التوجيه مع رسالة خطأ
            return redirect('/login')->with('error', 'غير قادر على تسجيل الدخول باستخدام جوجل. يرجى المحاولة مرة أخرى.');
        }

        // التحقق مما إذا كان المستخدم موجودًا بالفعل
        $user = User::where('google_id', $googleUser->id)->first();

        if ($user) {
            // تسجيل دخول المستخدم
            Auth::login($user, true);
            return redirect()->intended('/home'); // إعادة التوجيه إلى الصفحة المقصودة
        } else {
            // التحقق مما إذا كان هناك مستخدم بنفس البريد الإلكتروني
            $existingUser = User::where('email', $googleUser->email)->first();

            if ($existingUser) {
                // ربط حساب جوجل بالمستخدم الموجود
                $existingUser->update([
                    'google_id' => $googleUser->id,
                    'avatar' => $googleUser->avatar,
                ]);
                Auth::login($existingUser, true);
                return redirect()->intended('/home');
            } else {
                // إنشاء مستخدم جديد
                $newUser = User::create([
                    'name' => $googleUser->name,
                    'email' => $googleUser->email,
                    'google_id' => $googleUser->id,
                    'avatar' => $googleUser->avatar,
                    'password' => bcrypt(Str::random(16)), // تعيين كلمة مرور عشوائية
                ]);

                Auth::login($newUser, true);
                return redirect()->intended('/home');
            }
        }
    }
}

				
			

الشرح :

  • redirectToGoogle(): يعيد توجيه المستخدم إلى صفحة موافقة OAuth الخاصة بجوجل.
  • handleGoogleCallback(): يعالج الرد من جوجل بعد المصادقة.
    • يحاول استرجاع معلومات المستخدم من جوجل.
    • يتحقق مما إذا كان هناك مستخدم موجود بـ google_id المسترجع. إذا كان موجودًا، يقوم بتسجيل دخوله.
    • إذا لم يكن موجودًا، يتحقق مما إذا كان هناك مستخدم بنفس البريد الإلكتروني. إذا كان موجودًا، يربط حساب جوجل بالمستخدم الحالي.
    • إذا لم يكن هناك أي من السابق، ينشئ مستخدمًا جديدًا بالمعلومات المقدمة من جوجل.

تحديث واجهة تسجيل الدخول

افتح ملف Blade الخاص بتسجيل الدخول عادةً ما يكون موجودًا في المسار resources/views/auth/login.blade.php ثم أضف زر تسجيل الدخول بجوجل

				
					



<div class="mt-4">
    <a href="{{ route('auth.google') }}" class="btn btn-danger">
        <i class="fab fa-google"></i> تسجيل الدخول باستخدام جوجل
    </a>
</div>

				
			

حماية المسارات باستخدام Middleware المصادقة

تأكد من أن المسارات التي تتطلب المصادقة محمية. عدل المسارات وMiddleware وفقًا لمتطلبات تطبيقك

				
					// routes/web.php

Route::middleware(['auth'])->group(function () {
    Route::get('/home', [HomeController::class, 'index'])->name('home');
    // مسارات محمية أخرى...
});

				
			

اختبار التنفيذ

تشغيل خادم التطوير الخاص بـ Laravel:

				
					php artisan serve

				
			
  • التنقل إلى صفحة تسجيل الدخول:

    افتح http://localhost:8000/login في متصفحك.

  • انقر على زر “تسجيل الدخول باستخدام جوجل”:

    • يجب أن يتم توجيهك إلى شاشة موافقة OAuth الخاصة بجوجل.
    • سجل الدخول باستخدام حساب جوجل الخاص بك.
    • امنح الأذونات المطلوبة.
    • بعد المصادقة الناجحة، يجب أن تتم إعادة توجيهك إلى الصفحة الرئيسية لتطبيقك (أو الصفحة المقصودة)، ويجب أن تكون قد سجلت الدخول.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top