5分钟搭建Gemini网页版教程

本文手把手教你用不到5分钟快速搭建一个安全、可用的私人Gemini网页版，即使零编程基础也能通过API Key+轻量前端模板轻松实现；教程涵盖从Google AI Studio获取密钥、HTML单文件快速启动，到用Cloudflare Workers绕过CORS、Vercel托管提升安全性，再到域名限制、签名验证和配额防护等关键防护措施，全程免费、无需服务器，让你在浏览器中拥有专属、可控、防滥用的AI对话界面。

如果您希望快速拥有一个可直接在浏览器中使用的私人网页版 Gemini，但又不具备编程经验，则可以通过 API Key 结合轻量级前端模板实现。以下是完成此目标的具体步骤：

一、获取 Google AI Studio 的 Gemini API Key

API Key 是调用 Gemini 模型服务的身份凭证，必须通过 Google 官方平台申请并启用对应权限。该密钥将用于前端页面与后端代理或直接请求之间的身份验证。

1、访问 https://aistudio.google.com/ 并使用 Google 账号登录。

2、点击左上角菜单栏中的 “Get API Key” 按钮。

3、在弹出页面中点击 “Create API key”，系统将自动生成一个密钥字符串。

4、复制该密钥，并在页面右上角点击 “Enable APIs”，确保 “Gemini API” 已开启。

二、使用静态 HTML 模板嵌入 API 调用逻辑

无需服务器部署，仅需一个包含 HTML、CSS 和 JavaScript 的单文件，即可实现基础对话界面。该方式依赖浏览器直接发起请求，因此需配合支持 CORS 的代理或使用 Google 提供的客户端 SDK。

1、新建一个文本文件，命名为 index.html。

2、在文件中粘贴以下基础结构代码（含简化版 UI 与请求逻辑）：

3、将代码中 YOUR_API_KEY_HERE 替换为第一步中复制的 API Key。

4、保存文件后，双击用浏览器打开，即可输入问题并获得 Gemini 回复。

三、通过 Cloudflare Workers 构建无服务器代理层

由于浏览器直连 Gemini API 可能触发 CORS 限制，使用 Cloudflare Workers 创建轻量代理可绕过该限制，且完全免费、无需维护服务器。

1、注册并登录 https://dash.cloudflare.com/。

2、进入 Workers 页面，点击 “Create a Worker”，选择 “Edit code” 模式。

3、粘贴代理脚本，其中包含对 https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent 的转发逻辑。

4、在环境变量中添加 GEMINI_API_KEY，值设为您的密钥。

5、部署后，将 HTML 中的请求地址替换为该 Workers 的 URL。

四、使用 Vercel 静态托管 + Serverless Function 组合方案

Vercel 支持自动部署前端页面，并允许添加 Node.js 函数作为后端接口，从而分离密钥与前端代码，提升安全性。

1、在本地创建项目文件夹，内含 index.html 和 api/generate.ts 函数文件。

2、函数文件中使用 process.env.GEMINI_API_KEY 获取密钥，并向 Gemini 接口发起 POST 请求。

3、将项目推送到 GitHub 仓库，并在 Vercel 控制台导入该仓库。

4、在 Vercel 项目设置中，进入 Environment Variables，添加 GEMINI_API_KEY 变量。

5、部署完成后，访问 Vercel 分配的域名，即可运行网页版 Gemini。

五、启用安全限制与基础防护措施

公开暴露 API Key 存在被滥用风险，必须在前端或代理层加入基础访问控制，防止他人盗用密钥发起高额调用。

1、在 Cloudflare Workers 或 Vercel Function 中，检查请求头中的 Origin 是否匹配您授权的域名。

2、为每个请求添加时间戳与简单签名验证，例如在 URL 参数中传入 t=1717023456&s=abc123，后端校验有效性。

3、在 Google AI Studio 控制台中，为 API Key 设置 Application Restrictions 为 HTTP 引用来源，并填入您的网页域名。

4、启用 Quota Limits，将每日请求上限设为 100 次，避免意外超额。

本篇关于《5分钟搭建Gemini网页版教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于科技周边的相关知识，请关注golang学习网公众号！