שילוב OAuth 2.0 של פייסבוק: מדריך מעשי

שילוב OAuth 2.0 עם פייסבוק: מדריך מעשי

בעיה נפוצה בשילוב OAuth של פייסבוק היא שהקריאה החוזרת (callback) מחזירה שגיאה או שהאימייל חוזר כ-null. אסימון הגישה (access token) עלול לפג אם לא מוגדר רענון. לפי סטטיסטיקות, עד 30% מהמשתמשים מעדיפים התחברות חברתית, כך ששגיאות כאן הן קריטיות. אנו עובדים על תרחישים כאלה במהלך השילוב — במשך למעלה מ-5 שנים ו-50 פרויקטים עם התחברות חברתית, צברנו פתרונות סטנדרטיים.

התיעוד הרשמי של Facebook Login ממליץ להשתמש ב-OAuth 2.0 עם זרימת הפנייה (redirect flow). בפועל, שילוב באמצעות Laravel Socialite מקצר את זמן הפיתוח פי 3 בהשוואה ליישום ידני ב-cURL, וחוסך עד 35% מתקציב הפרויקט. להלן אנו מפרקים את המחזור המלא: מיצירת אפליקציה ב-Meta ועד ל-Data Deletion Callback — עם קוד עובד על Laravel Socialite וחלופה באמצעות JS SDK.

יצירת אפליקציה ב-Meta Developer Console

1. פתחו developers.facebook.com → My Apps → Create App.
2. בחרו בסוג Consumer (להתחברות ציבורית).
3. הוסיפו את המוצר Facebook Login → Web.
4. בהגדרות Facebook Login, הגדירו Valid OAuth Redirect URIs — זהו ה-endpoint שפייסבוק תפנה אליו משתמשים לאחר אישור. במצב פיתוח, האפליקציה נגישה רק למשתמשי בדיקה. לגישה ציבורית, עליכם לעבור את App Review — תהליך שאורך בין יום ל-5 ימי עסקים.
5. שימו לב ל-App ID ול-App Secret — הם נדרשים בתצורה.

כיצד פועלת זרימת OAuth 2.0 דרך Laravel Socialite?

חשוב: התחברות חברתית דרך Socialite מהירה ופשוטה פי 3 מיישום מאפס. ההתקנה אורכת 2–3 שעות אם יש לכם תבנית מוכנה.

תצורה ובקר:

// config/services.php
'facebook' => [
    'client_id' => env('FACEBOOK_APP_ID'),
    'client_secret' => env('FACEBOOK_APP_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI'),
];

// FacebookAuthController.php
class FacebookAuthController extends Controller
{
    public function redirect(): RedirectResponse
    {
        return Socialite::driver('facebook')
            ->scopes(['email', 'public_profile'])
            ->redirect();
    }

    public function callback(): RedirectResponse
    {
        try {
            $fbUser = Socialite::driver('facebook')->user();
        } catch (\Exception $e) {
            return redirect('/login')->withErrors(['facebook' => 'Ошибка авторизации']);
        }

        // email может отсутствовать, если пользователь зарегистрирован по телефону
        if (!$fbUser->getEmail()) {
            session(['pending_facebook_id' => $fbUser->getId()]);
            return redirect('/auth/complete-profile');
        }

        $user = User::updateOrCreate(
            ['facebook_id' => $fbUser->getId()],
            [
                'name' => $fbUser->getName(),
                'email' => $fbUser->getEmail(),
                'email_verified_at' => now(),
                'avatar' => $fbUser->getAvatar(),
            ]
        );

        Auth::login($user, remember: true);
        return redirect()->intended('/dashboard');
    }
}

מדוע טיפול בחסר אימייל הוא קריטי

פייסבוק לא מבטיחה להחזיר אימייל: אם המשתמש נרשם באמצעות מספר טלפון, // config/services.php 'facebook' => [ 'client_id' => env('FACEBOOK_APP_ID'), 'client_secret' => env('FACEBOOK_APP_SECRET'), 'redirect' => env('FACEBOOK_REDIRECT_URI'), ]; // FacebookAuthController.php class FacebookAuthController extends Controller { public function redirect(): RedirectResponse { return Socialite::driver('facebook') ->scopes(['email', 'public_profile']) ->redirect(); } public function callback(): RedirectResponse { try { $fbUser = Socialite::driver('facebook')->user(); } catch (\Exception $e) { return redirect('/login')->withErrors(['facebook' => 'Ошибка авторизации']); } // email может отсутствовать, если пользователь зарегистрирован по телефону if (!$fbUser->getEmail()) { session(['pending_facebook_id' => $fbUser->getId()]); return redirect('/auth/complete-profile'); } $user = User::updateOrCreate( ['facebook_id' => $fbUser->getId()], [ 'name' => $fbUser->getName(), 'email' => $fbUser->getEmail(), 'email_verified_at' => now(), 'avatar' => $fbUser->getAvatar(), ] ); Auth::login($user, remember: true); return redirect()->intended('/dashboard'); } } יחזיר null. ללא טיפול בתרחיש זה, המשתמש לא יכול להשלים הרשמה. הפתרון הוא לשמור את מזהה הפייסבוק ב-session ולהפנות לטופס הזנת אימייל. לאחר אישור, צרו חשבון וקשרו אותו לרשת החברתית. זהו נוהג סטנדרטי, שניתן לביצוע תוך 1–2 שעות.

