在Angular9中使用angularx-social-login实现Facebook社交登录时遇错误

Hey there! Let’s dig into that Facebook login HTTP error you’re hitting with angularx-social-login in Angular 9. I’ve helped a few folks work through similar issues, so let’s break this down step by step to get you sorted.

Angular 9 is a bit older, so you need to make sure you’re using a version of angularx-social-login that’s explicitly compatible with it. Using the latest version will cause all sorts of weird runtime errors, including broken HTTP requests.

Install the correct version with:

npm install angularx-social-login@4.1.0

This 4.x branch is built to work smoothly with Angular 8-10.

Most HTTP errors here boil down to misconfigured Facebook Developer settings—this is the #1 culprit I see:

• Enable Facebook Login Product: Go to your Facebook App Dashboard, make sure the "Facebook Login" product is added and enabled.
• Valid OAuth Redirect URIs: Under Facebook Login → Settings, add your app’s full redirect URI. For local development, this will be http://localhost:4200 (or whatever port you’re using). Don’t skip this—Facebook will reject login requests if the redirect URI isn’t whitelisted.
• App Status: If your app is still in "Development Mode", only test users (added in the App Dashboard) can log in. Either add your test accounts or switch the app to "Live" mode once you’re ready for broader access.

Make sure your app.module.ts has the correct configuration—typos or missing settings here can trigger HTTP failures:

import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { FacebookLoginProvider } from 'angularx-social-login';

@NgModule({
  imports: [
    // ... other modules
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('YOUR_FACEBOOK_APP_ID'),
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ],
})
export class AppModule { }

Double-check that your Facebook App ID is copied correctly (no extra spaces or typos!).

If you’re seeing a CORS error: #

• The angularx-social-login library handles the Facebook login flow internally, so CORS shouldn’t be an issue for the login request itself. If you’re making a follow-up request to the Facebook Graph API (to fetch user data), ensure you’re using the correct endpoint:

  // Example Graph API call (use the latest version, e.g., v18.0)
  this.http.get('https://graph.facebook.com/v18.0/me?fields=name,email&access_token=' + user.authToken)
    .subscribe(data => console.log(data));
  

• Also, check if your Angular HTTP interceptors are modifying requests accidentally—some interceptors add custom headers that Facebook’s API doesn’t accept.

If you’re getting 400/401 errors: #

• 400: Likely a bad request caused by an invalid App ID or missing redirect URI. Double-check both settings.
• 401: Usually means the access token is invalid (maybe expired, or the app’s permissions are misconfigured). Ensure you’ve requested the necessary scopes (e.g., email) when initializing the provider:

  provider: new FacebookLoginProvider('YOUR_FACEBOOK_APP_ID', {
    scope: 'email,public_profile'
  })
  

Wrap your login code in a catch block to get detailed error info—this will tell you exactly what’s going wrong:

import { SocialAuthService, FacebookLoginProvider } from 'angularx-social-login';

constructor(private authService: SocialAuthService) {}

signInWithFacebook(): void {
  this.authService.signIn(FacebookLoginProvider.PROVIDER_ID)
    .then(user => {
      console.log('Login success:', user);
      // Handle your post-login logic here
    })
    .catch(error => {
      console.error('Full login error details:', error);
      // Look for error.message or error.status to get specific clues
    });
}

For example, if the error says "Redirect URI not allowed", you know to fix that Facebook setting immediately.

内容的提问来源于stack exchange，提问作者Shibin Mariyan Stanly