从零开始将Taotoken接入静态网站实现动态AI交互-平芜编程栈

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

从零开始将Taotoken接入静态网站实现动态AI交互

1. 场景与核心思路

对于使用 Hugo、Hexo、VuePress 等工具生成的静态网站，或者任何纯前端项目，想要集成大模型对话能力，传统上需要自建后端服务来转发API请求并保护密钥。Taotoken 提供的 OpenAI 兼容 HTTP API 使得前端直接调用成为可能，关键在于如何在前端环境中安全地处理API密钥并正确发起请求。

本教程将引导你完成一个最小化的前端集成示例，使用原生 JavaScript 和 Fetch API，在静态页面中实现与 Taotoken 上多种大模型的对话交互。整个过程不依赖任何后端服务器，代码可直接嵌入你的静态站点。

2. 准备工作：获取API密钥与模型ID

在开始编写代码前，你需要从 Taotoken 平台获取两个必要信息：API Key 和要调用的模型ID。

首先，访问 Taotoken 控制台，创建一个新的API密钥。出于安全考虑，建议为这个静态网站项目创建一个专用的密钥，并可以设置合适的调用额度或使用期限。创建后，请妥善保存这个密钥字符串。

其次，在平台的“模型广场”页面，浏览并选择你想要接入的模型。每个模型都有一个唯一的模型ID，例如claude-sonnet-4-6、gpt-4o-mini等。记录下你选定的模型ID。

重要提示：前端直接暴露API密钥存在被恶意抓取和滥用的风险。本教程的示例旨在演示核心流程。对于生产环境，强烈建议通过你自己的后端服务进行代理，或使用更安全的密钥管理方案（如短期令牌、边缘函数等）。

3. 核心代码实现

我们将创建一个简单的 HTML 页面，包含一个输入框、一个按钮和一个显示区域。通过 JavaScript 调用 Taotoken 的聊天补全接口。

3.1 基础HTML结构与样式

创建一个index.html文件，写入以下基础结构。样式部分仅为简单美化，你可根据自己网站的设计进行调整。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态网站AI对话示例</title> <style> body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 1rem; margin-bottom: 1rem; } .message { margin-bottom: 0.8rem; } .user { color: #0066cc; } .assistant { color: #009933; } #inputArea { display: flex; gap: 0.5rem; } #userInput { flex-grow: 1; padding: 0.5rem; } #sendBtn { padding: 0.5rem 1.5rem; } #status { margin-top: 0.5rem; font-size: 0.9em; color: #666; } </style> </head> <body> <h1>Taotoken AI 对话示例</h1> <div id="chatBox"></div> <div id="inputArea"> <input type="text" id="userInput" placeholder="输入你的问题..." /> <button id="sendBtn">发送</button> </div> <div id="status">就绪</div> <script> // 核心JavaScript代码将在这里编写 </script> </body> </html>

3.2 JavaScript 逻辑与API调用

接下来，在<script>标签内编写核心逻辑。我们将定义调用 Taotoken API 的函数，并处理用户交互。

// 配置信息 - 请替换为你的实际信息 const TAOTOKEN_API_KEY = 'YOUR_TAOTOKEN_API_KEY_HERE'; // 在此处填入你的API密钥 const TAOTOKEN_MODEL = 'claude-sonnet-4-6'; // 在此处填入你的模型ID const API_ENDPOINT = 'https://taotoken.net/api/v1/chat/completions'; // 获取DOM元素 const chatBox = document.getElementById('chatBox'); const userInput = document.getElementById('userInput'); const sendBtn = document.getElementById('sendBtn'); const statusDiv = document.getElementById('status'); // 用于存储对话历史 let conversationHistory = []; // 向聊天框添加消息 function addMessage(role, content) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${role}`; messageDiv.textContent = `${role === 'user' ? '用户' : '助手'}: ${content}`; chatBox.appendChild(messageDiv); chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部 } // 调用Taotoken API async function callTaotokenAPI(userMessage) { statusDiv.textContent = 'AI正在思考...'; sendBtn.disabled = true; // 将用户消息加入历史并显示 conversationHistory.push({ role: 'user', content: userMessage }); addMessage('user', userMessage); try { const response = await fetch(API_ENDPOINT, { method: 'POST', headers: { 'Authorization': `Bearer ${TAOTOKEN_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ model: TAOTOKEN_MODEL, messages: conversationHistory, stream: false, // 为简化示例，使用非流式响应 }), }); if (!response.ok) { throw new Error(`API请求失败: ${response.status} ${response.statusText}`); } const data = await response.json(); const assistantReply = data.choices[0]?.message?.content; if (assistantReply) { // 将助手回复加入历史并显示 conversationHistory.push({ role: 'assistant', content: assistantReply }); addMessage('assistant', assistantReply); statusDiv.textContent = '就绪'; } else { throw new Error('未收到有效回复'); } } catch (error) { console.error('调用出错:', error); statusDiv.textContent = `错误: ${error.message}`; addMessage('assistant', `抱歉，请求出现错误: ${error.message}`); } finally { sendBtn.disabled = false; userInput.value = ''; // 清空输入框 userInput.focus(); } } // 发送按钮点击事件 sendBtn.addEventListener('click', () => { const message = userInput.value.trim(); if (message) { callTaotokenAPI(message); } }); // 输入框回车键事件 userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { const message = userInput.value.trim(); if (message) { callTaotokenAPI(message); } } }); // 初始化状态 statusDiv.textContent = '已加载，请输入消息开始对话。';

4. 安全实践与进阶考虑

将API密钥硬编码在HTML或JavaScript文件中是极不安全的，任何访问者都可以通过查看网页源代码或浏览器开发者工具获取它。对于个人项目或演示，这可能可以接受，但对于公开网站，你必须采取更安全的措施。

一种常见的折中方案是使用环境变量或构建时替换。例如，在使用 Webpack、Vite 等构建工具的项目中，你可以将密钥存储在.env.local文件中（确保该文件被.gitignore忽略），然后在构建过程中将其注入到前端代码中。但这仍然意味着密钥会出现在发送给客户端的最终代码包中。

更安全的架构是引入一个轻量级后端作为代理。这个后端可以是一个简单的云函数（如 Vercel Serverless Function、Cloudflare Worker、阿里云函数计算等），它持有真实的 Taotoken API 密钥。前端不再直接调用 Taotoken，而是调用你自己的这个代理接口。代理接口负责添加认证头、转发请求并返回结果。这样，你的 Taotoken API 密钥就永远不会暴露给前端。

此外，你还可以在代理层实现速率限制、请求验证、对话历史管理（使用服务端存储而非前端内存）等更复杂的功能，��升应用的健壮性和用户体验。