如何禁用abacritt/angularx-social-login的Google登录自动弹出？

1. 修改模块配置，关闭自动登录 #

在导入SocialLoginModule的模块（通常是AppModule）中，调整配置项，将autoLogin设为false，阻止初始化时自动拉起Google登录界面：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';

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')
          }
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件中实现按需登录逻辑 #

在需要触发登录的组件里，注入SocialAuthService，创建触发登录的方法并绑定到按钮点击事件：

组件TS代码： #

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(private authService: SocialAuthService) { }

  // 点击按钮时触发Google登录弹窗
  loginWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
}

组件HTML代码： #

<button (click)="loginWithGoogle()">点击使用Google登录</button>

完成以上设置后，只有用户主动点击按钮时，才会弹出Google登录弹窗，不会再自动加载登录界面。

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