كيفية إعداد مصادقة جوجل في تطبيقات لارفيل

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

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

يعمل دمج Google OAuth في تطبيق لارافيل على تبسيط عملية تسجيل الدخول، وتعزيز تفاعل المستخدم، وزيادة مصداقية منصتك. في هذا الدليل، سأرشدك خلال خطوات تنفيذ مصادقة جوجل في تطبيق لارافيل. سنبدأ من إعداد بيانات اعتماد Google API إلى تكوين حزمة Socialite في لارافيل.

فهرس المحتويات

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

• فوائد استخدام مصادقة جوجل في تطبيق لارافيل

• كيفية إعداد تسجيل دخول جوجل في لارافيل

• الاستنتاج

المتطلبات المسبقة

قبل البدء، تأكد من توفر المتطلبات المسبقة التالية:

1. Laravel 11

2. حساب مطور Google.

3. المعرفة الأساسية في Laravel والمصادقة.

4. Composer لإدارة الحزم

بمجرد توفر هذه المتطلبات المسبقة، أنت جاهز تمامًا للانغماس في دمج المصادقة باستخدام Google في تطبيق Laravel الخاص بك.

فوائد استخدام المصادقة بواسطة Google في تطبيق Laravel

هناك العديد من الفوائد لهذا الإعداد. وبعضها كما يلي:

• تكامل مبسط مع Socialite

• مصادقة المستخدم بسلاسة

• تحسين الأمان

• تدفق المستخدم قابل للتخصيص

• تحسين القابلية للتوسعة

• دعم نظام قوي

• سهولة الصيانة

كيفية إعداد تسجيل الدخول باستخدام جوجل في Laravel

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

الخطوة 1: إعداد مشروع Google Cloud

لاستخدام المصادقة من جوجل في تطبيق Laravel الخاص بك، تحتاج أولاً إلى تكوين مشروع Google Cloud. اتبع هذه الخطوات لإعداد مشروعك:

1. قم بزيارة وحدة التحكم في Google Cloud وقم بتسجيل الدخول باستخدام حسابك في Google.

   

2. انقر فوق “اختيار مشروع” في شريط التنقل العلوي. في النافذة المنبثقة، انقر على “مشروع جديد” لإنشاء مشروع جديد وقدم التفاصيل المطلوبة. ثم انقر على إنشاء المشروع.

   

3. بمجرد إنشاء المشروع، افتح قائمة الجانب الأيسر للوحدة واختر APIs & Services > Credentials.

   

4. على صفحة الاعتمادات، انقر على Create Credentials > OAuth Client ID.

   

5. إذا كانت هذه المرة الأولى التي تقوم فيها بإنشاء معرف عميل، فسيطلب منك تكوين شاشة الموافقة. يمكنك تكوين شاشة الموافقة الخاصة بك عن طريق النقر فوق تكوين شاشة الموافقة. إذا كنت قد قمت بتكوين شاشة الموافقة بالفعل، يمكنك تخطي هذه الخطوة.

   • حدد External إذا كان تطبيقك للاستخدام العام، أو Internal إذا كان محدودًا للمستخدمين ضمن منظمتك في Google Workspace.

     

   • املأ التفاصيل المطلوبة، مثل اسم التطبيق، عنوان بريد الدعم الخاص بالمستخدمين، وأي معلومات تتعلق بالعلامة التجارية. انقر فوق حفظ ومتابعة.

     

بعد تكوين شاشة الموافقة، عد إلى الصفحة الاعتمادات واختر معرّف عميل OAuth مرة أخرى.

6. اختر نوع التطبيق كـ تطبيق ويب وقدم اسمًا لاعتمادات العميل (على سبيل المثال، Laravel Social Login).

7. تحت Authorized Redirect URIs، أضف عنوان URL الرد الخاص بتطبيقك:

   • مثال: http://your-app-url.com/callback/google

   • إذا كنت تجرب محلياً، استخدم: http://127.0.0.1:8000/api/auth/google/callback

     

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

الخطوة 2: إنشاء مشروع Laravel جديد وتثبيت حزمة Laravel Socialite

