Facebook JavaScript SDK登录后重定向失效问题求助

Hey there! Let’s work through that Facebook login redirect problem you’re dealing with—this is a super common gotcha, so I’ll walk you through the most likely fixes based on what you’ve shared.

First: Verify Facebook App Dashboard Settings #

This is the #1 culprit for redirect failures, so let’s start here:

• Go to your Facebook App Dashboard, navigate to Products > Facebook Login > Settings
• Look for the "Valid OAuth Redirect URIs" field and make sure your target URL is added here.
  • Important: The URL must match exactly what you’re using in code—include http:///https://, port numbers (for local dev like localhost:3000), and any trailing slashes if present. Facebook will block redirects to URLs not listed here.

Update Your Login Code to Include Redirect Logic #

Since you mentioned the statusChangeCallback function, let’s make sure you’re handling the post-login redirect correctly. Here’s how to adjust your code:

1. Add redirect_uri to FB.login() (if using client-side login) #

If you’re using the client-side FB.login() method, explicitly pass your target URL in the options:

FB.login(function(response) {
  statusChangeCallback(response);
}, {
  scope: 'public_profile,email', // Add any permissions you need
  redirect_uri: 'https://your-target-url.com' // Replace with your actual URL
});

2. Trigger Manual Redirect in statusChangeCallback #

Once Facebook confirms the user is logged in (response.status === 'connected'), use window.location.href to send them to your desired page. You can even fetch user data first before redirecting:

function statusChangeCallback(response) {
  if (response.status === 'connected') {
    // Optional: Fetch user details first
    FB.api('/me', { fields: 'name,email' }, function(userData) {
      console.log('User data:', userData);
      // Now redirect to your target URL
      window.location.href = 'https://your-target-url.com';
    });
  } else {
    // Handle unauthenticated state
    console.log('User not logged in');
  }
}

Additional Checks #

• Browser Popup Blockers: Make sure your login flow is triggered by a user click (like a button press). Browsers often block automatic redirects that aren’t tied to user interaction.
• Server-Side Flow (If Applicable): If you’re using a server-side login flow (validating the access token on your backend), ensure your backend returns a 302 redirect response to your target URL after successfully verifying the token.

Give these steps a try—chances are either the App Dashboard URI list is missing your URL, or you’re not explicitly triggering the redirect in the status callback.

内容的提问来源于stack exchange，提问作者Sagu K