تعد مصادقة جوجل في تطبيقات Laravel من الحلول الهامة التي تعزز تجربة المستخدم وتزيد من أمان التطبيق. من أهميتها أنها تتيح للمستخدمين تسجيل الدخول بسرعة وسهولة باستخدام حساباتهم على جوجل، مما يقلل من عبء إنشاء وإدارة حسابات جديدة ويزيد من معدلات التسجيل والاحتفاظ بالمستخدمين. بالإضافة إلى ذلك، توفر جوجل طبقات متعددة من الحماية مثل التحقق بخطوتين وتشفير البيانات، مما يعزز من أمان عملية المصادقة ويقلل من مخاطر الاختراق وسرقة البيانات.
Laravel authentication and authorization
تثبيت laravel 11
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.
- تسجيل الدخول بحساب جوجل الخاص بك
- انقر على قائمة المشاريع واختر مشروع جديد.
- أدخل اسم المشروع وانقر على إنشاء.
لتمكين شاشة موافقة OAuth:
- في Google Cloud Console، انتقل إلى APIs & Services > OAuth consent screen.
- اختر External أو Internal بناءً على متطلباتك وانقر على Create.
- املأ التفاصيل المطلوبة:
- اسم التطبيق
- بريد دعم المستخدم
- معلومات اتصال المطور
- انقر على Save and Continue من خلال الأقسام المتعلقة بالنطاقات ومستخدمي الاختبار ما لم تحتاج إلى تخصيصها.
- أخيرًا، احفظ التكوين الخاص بك.
لإنشاء معرف عميل 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، يتبع هذا النمط:
- أضف عنوان URL الأساسي لتطبيقك، مثل
http://localhost:8000/auth/google/callback
استبدل http://localhost:8000
بعنوان URL الخاص بتطبيقك.
انقر على Create.
بعد الإنشاء، ستحصل على Client ID و Client Secret. احتفظ بهما بأمان.
ستحتاج إليهما في الخطوة التالية.
تهيئة 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
*/
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 ثم
أضف زر تسجيل الدخول بجوجل
حماية المسارات باستخدام 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 الخاصة بجوجل.
- سجل الدخول باستخدام حساب جوجل الخاص بك.
- امنح الأذونات المطلوبة.
- بعد المصادقة الناجحة، يجب أن تتم إعادة توجيهك إلى الصفحة الرئيسية لتطبيقك (أو الصفحة المقصودة)، ويجب أن تكون قد سجلت الدخول.