אתגרים של OAuth בפייסבוק

תמונת פרופיל — פייסבוק מחזירה קישור זמני. אנו מורידים ושומרים את התמונה מקומית בהתחברות הראשונה כדי למנוע קישורים שבורים לאחר שינוי תמונה. ב-10% מהמקרים, ייתכן שתמונת הפרופיל חסרה לחלוטין — אז אנו משתמשים בתמונת ברירת מחדל.

App Review — כדי לקבל אימייל, הרשאת getEmail() הסטנדרטית מספיקה. אם אתם צריכים נתונים נוספים (חברים, פוסטים), עליכם לעבור את הבדיקה של Meta. אנו עוזרים בהכנת תיעוד תוך 1–2 ימים.

מתי להשתמש ב-JavaScript SDK?

זרימת ההפנייה דרך Socialite מכסה 90% מהתרחישים. ה-JS SDK שימושי אם אתם צריכים דיאלוג התחברות מותאם אישית, התחברות אוטומטית למשתמשים שכבר מחוברים לפייסבוק, או שילוב עם מוצרי פייסבוק אחרים. הבה נשווה בין הגישות:

דוגמה ליישום JS SDK:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: '{{ config("services.facebook.client_id") }}',
      version: 'v19.0'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/ru_RU/sdk.js"></script>
<button onclick="fbLogin()">Войти через Facebook</button>
<script>
  function fbLogin() {
    FB.login(function(response) {
      if (response.authResponse) {
        fetch('/auth/facebook/token', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
          },
          body: JSON.stringify({
            access_token: response.authResponse.accessToken
          }),
        }).then(r => r.json()).then(data => {
          window.location.href = data.redirect;
        });
      }
    }, { scope: 'email,public_profile' });
  }
</script>

בשרת, אמתו את האסימון דרך Graph API:

public function handleToken(Request $request): JsonResponse {
    $response = Http::get('https://graph.facebook.com/me', [
        'access_token' => $request->access_token,
        'fields' => 'id,name,email,picture',
    ]);

    if ($response->failed()) {
        return response()->json(['error' => 'Invalid token'], 401);
    }

    $fbData = $response->json();

    $user = User::updateOrCreate(
        ['facebook_id' => $fbData['id']],
        ['name' => $fbData['name'], 'email' => $fbData['email'] ?? null]
    );

    Auth::login($user);

    return response()->json(['redirect' => '/dashboard']);
}

כיצד ליישם את Data Deletion Callback?

Meta דורשת endpoint למחיקת נתונים. צרו route עם אימות HMAC:

Route::post('/auth/facebook/data-deletion', function (Request $request) {
    // Подтвердить подпись запроса через HMAC-SHA256
    // Удалить или анонимизировать данные пользователя
    return response()->json([
        'url' => 'https://example.com/deletion-status?id=' . $confirmationCode,
        'confirmation_code' => $confirmationCode,
    ]);
});

שגיאות שילוב נפוצות: Redirect URI שהוגדר לא נכון (פייסבוק מחזירה email), חוסר טיפול באימייל null, פגיעת אסימון ללא מנגנון רענון. אנו עובדים על כל התרחישים הללו במהלך הבדיקות — בודקים התחברות מוצלחת, שגיאות וביטול הרשאות.

מה כלול בעבודה?

לוחות זמנים ואחריות

שילוב בסיסי דרך Socialite — 1–2 ימי עסקים. עם JS SDK, טיפול באימייל חסר, Data Deletion Callback ואחסון מקומי של תמונות פרופיל — עד 3 ימים. אנו מציעים אחריות לחודש על כל העבודה. צרו קשר להערכה חינמית של הפרויקט שלכם — נעזור לכם לבחור את שיטת השילוב האופטימלית ולהימנע משגיאות נפוצות. הזמינו הגדרת OAuth וקבלו התחברות יציבה למשתמשים שלכם.

לפרטים נוספים, ראו את התיעוד הרשמי של Facebook Login.