Angular中Firebase谷歌登录仅允许已创建用户登录实现方法

Firebase客户端SDK默认会在第三方账号首次登录时自动创建对应用户，没有内置开关可以直接关闭这个行为，要实现需求需要通过三层逻辑组合完成，避免未授权用户登录。

首先在Angular项目中接入Firebase官方依赖：

ng add @angular/fire

在根模块中初始化Firebase配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AppComponent } from './app.component';

// 替换为你自己的Firebase项目配置参数
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "xxx",
  appId: "xxx"
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

封装Google登录方法，在登录流程触发后增加预创建用户校验，未匹配到用户时立即清除临时会话：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { GoogleAuthProvider } from '@firebase/auth';
// 替换为你自己的用户查询服务，对接存储预创建用户的数据库
import { UserService } from './user.service';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private afAuth: AngularFireAuth,
    private userService: UserService
  ) {}

  async googleLogin() {
    const provider = new GoogleAuthProvider();
    // 强制弹出账号选择页，避免复用本地缓存的谷歌登录态
    provider.setCustomParameters({ prompt: 'select_account' });

    try {
      const credential = await this.afAuth.signInWithPopup(provider);
      const loginEmail = credential.user.email.toLowerCase(); // 统一转小写避免大小写匹配误差

      // 校验当前登录邮箱是否在预创建用户列表中
      const isUserAllowed = await this.userService.checkUserExist(loginEmail);
      if (!isUserAllowed) {
        // 用户不存在，立即清除刚生成的临时登录会话
        await this.afAuth.signOut();
        throw new Error('当前账号未在系统内注册，请联系管理员开通权限');
      }

      return credential.user;
    } catch (error) {
      throw error;
    }
  }
}

仅做前端校验存在被绕过的风险，必须配置Firebase服务端安全规则，未在预创建用户库中的账号即使拿到临时凭证也无法访问任何后端资源：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 校验逻辑：当前登录用户的邮箱/uid存在于预创建的allowed_users集合中
    function isApprovedUser() {
      return request.auth != null && (
        exists(/databases/$(database)/documents/allowed_users/$(request.auth.token.email.toLowerCase()))
        || exists(/databases/$(database)/documents/allowed_users/$(request.auth.uid))
      )
    }

    // 所有集合的读写权限仅对已审批用户开放
    match /{allPaths=**} {
      allow read, write: if isApprovedUser();
    }
  }
}

如果使用Firebase Storage、Realtime Database等其他服务，也需要参照上述逻辑配置对应安全规则。

如果需要从根源上禁止Firebase为未授权用户创建Auth用户记录，可以部署Firebase Auth阻止函数，在用户创建流程触发前做校验，不满足条件直接终止创建流程：

const functions = require('firebase-functions/v1');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();

exports.blockUnregisteredUser = functions.auth.user().beforeCreate(async (user) => {
  const userEmail = user.email.toLowerCase();
  const allowedUserSnap = await db.collection('allowed_users').doc(userEmail).get();
  if (!allowedUserSnap.exists) {
    throw new functions.auth.HttpsError(
      'permission-denied',
      '账号未注册，禁止登录'
    );
  }
});

注意事项

• 存储预创建用户邮箱时统一转小写，避免谷歌返回的邮箱大小写不一致导致匹配失败
• 不要省略安全规则配置，前端校验仅用于优化用户交互，无法抵御恶意请求
• Angular 16+ standalone架构可直接在bootstrapApplication中通过provideFirebaseApp、provideAuth接入依赖，核心登录逻辑完全兼容

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