Angular14中基于Google GIS实现重定向模式谷歌登录咨询

一、修改现有库的配置实现重定向模式 #

1. 更新登录提供者配置 #

在AppModule的SocialLoginModule初始化代码中，调整GoogleLoginProvider的配置，启用重定向模式：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocialLoginModule, SocialAuthServiceConfig, GoogleLoginProvider } from '@abacritt/angularx-social-login';
import { AppComponent } from './app.component';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [AppComponent, AuthCallbackComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'auth/callback', component: AuthCallbackComponent },
      // 其他路由配置
    ]),
    SocialLoginModule.initialize({
      autoLogin: false,
      providers: [
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider(
            '你的谷歌客户端ID',
            {
              redirectUri: 'http://localhost:4200/auth/callback', // 替换为你的回调页面URL
              popup: false, // 禁用弹窗，启用重定向模式
              scope: 'email profile', // 按需添加权限
              responseType: 'code' // GIS重流模式推荐使用code类型
            }
          )
        }
      ]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建回调处理组件 #

新建一个AuthCallbackComponent，用于处理谷歌登录后的重定向回调：

import { Component, OnInit } from '@angular/core';
import { SocialAuthService } from '@abacritt/angularx-social-login';
import { Router } from '@angular/router';

@Component({
  template: `<p>登录中...</p>` // 可自定义加载提示
})
export class AuthCallbackComponent implements OnInit {
  constructor(
    private authService: SocialAuthService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.authService.handleRedirectCallback()
      .then(user => {
        // 登录成功，处理用户信息（如存储到本地、跳转首页）
        console.log('登录用户信息:', user);
        this.router.navigate(['/']); // 替换为你的首页路由
      })
      .catch(err => {
        // 登录失败，处理错误（如提示用户、跳转登录页）
        console.error('登录失败:', err);
        this.router.navigate(['/login']);
      });
  }
}

3. 替换登录按钮逻辑 #

原asl-google-signin-button组件默认触发弹窗登录，需替换为自定义按钮调用重定向登录：

在登录页面组件中：

<button class="google-login-btn" (click)="signInWithGoogle()">Google登录</button>

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) { }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
}

4. 谷歌控制台配置 #

登录谷歌云控制台，找到你的OAuth 2.0客户端ID，在授权重定向URI中添加回调页面的完整URL（如http://localhost:4200/auth/callback），确保和代码中的redirectUri一致。

二、替代库推荐 #

1. angular-oauth2-oidc #

• 完全兼容OIDC协议，适配Google Identity Services的重流模式
• 支持令牌自动刷新、会话管理等进阶功能
• 配置灵活，适合企业级Angular应用

2. ngx-auth-firebaseui #

• 集成Firebase Auth的社交登录能力，包含谷歌登录重定向模式
• 提供预构建的登录UI组件，减少自定义代码量
• 适合已使用Firebase生态的项目

3. 原生Google Identity Services JS SDK #

• 无第三方库依赖，定制化程度最高
• 直接调用GIS原生API，可完全控制登录流程
• 适合对登录逻辑有特殊定制需求的场景

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