איך להגדיר אימות גוגל ביישומים של Laravel

בעולם הדיגיטלי הזה, חשוב שהיישומים שלך יהיו בעלי תהליך הזדהות חלק ובטוח. זה עוזר לשפר את חוויית המשתמש ואת אבטחת האפליקציות שלך.

אימות גוגל הוא אחד מהדרכים הכי מהימנות ונוחות עבור משתמשים להתחבר לאתר באמצעות חשבון הגוגל שלהם. וזה אומר שהם לא צריכים לזכור שם משתמש וסיסמה נוספים.

שילוב של OAuth גוגל באפליקציית לאראבל שלך מפשט את תהליך ההתחברות, מעודד מעורבות של משתמשים ומגביר את המהימנות של הפלטפורמה שלך. במדריך זה, אני אדריך אותך דרך הצעדים של יישום אימות גוגל באפליקציית Laravel. נלך מהגדרת האישורים של ה-API של גוגל ועד לתצורת חבילת Socialite של Laravel.

תוכן העניינים

• דרישות מוקדמות

• יתרונות השימוש באימות גוגל באפליקציית Laravel

• איך להגדיר התחברות גוגל בלאראבל

• מסקנה

דרישות קדם

לפני שתתחיל, וודא שיש לך את הדרישות הבאות:

1. Laravel 11

2. חשבון מפתחן של Google.

3. ידע בסיסי ב-Laravel ואימות.

4. Composer לניהול חבילות

כאשר יש לך את הדרישות הללו מוכנות, אתה מוכן להתחיל לשבוץ אימות של Google באפליקצית ה-Laravel שלך.

יתרונות של שימוש באימות של Google באפליקציה של Laravel

ישנם יתרונות רבים להגדרה זו. כמה מהם הם:

• שילוב פשוט עם Socialite

• אימות משתמש בלתי פרוע

• שיפור בטיחות

• זריזות זריזה למשתמש

• סייעות מוגברת

• תמיכה חזקה באקוסיסטם

• תחזוקה קלה יותר

כיצד להגדיר כניסה דרך Google ב-Laravel

בין אם אתם עובדים על פרויקט אישי או על אפליקציה מוכנה לייצור, עליכם לעקוב אחר השלבים הללו כדי לשלב אינטגרציה חלקה של אימות Google. בואו נתחיל.

שלב 1: הגדירו פרויקט ב-Google Cloud

כדי להשתמש באימות Google באפליקציית Laravel שלכם, עליכם להגדיר פרויקט ב-Google Cloud תחילה. עקבו אחר השלבים הללו כדי להגדיר את הפרויקט שלכם:

1. כנסו ל-קונסולת Google Cloud והתחברו עם החשבון שלכם ב-Google.

   

2. לחצו על “בחר פרויקט” בתפריט הניווט העליון. בתיבת הדווחים, לחצו על “פרויקט חדש” כדי ליצור פרויקט חדש ולספק את הפרטים הנדרשים. לאחר מכן לחצו על צור פרויקט.

   

3. לאחר שיצרת את הפרויקט, פתח את התפריט בצד השמאלי של הקונסולה ובחר APIs & Services > אישורים.

   

4. בעמוד אישורים, לחץ על צור אישורים > OAuth Client ID.

   

5. אם זה הפעם הראשונה שלך ביצירת מזהה לקוח, יבקש ממך להגדיר את מסך ההסכמה. תוכל להגדיר את מסך ההסכמה שלך על ידי לחיצה על הגדר מסך ההסכמה. אם כבר הגדרת את מסך ההסכמה, תוכל לדלג על שלב זה.

   • בחר חיצוני אם האפליקציה שלך מיועדת לשימוש ציבורי, או פנימי אם היא מוגבלת למשתמשים בארגון Google Workspace שלך.

     

   • מלא את הפרטים הנדרשים, כמו שם האפליקציה, כתובת האימייל לתמיכה במשתמשים, וכל מידע על סימון סמלים. לחץ על שמור והמשך.

     

לאחר הגדרת מסך הסכמה, חזור לעמוד אישורים ובחר שוב מזהה לקוח OAuth.

6. בחר ב סוג האפליקציה כ אפליקציית Web וספק שם עבור פרטי הלקוח (לדוגמה, Laravel Social Login).

7. בתחתית Authorized Redirect URIs, הוסף את כתובת ה־URL ל־callback של האפליקציה שלך:

   • דוגמה: http://your-app-url.com/callback/google

   • אם אתה בודק באופן מקומי, השתמש: http://127.0.0.1:8000/api/auth/google/callback

     

8. לחץ על צור, ו־Google תייצר Client ID ו־Client Secret עבור הפרויקט שלך. שמור על הפרטים הללו, מאחר והם יידרשו בשלבים הבאים.

שלב 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 כך שישתמש באישורי OAuth של Google שאספנו בשלב 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: מפתח פרטי המשמש על ידי האפליקציה שלך לאימות עצמה בצורה בטוחה עם API של Google.

