شرح استخدام Laravel Socialite للتوثيق الاجتماعي مع جوجل

تعرف على كيفية استخدام Laravel Socialite لتفعيل التوثيق الاجتماعي عبر جوجل في تطبيقات Laravel. شرح خطوة بخطوة للمبتدئين حول إعداد Socialite، إنشاء مشروع على Google Cloud، تكوين OAuth، وتنفيذ تسجيل الدخول بجوجل مع Laravel.

شرح استخدام Laravel Socialite للتوثيق الاجتماعي مع جوجل

Laravel Socialite هو حزمة من Laravel تساعد المطورين على تنفيذ التوثيق الاجتماعي باستخدام OAuth و OAuth2 في تطبيقاتهم. الحزمة تدعم بشكل مدمج مواقع زي Facebook، Twitter، Google، LinkedIn، GitHub، GitLab، و Bitbucket. ويمكن دعم مزودين آخرين من خلال حزم المجتمع.

في الشرح ده، هنتعرف على:

إيه اللي Socialite بيعمله و إيه اللي مابيعملوش.

إزاي ندمج التوثيق باستخدام جوجل في مشروع Laravel جديد باستخدام Socialite.

إزاي نختبر Socialite.

ملاحظة: تقدر تطلع على المشروع الكامل على GitHub.

Table of contents [Show] [Hide]

1 ما الذي يفعله Laravel Socialite وما لا يفعله؟
- 1. 1 لكن Socialite مش بيعمل الحاجات دي:
2 المتطلبات: إنشاء مشروع على Google Cloud
3 إعداد مشروع Laravel مع Socialite
4 اختبار Socialite باستخدام Pest
5 الخلاصة
6 مصادر إضافية

ما الذي يفعله Laravel Socialite وما لا يفعله؟

Socialite هو حزمة صغيرة، وواجهة برمجته الأساسية تتكون من طريقتين رئيسيتين:

Socialite::driver($authProvider)->redirect(): بترجع المستخدم لمزود التوثيق المطلوب، وبتبعت معاه أي معلومات لازمة عبر معلمات URL.

Socialite::driver($authProvider)->user(): بيجيب بيانات المستخدم اللي رجعها مزود التوثيق ويخليها متاحة.

فيه طرق تانية لإعداد النطاقات والمعلمات الاختيارية. تقدر تقرا أكتر عنهم في وثائق Socialite.

لكن Socialite مش بيعمل الحاجات دي:

❌ مش بيعمل جداول أو أعمدة قاعدة البيانات اللازمة لتخزين بيانات التوثيق الاجتماعي.

❌ مش بيعمل مستخدمين جدد لو مكنوش موجودين في عملية التوثيق.

❌ مش بيقوم بتوثيق المستخدم بعد نجاح عملية OAuth.

❌ مش بيحدث tokens OAuth.

المتطلبات: إنشاء مشروع على Google Cloud

علشان نبدأ، لازم ننشئ تطبيق على جوجل. اتبع الخطوات دي:

أول حاجة، أنشئ مشروع جديد على Google Cloud.

بعد كده، حدد شاشة موافقة OAuth للمشروع. خلي نوع المستخدم على خارجي، وبعد كده فعّل النطاقات دي:

.../auth/userinfo.email

.../auth/userinfo.profile

بعد ما تكمل إعداد شاشة الموافقة، أنشئ معرف عميل OAuth 2.0. احتفظ بـ معرف العميل و سر العميل لأننا هنحتاجهم في المشروع.

إعداد مشروع Laravel مع Socialite

أنشئ مشروع Laravel جديد عن طريق الأمر: laravel new socialite-tests

اختر الخيارات دي من المثبت:

هل ترغب في تثبيت مجموعة أدوات البداية؟: No starter kit

أي إطار اختبار تفضله؟: Pest

أي قاعدة بيانات هتستخدمها؟: SQLite

هل ترغب في تشغيل الهجرات الافتراضية للقاعدة؟: Yes

انتقل إلى مجلد المشروع وقم بتثبيت Socialite عن طريق: cd socialite-testscomposer require laravel/socialite

أنشئ ملف هجرة جديد: php artisan make:migration add_socialite_fields_to_users

أضف الكود ده في ملف الهجرة:

string('google_id')->default(''); $table->string('google_token')->default(''); $table->string('google_refresh_token')->default(''); $table->string('password')->nullable()->change(); }); } public function down(): void { Schema::table('users', function (Blueprint $table) { $table->dropColumn('google_id'); $table->dropColumn('google_token'); $table->dropColumn('google_refresh_token'); $table->string('password')->nullable(false)->change(); }); } };

شغّل الهجرة: php artisan migrate

في ملف config/services.php، أضف الكود ده في آخر مصفوفة الخدمات: 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => '/auth/google/callback', ],

أضف القيم دي في ملف .env باستخدام بيانات الاعتماد من جوجل: GOOGLE_CLIENT_ID="your-google-client-id" GOOGLE_CLIENT_SECRET="your-google-client-secret"

استبدل محتوى routes/web.php بالكود التالي: use App\Models\User; use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Route; use Laravel\Socialite\Facades\Socialite; use Laravel\Socialite\Two\InvalidStateException; use Laravel\Socialite\Two\User as OAuth2User; Route::get('/', function () { return view('welcome'); }); Route::get('/auth/google/redirect', function () { return Socialite::driver('google')->redirect(); }); Route::get('/auth/google/callback', function () { try { /** @var OAuth2User $google_user */ $google_user = Socialite::driver('google')->user(); } catch (InvalidStateException $exception) { abort(400, $exception->getMessage()); } $user = User::updateOrCreate([ 'email' => $google_user->email, ], [ 'google_id' => $google_user->id, 'name' => $google_user->name, 'google_token' => $google_user->token, 'google_refresh_token' => $google_user->refreshToken, ]); Auth::login($user); return redirect('/'); }); Route::get('/auth/logout', function () { Auth::logout(); return redirect('/'); });

استبدل محتوى resources/views/welcome.php بالكود التالي: Laravel Socialite Testing Example

`Laravel Socialite Testing Example`

@if (auth()->check())

User is authenticated.

Name: {{ auth()->user()->name }}

Email: {{ auth()->user()->email }}

Logout

@else

User is not authenticated.

Login with Google

@endif

شغل السيرفر للتجربة: php artisan serve

اختبار Socialite باستخدام Pest

أنشئ اختبار جديد: php artisan make:test AuthRoutesTest

استبدل محتوى الاختبار بـ الكود التالي: getTargetUrl(); $parsed_query = []; parse_str(parse_url($redirect_url)['query'] ?? '', $parsed_query); $response->assertStatus(302); expect($redirect_url)->toStartWith( 'https://accounts.google.com/o/oauth2/auth' ); expect($parsed_query)->toHaveKeys([ 'client_id', 'redirect_uri', 'scope', 'response_type', 'state' ]); }); it('creates and authenticates a user that does not yet exist', function () { $oauth_user = new OAuth2User(); $oauth_user->id = '12345'; $oauth_user->name = 'Tyler Smith'; $oauth_user->email = 'tyler.smith@example.com'; $oauth_user->token = '123456789abcdef'; $oauth_user->refreshToken = '123456789abcdef'; $mock_provider = Mockery::mock(SocialiteProvider::class); $mock_provider->shouldReceive('user')->andReturn($oauth_user); Socialite::shouldReceive('driver') ->with('google') .andReturn($mock_provider); get('/auth/google/callback'); assertAuthenticated(); expect(User::count())->toBe(1); expect(Auth::user()->email)->toBe($oauth_user->email); }); });