如何在Angular 15应用中实现社交登录？已尝试angularx-social-login@4.0.1

版本适配说明 #

你之前使用的 angularx-social-login@4.0.1 与 Angular 15 存在兼容问题，建议先升级到适配 Angular 14+ 的版本：

npm install angularx-social-login@6.0.0

步骤1：配置第三方 OAuth 应用 #

先到目标社交平台（如 Google、Facebook）创建开发者应用，获取对应的 Client ID，并将你的 Angular 应用域名添加到平台的授权域名列表中。

步骤2：配置 Angular 模块 #

在 app.module.ts 中导入社交登录模块并配置提供商：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login'; // 按需引入其他提供商，比如 FacebookLoginProvider

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SocialLoginModule],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false, // 关闭自动登录
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('你的Google Client ID')
          }
          // 如需添加Facebook，取消注释并配置
          // {
          //   id: FacebookLoginProvider.PROVIDER_ID,
          //   provider: new FacebookLoginProvider('你的Facebook Client ID')
          // }
        ]
      } as SocialAuthServiceConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：组件中实现登录逻辑 #

创建登录组件（如 login.component.ts），注入服务并处理登录/退出、状态监听：

import { Component, OnInit } from '@angular/core';
import { SocialAuthService, SocialUser } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  user: SocialUser | null = null;
  isLoggedIn = false;

  constructor(private authService: SocialAuthService) { }

  ngOnInit(): void {
    // 监听登录状态变化
    this.authService.authState.subscribe(user => {
      this.user = user;
      this.isLoggedIn = !!user;
      
      // 登录成功后，可将用户信息传给后端验证并生成业务token
      if (this.isLoggedIn) {
        console.log('用户登录信息：', user);
        // 示例：调用后端接口
        // this.http.post('/api/auth/social-login', { user }).subscribe(...);
      }
    });
  }

  // Google登录
  signInWithGoogle() {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

  // 退出登录
  signOut() {
    this.authService.signOut();
  }
}

步骤4：编写组件模板 #

login.component.html 中添加交互元素：

<button *ngIf="!isLoggedIn" (click)="signInWithGoogle()">使用Google登录</button>
<button *ngIf="isLoggedIn" (click)="signOut()">退出登录</button>

<div *ngIf="isLoggedIn" class="user-info">
  <h4>登录成功</h4>
  <p>用户名：{{user.name}}</p>
  <p>邮箱：{{user.email}}</p>
  <img [src]="user.photoUrl" alt="用户头像" width="80">
</div>

针对独立组件（Standalone）的配置 #

如果你的 Angular 15 应用使用独立组件，在 main.ts 中配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('你的Google Client ID')
          }
        ]
      } as SocialAuthServiceConfig
    }
  ]
});

常见问题排查 #

• 依赖报错：确保已升级到 angularx-social-login@6.x 版本，该版本适配 Angular 14+
• 登录无回调：检查第三方平台的 Client ID 是否正确，以及应用域名是否在授权列表中
• 用户信息获取失败：确认第三方平台的 OAuth 权限已正确配置（比如 Google 需要开启用户信息、邮箱等权限）

内容的提问来源于stack exchange，提问作者Naveen Gumma