إذا لم يكن لديك مشروع جاهز، يمكنك إنشاء مشروع Laravel جديد باستخدام الأمر أدناه:

composer create-project --prefer-dist laravel/laravel social-auth-example

لدمج المصادقة من Google في مشروع Laravel، سنستخدم Laravel Socialite. Socialite هي حزمة Laravel من الطرف الأول تبسط مصادقة OAuth مع الخدمات الشهيرة مثل Google، Facebook، Twitter، وغيرها.

لتثبيت Socialite، افتح الطرفية الخاصة بك في الدليل الرئيسي لمشروع Laravel الخاص بك وقم بتشغيل الأمر التالي:

composer require laravel/socialite

الخطوة 3: تكوين المتغيرات البيئية

في هذه الخطوة، سنكون مستعدين لتكوين تطبيق Laravel الخاص بنا لاستخدام بيانات مصادقة Google OAuth التي جمعناها في الخطوة 1.

ابحث عن ملف .env في الدليل الرئيسي لمشروعك وأضف المتغيرات البيئية التالية:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

تقدم واستبدل جميع العناصر النائبة بالأسرار.

لنفهم كل متغير بيئي تلو الآخر:

• GOOGLE_CLIENT_ID: معرف فريد لتطبيقك، مقدم من قبل Google.

• GOOGLE_CLIENT_SECRET: مفتاح خاص يستخدمه تطبيقك للمصادقة بشكل آمن مع واجهة برمجة تطبيقات Google.

• GOOGLE_REDIRECT_URL: عنوان URL الذي يقوم Google بتوجيه المستخدمين إليه بعد تسجيل الدخول. يجب أن يتطابق هذا مع عنوان URI التوجيه الذي حددته عند إنشاء بيانات اعتمادك في الخطوة 1.

الخطوة 4: تحديث ملفات التكوين

لتمكين Laravel Socialite من استخدام بيانات اعتماد Google OAuth ، نحتاج إلى تكوين تفاصيل مزود الخدمة في ملف config/services.php.

في ملف services.php ، أضف التكوين التالي لمزود Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // معرف Google الخاص بك
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // مفتاح Google الخاص بك
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // عنوان URL التوجيه الخاص بك من Google
]

الخطوة 5: إنشاء تحكمات ومسارات للمصادقة.

في هذه الخطوة ، سنقوم بإنشاء تحكم للتعامل مع توجيه واستدعاءات Google OAuth وإعداد المسارات اللازمة لتنشيط هذه الأساليب.

قم بتشغيل الأمر Artisan التالي لإنشاء تحكم GoogleAuthController:

php artisan make:controller GoogleAuthController

سينشئ هذا تحكمًا في app/Http/Controllers/GoogleAuthController.php.

استبدل محتويات الملف الجديد GoogleAuthController.php بالشيفرة التالية:

<?php

namespace App\\Http\\Controllers;

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

