Vue.js（VueCLI）集成Google社交登录成功但无法获取用户信息问题求助

Hey there, let’s work through this issue where your Google login flow works but you can’t pull in user details like name, email, or google_id. I’ve debugged similar setups before, so here are the most common fixes to check step by step:

1. Verify Google OAuth App Permissions #

First, head over to your Google Cloud Console’s OAuth consent screen:

• Make sure you’ve added the required scopes: email, profile, and openid — these are mandatory to access basic user information.
• If your app is still in "Testing" mode, double-check that your test user accounts are listed. Unlisted users won’t return full profile data even if scopes are set.

2. Double-Check vue-social-auth Configuration #

Ensure your plugin initialization includes the correct scope and redirect details:

Vue.use(VueSocialAuth, {
  providers: {
    google: {
      clientId: 'YOUR_GOOGLE_CLIENT_ID',
      redirectUri: 'YOUR_FRONTEND_REDIRECT_URI', // Must match Google Console exactly (http/https, port included)
      scope: 'email profile openid' // Don’t omit these scopes!
    }
  }
})

A mismatched redirect URI or missing scopes is one of the top reasons user data doesn’t come through.

3. Debug Laravel Backend Callback Handling #

If you’re using Laravel Socialite (the standard approach for social auth), confirm your callback code correctly fetches user data:

use Laravel\Socialite\Facades\Socialite;

public function handleGoogleCallback()
{
    $googleUser = Socialite::driver('google')->user();
    
    // Log these values to confirm they exist
    \Log::info('Google User Data:', [
        'name' => $googleUser->name,
        'email' => $googleUser->email,
        'google_id' => $googleUser->id
    ]);
    
    // Make sure your API response passes these values back to the frontend
    return response()->json([
        'user' => [
            'name' => $googleUser->name,
            'email' => $googleUser->email,
            'google_id' => $googleUser->id
        ]
    ]);
}

If you’re handling the OAuth flow manually, ensure you’re making a request to Google’s userinfo endpoint (https://www.googleapis.com/oauth2/v3/userinfo) with the valid access token returned from the initial auth step.

4. Inspect Frontend Response Data #

Add a console log in your frontend login callback to see exactly what data is coming back:

this.$auth.login('google').then(response => {
    console.log('Full login response:', response);
    // Check if response contains a user object with the missing fields
}).catch(error => {
    console.error('Login error:', error);
});

If the frontend response doesn’t include the user details, the issue is in your backend not returning them. If the backend logs show the data but the frontend doesn’t get it, check your CORS settings next.

5. Validate Laravel CORS Settings #

Ensure your Laravel app’s CORS configuration allows your frontend domain to receive the full response. In config/cors.php:

• Set allowed_origins to include your frontend URL (e.g., ['http://localhost:8080'])
• Confirm allowed_headers includes all necessary headers, and supports_credentials is set to true if needed.

Start with the scope and OAuth app settings — those are the most frequent culprits. Then work your way through backend and frontend debugging to trace where the data is getting lost.

内容的提问来源于stack exchange，提问作者Jinal Gajera