← 返回蜂巢洞察

为什么绝不应该在客户端代码中嵌入Gemini API密钥(以及Firebase AI逻辑是如何解决这个问题的)

生成式人工智能的快速发展促使成千上万的网页开发者在他们的应用程序中添加智能功能。 人们的第一反应通常是从浏览器直接调用Gemini API的SDK。然而,这种做法存在严重的安全风险:会将你的API密钥暴露给外界。 在本文中,你将了解到为什么将原始的Gemini API密钥提供给客户端是危险的,Firebase AI Logic的代理架构是如何解决这一问题的,以及Firebase App Check又是如何弥补单独使用代理所无法解决的问题。 阅读完本文后,你将能够搭建出一个可正常使用的生产环境配置:一个受到保护的AI Logic客户端、一个配置正确的App Check流程(其中包含调试令牌),以

生成式人工智能的快速发展促使成千上万的网页开发者在他们的应用程序中添加智能功能。 人们的第一反应通常是从浏览器直接调用Gemini API的SDK。然而,这种做法存在严重的安全风险:会将你的API密钥暴露给外界。 在本文中,你将了解到为什么将原始的Gemini API密钥提供给客户端是危险的,Firebase AI Logic的代理架构是如何解决这一问题的,以及Firebase App Check又是如何弥补单独使用代理所无法解决的问题。 阅读完本文后,你将能够搭建出一个可正常使用的生产环境配置:一个受到保护的AI Logic客户端、一个配置正确的App Check流程(其中包含调试令牌),以及真实的应用场景——比如流式交互、多轮对话功能,还有结构化的JSON输出结果,而不仅仅是一个简单的console.log语句。

目录

先决条件

在开始之前,请确保你具备以下条件:
  • Node.js v18或更高版本(运行node --version即可确认)

  • 一个Google账户,用于创建Firebase项目(Gemini开发者API支持免费的Spark计划)

  • 对JavaScript、async/await语法以及ES模块有基本的了解

  • 需要一个代码编辑器和终端环境

你不需要事先具备使用Firebase、App Check或Gemini API的经验,因为本指南会从基础开始帮助你掌握这些知识。

客户端API密钥带来的问题

将API密钥嵌入到JavaScript代码包中,或者放在最终会被发送到浏览器的.env文件中,这种做法存在严重的安全漏洞,而且很容易被恶意利用。下面我们来具体看看实际情况是怎样的。 假设你像这样直接在客户端代码中调用Gemini API:
**请不要在通过浏览器发布的应用程序中使用这种方法**  
const genAI = new GoogleGenerativeAI("AIzaSyD4-你的真实API密钥");

将此方法与任何构建工具结合使用,API密钥就会以纯文本的形式出现在生成的JS文件中。任何人都能在不到一分钟的时间内找到它,而且不需要任何特殊工具:

任何人都可以使用以下命令来检测你的部署包中是否包含Gemini API密钥:
curl -s https://your-app.com/assets/main.js | grep -oE "AIzaSy[A-Za-z0-9_-]{33}"

通过这个命令,就可以从经过压缩的production版本的应用包中提取出Gemini API密钥(如果该密钥确实存在于其中的话)。在浏览器的开发者工具中,这一信息会更加明显:所有发送到generativelanguage.googleapis.com的请求,其查询字符串或请求头中都会直接显示该API密钥。

如果Gemini API密钥通过这种方式被泄露,攻击者将会能够:

  • 耗尽你所有的使用额度

  • 导致你的Cloud账单金额突然大幅增加(因为Gemini API的调用是按令牌计费的,这与固定费用的数据库查询方式不同)

  • 利用你的资源来发起他们自己的请求,从而导致你的Google Cloud项目因被滥用而被暂停服务

从历史上看,解决这个问题的唯一方法就是构建、部署并维护一个自定义的后端服务器(使用Node.js、Python、Go等语言),让这个服务器充当你的应用与Gemini API之间的代理服务器,从而确保只有这一串API密钥被妥善保护。然而,对于本来应该是一个简单功能的实现来说,这样做实际上意味着需要投入大量的资源来建设基础设施。

步骤1 – Firebase AI Logic的代理架构工作原理

Firebase AI Logic为你提供了这个代理服务,而你无需自己动手构建或托管它。你仍然需要编写客户端代码,但API密钥始终不会离开Google的基础设施。

[Web浏览器] ──(经过身份验证的请求)──> [Firebase AI Logic代理服务器] ──(在服务器端插入API密钥)──>> [Gemini API]

你的Gemini API密钥会被安全地存储在你的Firebase项目中。客户端SDK会向代理服务器发送请求,代理服务器会在请求中插入API密钥,然后将其转发给你选择的“Gemini API”提供者。因此,这个API密钥永远不会出现在你的JS文件中,也不会出现在任何网络请求数据中,浏览器也无法检测到它。

Firebase AI Logic支持两种API提供者,具体选择哪种提供者在设置服务时就可以在控制台中进行配置:

