如何限制Identity Toolkit API的访问权限？Next.js+Firebase场景

Firebase的公共身份验证API端点本身默认开放，但你可以通过Firebase App Check实现仅允许你的合法网站调用该接口，以下是针对Next.js项目的具体配置步骤：

1. 启用Firebase App Check #

• 打开Firebase控制台，进入目标项目，找到App Check模块
• 选择你需要保护的Web应用，点击启用按钮

2. 配置Web应用的验证提供者（reCAPTCHA v3） #

针对Next.js这类网站，推荐使用无感知验证的reCAPTCHA v3：

• 在App Check配置页，选择reCAPTCHA v3作为验证方式
• 填入你的网站域名（如your-domain.com），获取reCAPTCHA的站点密钥和密钥
• 将密钥填写到Firebase控制台对应配置项中并保存

3. 在Next.js项目中集成App Check #

前端初始化配置 #

在你的Firebase初始化文件（如firebase.js/firebase.ts）中，添加App Check的初始化代码：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 初始化App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('你的reCAPTCHA v3站点密钥'),
  isTokenAutoRefreshEnabled: true // 自动刷新验证令牌，维持有效性
});

export { auth, appCheck };

完成配置后，前端调用signInWithEmailAndPassword时，Firebase SDK会自动携带App Check验证令牌，Firebase后端会校验令牌合法性。

4. 强制身份验证API使用App Check验证 #

默认情况下App Check不会强制所有身份验证请求验证，需要手动开启：

• 进入Firebase控制台的身份验证模块，切换到设置标签页
• 滚动到App Check区域，勾选要求使用App Check验证所有身份验证请求
• 保存设置

额外注意事项 #

• 本地开发处理：若在localhost环境调试，需将localhost添加到reCAPTCHA允许域名列表，或使用Firebase控制台生成的测试令牌临时绕过验证
• 错误处理：集成后，非法请求会返回403 Forbidden，前端可捕获该错误并给用户对应提示
• 扩展保护：App Check同样可用于保护Firestore、Storage等其他Firebase服务，配置逻辑类似

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