class GoogleAuthController extends Controller
{
    /**
     * قم بتوجيه المستخدم إلى صفحة المصادقة الخاصة بـ Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * التعامل مع الاستجابة من Google.
     */
    public function callback()
    {
        try {
            // احصل على معلومات المستخدم من Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

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

        if ($existingUser) {
            // قم بتسجيل دخول المستخدم إذا كان موجودًا بالفعل
            Auth::login($existingUser);
        } else {
            // في حالة عدم وجود المستخدم، قم بإنشاء مستخدم جديد وتسجيل دخوله
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // قم بتعيين كلمة مرور عشوائية
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // قم بتوجيه المستخدم إلى لوحة التحكم أو أي صفحة آمنة أخرى
        return redirect('/dashboard');
    }
}

يحتوي هذا المتحكم على وظيفتين:

1. Redirect: يقوم بتوجيه المستخدم إلى صفحة المصادقة الخاصة بـ Google.

2. Callback: يتعامل مع الاستجابة من Google ويوجه المستخدم إلى لوحة التحكم أو أي صفحة آمنة أخرى.

دعنا نعرف طرق redirect و callback في ملف routes/web.php:

use App\\Http\\Controllers\\GoogleAuthController;

// الطريق إلى التوجيه إلى صفحة المصادقة الخاصة بـ Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// الطريق لمعالجة الاستجابة من Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

الخطوة 6: اختبار مصادقة جوجل في Laravel في مشروعك.

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

أولاً، سنضيف الزر التالي الذي يمنح المستخدمين الخيار لتسجيل الدخول باستخدام جوجل:

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

لأغراض الاختبار، قمت بتحديد مسار محمي ولوحة القيادة. سيكون هذا المسار قابلاً للوصول فقط للمستخدمين المصادق عليهم. بعد تسجيل الدخول، سنقوم بتوجيه المستخدمين إلى هذه الصفحة. دعنا نحدد هذا المسار في web.php:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

بعد ذلك، قم بإنشاء ملف عرض blade للوحة القيادة في resources/views/dashboard.blade.php. إليك محتويات الوحدة الرئيسية:

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

هنا، نستخدم مساعد auth()->user() لعرض اسم المستخدم المسجل الذي تم جلبه من حساب جوجل الذي استخدموه لتسجيل الدخول.

الآن، لنجرب تسجيل الدخول.

هذه هي صفحة تسجيل الدخول:

بالنقر على الزر، ستتم إعادتك إلى شاشة موافقة جوجل:

انقر على المتابعة، ويجب أن تتمكن من تسجيل الدخول إلى التطبيق. ستتم إعادتك إلى شاشة مشابهة للأدناه. يمكنك رؤية رسالة الترحيب مع اسم المستخدم.

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

للإشارة إلى التنفيذ الكامل، يمكنك العثور على الشيفرة الكاملة لهذا المشروع على GitHub هنا: Google Login Integration for Laravel – مستودع GitHub

الاستنتاج

لقد قمت الآن بإعداد المصادقة عبر Google في تطبيق Laravel الخاص بك باستخدام Socialite! يمكنك توسيع هذه الطريقة لتشمل مزودي OAuth الآخرين مثل Facebook، Twitter، أو GitHub عن طريق إضافة تكوينات إضافية إلى ملف config/services.php.

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

في حال كنت بحاجة إلى المزيد من خيارات تسجيل الدخول الاجتماعي مثل GitHub، Twitter، و Facebook، يمكنك التفكير في استخدام قوالب Laravel SaaS الجاهزة.

معظم قوالب Laravel SaaS المُبنية مسبقًا تقدم تكاملًا سلسًا مع منصات شهيرة مثل Google، GitHub، Facebook، و Twitter. على سبيل المثال، هناك بعض الموارد المدفوعة ومفتوحة المصدر مثل:

• Laravel Starter Kit (مدفوع)

  • مبني على Tailwind CSS

  • يأتي مع إعداد رابط سحري بنقرة واحدة

  • يدعم مختلف أساليب المصادقة بما في ذلك تسجيل الدخول التقليدي بالبريد الإلكتروني/كلمة المرور

  • مصادقة ثنائية العامل

• SaaS Boilerplate (المصدر مفتوح)

  • توجيه قاعدة بيانات واحدة لعدة جهات

  • لوحة تحكم للمطور

  • إدارة رموز الوصول الشخصية

• Laranuxt (المصدر مفتوح)

  • Nuxt UI مجموعة من المكونات التي تم إنشاؤها بواسطة فريق NuxtJS، مدعومة بواسطة Tailwind CSS

  • مكتبة مصادقة للمساعدة في جلسات المستخدم وتسجيل الدخول/الخروج

  • مثال على مركزية مصادقة

• قالب Laravel Vue (مصدر مفتوح)

  • WebSockets مع Laravel Echo وPusher.

  • Workbox لتطوير تطبيقات الويب التقدمية بشكل أفضل.

  • Laravel GraphQL

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

شكر خاص لـ ديب كومبهار، مطور Laravel متمرس ومهووس، الذي ساعدني في إعداد هذا المقال.

آمل أن يساعدك هذا المقال في إعداد تسجيل الدخول باستخدام Google مع Laravel.