Angular-Firebase PWA（TypeScript）中匿名用户答题的Firebase服务器端验证实现方法问询

嘿，这个需求非常合理——毕竟客户端确实不可信，尤其是匿名场景下，把验证逻辑和敏感内容（正确答案、奖励指引）放在服务端才是安全的。结合Firebase的生态，你可以用Cloud Functions来实现这个服务端验证的核心逻辑，下面给你一步步拆解实现方案：

1. 创建Cloud Functions（服务端验证核心） #

Cloud Functions是Firebase的服务端代码运行环境，你可以在这里编写TypeScript代码，完成答案验证逻辑，而且只有服务端能访问Firestore里的正确答案。

首先在你的Firebase项目里初始化Cloud Functions，然后创建一个Callable函数（专门用于客户端和服务端的安全交互）：

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
admin.initializeApp();

// 验证用户答案的云端函数
export const verifyQuizAnswers = functions.https.onCall(async (data, context) => {
  // 提取客户端传入的参数：用户答案和对应测验ID
  const { answers, quizId } = data;
  if (!answers || !quizId) {
    throw new functions.https.HttpsError(
      "invalid-argument",
      "请提供完整的答案和测验ID"
    );
  }

  try {
    // 从Firestore读取该测验的正确答案（只有服务端能访问）
    const quizDoc = await admin.firestore().collection("quiz_answers").doc(quizId).get();
    if (!quizDoc.exists) {
      throw new functions.https.HttpsError(
        "not-found",
        "找不到对应的测验"
      );
    }
    const correctAnswers = quizDoc.data()?.answers as { questionId: string; answer: string }[];

    // 逐一验证用户答案是否正确
    const isAllCorrect = answers.every(userAnswer => {
      const correct = correctAnswers.find(c => c.questionId === userAnswer.questionId);
      return correct && correct.answer === userAnswer.answer;
    });

    if (isAllCorrect) {
      // 全部答对，返回奖励指引内容
      return {
        success: true,
        successMessage: "恭喜你全部答对！点击下方按钮领取你的专属奖励：[奖励领取按钮]"
      };
    } else {
      // 存在错误答案，返回错误提示
      throw new functions.https.HttpsError(
        "failed-precondition",
        "答案不正确，请再检查一下"
      );
    }
  } catch (error) {
    functions.logger.error("验证失败", error);
    throw new functions.https.HttpsError(
      "internal",
      "服务器验证出错，请稍后重试"
    );
  }
});

2. 配置Firestore安全规则，彻底保护正确答案 #

为了确保客户端完全无法访问正确答案，你需要在Firestore安全规则里限制quiz_answers集合的访问权限，只允许Cloud Functions的admin权限读取：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 客户端完全不能访问正确答案集合
    match /quiz_answers/{quizId} {
      allow read, write: if false;
    }
    // 其他集合的规则可以保留你原来的配置
    match /{document=**} {
      allow read, write: if true; // 根据你的实际需求调整
    }
  }
}

Cloud Functions用admin SDK访问Firestore时会自动绕过安全规则，所以不用担心函数读不到正确答案，而客户端则完全无法获取这些敏感数据。

3. 客户端（Angular）调用云端验证函数 #

在你的Angular组件里，用AngularFire的Functions模块调用刚才创建的Callable函数，传入用户答案，然后根据返回结果处理：

import { Component } from '@angular/core';
import { Functions, httpsCallable } from '@angular/fire/functions';

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
})
export class QuizComponent {
  userAnswers: { questionId: string; answer: string }[] = [];
  successMessage: string = '';
  errorMessage: string = '';

  constructor(private functions: Functions) {}

  onSubmitQuiz() {
    // 初始化云端函数调用
    const verifyQuiz = httpsCallable(this.functions, 'verifyQuizAnswers');
    
    // 调用函数并传入参数
    verifyQuiz({
      answers: this.userAnswers,
      quizId: 'quiz-001' // 替换成你的实际测验ID
    }).subscribe({
      next: (response) => {
        // 全部答对，展示奖励指引
        this.successMessage = response.data.successMessage;
        this.errorMessage = '';
      },
      error: (err) => {
        // 处理错误（答错、服务器异常等）
        this.errorMessage = err.message;
        this.successMessage = '';
      }
    });
  }
}

可选优化：防止恶意请求 #

如果担心匿名用户恶意刷请求，可以做这两个优化：

• 启用Firebase App Check：给你的Angular应用配置App Check，确保只有合法的应用实例能调用Cloud Functions，拦截机器人攻击。
• 添加请求限流：在Cloud Functions里记录每个IP的请求次数，短时间内多次请求就拒绝，或者用Firestore记录匿名用户的答题次数（可以用客户端生成的UUID标识用户）。

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