• GOOGLE_REDIRECT_URL: ה-URL שבו Google מפנה משתמשים לאחר שהם מתחברים. עליו להתאים לכתובת ההפניה שציינת בעת יצירת האישורים בשלב 1.

שלב 4: עדכון קבצי התצורה

כדי לאפשר ל-Laravel Socialite להשתמש באישורי OAuth של Google, עלינו להגדיר את פרטי ספק בקובץ config/services.php.

בקובץ services.php, הוסף את ההגדרה הבאה עבור ספק Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // ה-Client ID שלך של Google
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // ה-Client Secret שלך של Google
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // כתובת ההפניה שלך של Google
]

שלב 5: יצירת בקרים ונתיבים עבור אימות.

בשלב זה, ניצור בקר לטיפול בהפניות ובקרים של OAuth של Google ונקבע את הנתיבים הנחוצים כדי להפעיל את השיטות אלו.

הריץ את הפקודה הבאה של 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
{
    /**
     * Redirect the user to Google’s OAuth page.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Handle the callback from Google.
     */
    public function callback()
    {
        try {
            // Get the user information from Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Check if the user already exists in the database
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Log the user in if they already exist
            Auth::login($existingUser);
        } else {
            // Otherwise, create a new user and log them in
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Set a random password
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redirect the user to the dashboard or any other secure page
        return redirect('/dashboard');
    }
}

מחלק זה מכיל שני פונקציות:

1. Redirect: מפנה את המשתמש לדף OAuth של Google.

2. Callback: מטפל בתגובה מ-Google ומפנה את המשתמש ללוח המחויב או לעמוד מאובטח אחר.

בואו נגדיר את הנתיבים של redirect ו-callback בקובץ routes/web.php:

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

// נתיב למעבר לדף OAuth של 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: בדוק את אימות Google של Laravel בפרויקט שלך.

הגדרנו את אימות Google, אז עכשיו הגיע הזמן לבדוק אותו כדי לוודא שהוא פועל בצורה חלקה. בשלב זה, נשתמש בכפתור כניסה שמפנה את המשתמש לעמוד האימות של Google ומחזיר אותו לנתיב מוגן לאחר כניסה מוצלחת.

ראשית, נוסיף את הכפתור הבא שנותן למשתמשים את האפשרות להיכנס עם Google:

<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>

למטרות בדיקה, הגדרתי נתיב מוגן וdashboard. נתיב זה יהיה נגיש רק למשתמשים שמאומתים. לאחר הכניסה, נפנה את המשתמשים לדף זה. בואו נגדיר את הנתיב הזה ב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() כדי להציג את שמו של המשתמש המחובר, שנשלף מהחשבון של Google שבו השתמשו כדי להיכנס.

עכשיו, בואו ננסה להיכנס.

זו היא עמוד הכניסה:

לחיצה על הכפתור תעביר אותך למסך ההסכמה של Google:

לחץ על המשך, ואתה אמור להיות מחובר לאפליקציה. תופיע מסך כמו למטה. תוכל לראות את הודעת הברכה עם שם המשתמש.

זהו! הצלחת ליישם ולבדוק את אימות Google בפרויקט Laravel שלך. עכשיו המשתמשים שלך יכולים להיכנס באמצעות חשבונות Google שלהם, מה שמשפר גם את האבטחה וגם את הנוחות.

כדי להתייחס למימוש המלא, ניתן למצוא את קוד המקור המלא של פרויקט זה ב-GitHub כאן: שילוב התחברות דרך Google עבור 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 (פרימיום)

  • מבוסס על Tailwind CSS

  • כולל הגדרת קישור קסם בלחיצה אחת

  • תומך בשיטות אימות שונות כולל התחברות מסורתית באמצעות דוא"ל/סיסמה

  • אימות 2FA

• תבנית SaaS (קוד פתוח)

  • ריבוי דיירים במאגר נתונים יחיד

  • לוח בקרה למפתחים

  • ניהול טוקנים אישיים לגישה

• Laranuxt (קוד פתוח)

  • Nuxt UI אוסף רכיבים שנבנה על ידי צוות NuxtJS, מופעל על ידי Tailwind CSS

  • ספריית אימות לסיוע בניהול מושבים של משתמשים וחיבור/ניתוק

  • ממשק ביניים לדוגמה לאימות

• Laravel Vue Boilerplate (קוד פתוח)

  • WebSockets עם Laravel Echo ו-Pusher.

  • Workbox לפיתוח PWA טוב יותר.

  • Laravel GraphQL

שימוש באחד מה-Boilerplates של Laravel SaaS יכול להאיץ את זרימת העבודה שלך מכיוון שאין צורך להגדיר הכל מההתחלה.

תודה מיוחדת לדיפ קוםבהארה, מפתח Laravel מנוסה ונלהב, שעזר לי בהכנת המאמר הזה.

אני מקווה שהמאמר הזה יעזור לכם בהגדרת כניסת Google עם Laravel.