Angular 14中如何获取Google Auth登录数据并存入本地存储？

1. 确认Google Auth依赖配置正确 #

如果使用angularx-social-login（Angular生态常用的第三方登录工具），先完成基础配置：

• 安装依赖：npm install angularx-social-login @abacritt/angularx-social-login
• 在app.module.ts中导入并配置客户端信息：

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';

@NgModule({
  imports: [SocialLoginModule],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              '你的Google Client ID'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ]
})
export class AppModule { }

2. 登录成功后获取并存储用户数据 #

在登录组件中，通过SocialAuthService监听登录状态，直接捕获用户信息并写入本地存储：

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

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

  constructor(private authService: SocialAuthService) {}

  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      // 登录成功后立即存储数据
      if (user) {
        localStorage.setItem('google-login-user', JSON.stringify(user));
      }
    });
  }

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

3. 读取本地存储的用户数据（可选） #

如果需要在其他组件中复用用户信息，可通过以下方法读取：

getStoredUser(): SocialUser | null {
  const userJson = localStorage.getItem('google-login-user');
  return userJson ? JSON.parse(userJson) : null;
}

4. 常见问题排查 #

• 检查Google Cloud控制台中，OAuth客户端ID的授权回调URL是否与你的Angular项目地址匹配（比如http://localhost:4200）
• 确认Google登录请求已包含profile和email权限（angularx-social-login默认会申请，自定义配置时需手动指定）
• 若使用Firebase Auth，需确保Firebase项目已启用Google登录，并完成Angular项目的Firebase初始化配置

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