Gemini开发者API Agent Platform Gemini API(原名Vertex AI)
计费方案 免费版的Spark计划即可使用 需要Blaze按需付费计划
适用场景 适合快速入门、进行原型开发,以及大多数Web/移动应用 适用于有数据驻留要求,或者已经使用Google Cloud/Vertex AI的团队
区域控制 区域选择范围有限 可以根据具体模型需求选择特定的地区(如useu)来访问模型
设置难度 设置非常简单,无需进行任何计费操作 需要关联一个Cloud Billing账户

对于大多数应用来说,建议先使用Gemini开发者API,本教程也是按照这个方式来操作的。以后如果需要更换API提供者,只需要修改配置即可,无需重新编写代码,因为两种提供者都是通过相同的getGenerativeModel()接口来进行交互的。

步骤2 – Firebase应用检查的实际作用

代理服务器会隐藏这些配置信息。但它本身并不能阻止任何人调用该代理服务器。你的Firebase配置对象(如apiKeyprojectId等)并非保密信息,而是公开可见的;按照设计,这些配置会出现在每个已部署的应用程序中。如果没有额外的安全措施,机器人就可以复制这些配置信息,使用你的项目信息初始化自己的Firebase应用,然后直接调用你的AI逻辑代理服务器,从而让你的Gemini服务产生费用,而实际上并没有任何真正的用户参与其中。

而这正是Firebase应用检查的作用所在。了解它的具体功能非常重要,因为人们很容易将其与身份验证混淆。

应用检查是一种认证机制,而非身份验证。Firebase身份验证用于回答“这个用户是谁?”这个问题;而应用检查则用来判断“这个请求是否来自我应用程序的合法版本,而不是脚本、机器人或其他使用我的配置信息的应用程序?”你可以也应该将这两种机制结合使用,但正是应用检查在请求中完全缺乏用户相关信息的情况下,也能保护你免受滥用。

其具体工作流程如下:

  1. 当你的应用程序初始化应用检查功能时,SDK会向配置好的提供者发送一个认证请求。在网页环境中,这个提供者通常是reCAPTCHA Enterprise;它会进行一系列隐蔽的风险评估(比如检测鼠标移动、浏览器特征以及网络信号),然后返回一个令牌,证明“这是一个合法的浏览器会话”。

  2. 你的应用程序的SDK会将这个reCAPTCHA令牌发送到Firebase的应用检查后端服务,后者会将其转换为一个Firebase应用检查令牌——这是一种有效期较短、经过签名的JWT令牌。

  3. 这个应用检查令牌会被保存在本地缓存中,并会在你的应用程序后续向Firebase AI Logic或其他集成有应用检查功能的服务发送请求时自动附加到这些请求中。

  4. 在AI逻辑代理服务器将请求转发给Gemini之前,它会先验证这个应用检查令牌的签名是否有效。如果令牌无效,请求就不会被传递给相应的服务。

对于生成式AI来说,这一点尤为重要,因为其成本结构与典型的CRUD后端不同:阻止一次Firestore读操作并不会产生任何费用;而如果阻止了一次Gemini请求,而没有采取相应的措施,每次请求都可能会让你付出实际的资金代价。而在大规模应用中,脚本化的滥用行为甚至可能在几小时内就耗尽你的月度预算。应用检查正是确保只有你的应用程序才能触发这些费用的机制。

注意:谷歌已经宣布,从2026年11月2日起,Firebase AI Logic将强制要求使用应用检查功能。实际上,早在2026年7月,Firebase控制台中的引导式设置流程就已经能够为新启用的AI逻辑集成自动启用应用检查功能了。因此在规定日期之后发送的任何未经验证的请求都会被直接拒绝,所以现在就配置这个功能总比以后手忙脚乱要好得多。

步骤3 – 设置您的Firebase项目

  1. 访问Firebase控制台,创建一个新的项目(或打开一个已存在的项目)。

  2. 在左侧侧边栏中,依次选择构建AI逻辑,然后点击开始使用。选择Gemini开发者API作为提供商,这样就不需要设置计费信息了。

  3. 返回到项目设置页面,依次选择常规设置您的应用。如果还没有注册Web应用,请先进行注册,然后复制Firebase配置对象。在后续步骤中会需要用到它。

我们将把App Check的配置设置留到下一步再进行讲解,因为这部分内容值得单独介绍。

步骤4 – 集成Firebase App Check

为您的应用注册reCAPTCHA Enterprise

在Firebase控制台中,依次选择构建App Check,选中您的Web应用,然后选择reCAPTCHA Enterprise作为提供商。Firebase会为您的应用生成一个与域名绑定的站点密钥,请将其复制下来,因为在后续代码中需要使用它。

安装SDK

npm install firebase

您只需要安装这个包即可。ReCaptchaEnterpriseProvider已经包含在firebase/app-check模块中,而firebase/app-check又属于同一个firebase包。因此不需要单独安装reCAPTCHA SDK,也不需要手动添加