<think>我们注意到用户现在的问题是关于“web网页
接入文心一言AI的方法”，而之前我们回答的是关于豆包AI的
接入方法。虽然两者都是AI服务，但具体
接入方式可能因平台而异。根据引用[1]和引用[2]，用户提供的资料是关于
文心一言的。
根据引用[1]：这是一篇
文心一言API
接入指南，它提供了从注册到代码调用的全流程。
根据引用[2]：在应用详情页面可以分享并打开web验证配置，获得测试地址和访问密码，然后可以通过web页面与
文心一言对话。
因此，我们需要针对
文心一言（ERNIE Bot）来回答。
接入文心一言API到Web网页，通常有两种方式：
1. 前端直接调用（不推荐，因为会暴露API Key）
2. 通过后端代理（推荐）
步骤：
步骤1：获取
文心一言API访问权限
- 注册
百度智能云账号，并开通
文心一言服务。
- 创建应用，获取API Key和Secret Key。
步骤2：获取Access Token（需要后端参与）
- 使用API Key和Secret Key，通过OAuth认证获取access_token（有效期为30天）。
步骤3：调用API
- 使用access_token调用
文心一言的API。
由于安全原因，我们强烈建议通过后端代理的方式。这样，前端只需要与自己的后端交互，而后端负责与
文心一言API交互。
下面我们给出一个完整的示例，包括后端（使用Node.js Express）和前端代码：
后端部分（Node.js）：
1. 安装依赖：`npm install express axios`
2. 创建服务器文件（如server.js）
```
javascript
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
app.use(express.json());
// 从环境变量中获取API Key和Secret Key（安全考虑）
const API_KEY = process.env.API_KEY; // 替换为你的API Key
const SECRET_KEY = process.env.SECRET_KEY; // 替换为你的Secret Key
// 获取access_token的URL
const TOKEN_URL = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${API_KEY}&client_secret=${SECRET_KEY}`;
// 存储access_token和过期时间
let accessToken = '';
let expiresAt = 0;
// 获取access_token（带缓存，避免每次请求都获取）
async function getAccessToken() {
if (accessToken && Date.now() < expiresAt) {
return accessToken;
}
try {
const response = await axios.get(TOKEN_URL);
accessToken = response.data.access_token;
expiresAt = Date.now() + (response.data.expires_in * 1000) - 60000; // 提前1分钟过期
return accessToken;
} catch (error) {
console.error('获取access_token失败', error);
throw error;
}
}
//
文心一言API的URL
const ERNIE_URL = 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions';
// 代理
文心一言API的POST请求
app.post('/api/chat', async (req, res) => {
try {
const token = await getAccessToken();
const url = `${ERNIE_URL}?access_token=${token}`;
const data = req.body; // 前端传递的请求体
const response = await axios.post(url, data, {
headers: {
'Content-Type': 'application/json'
}
});
res.json(response.data);
} catch (error) {
res.status(500).json({ error: error.message });
}
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
```
前端部分（HTML+
JavaScript）：
创建一个简单的聊天界面，使用fetch调用我们自己的后端接口。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
文心一言集成示例</title>
</head>
<body>
<div id="chat"></div>
<input type="text" id="input" placeholder="请输入问题...">
<button onclick="sendMessage()">发送</button>
<script>
const chatDiv = document.getElementById('chat');
const inputEl = document.getElementById('input');
function addMessage(role, content) {
const msgDiv = document.createElement('div');
msgDiv.innerHTML = `<b>${role}:</b> ${content}`;
chatDiv.appendChild(msgDiv);
}
async function sendMessage() {
const userMessage = inputEl.value;
if (!userMessage) return;
addMessage('用户', userMessage);
inputEl.value = '';
// 调用我们自己的后端代理接口
try {
const response = await fetch('http://localhost:3000/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
messages: [
{ role: 'user', content: userMessage }
]
})
});
const data = await response.json();
const aiMessage = data.result;
addMessage('
文心一言', aiMessage);
} catch (error) {
console.error('调用失败', error);
addMessage('系统', '请求出错');
}
}
</script>
</body>
</html>
```
注意：以上示例中，前端直接调用了`http://localhost:3000/api/chat`，实际部署时需要将后端部署到公网服务器，并确保前端能够访问。
另外，
文心一言API还支持流式响应（SSE）等高级
功能，但上述示例是基本的非流式交互。
安全提示：务必将API Key和Secret Key保存在环境变量中，不要硬编码在代码里，也不要提交到版本控制系统。
以上步骤参考了
文心一言官方API文档[^1]。
相关问题：
1. 如何获取
文心一言API的访问权限？
2.
文心一言API支持哪些模型？
3. 如何实现
文心一言API的流式响应（SSE）？
4. 调用
文心一言API时如何控制生成
文本的长度和随机性？
</think>
### Web网页
接入文心一言AI的方法
在Web网页中
接入文心一言（ERNIE Bot）AI服务，主要通过**API调用**实现。以下是完整步骤和代码示例：
---
#### 一、准备工作
1. **获取API凭证**
- 登录[
百度智能云控制台](https://console.bce.baidu.com/qianfan/)
- 创建应用，获取 `API Key` 和 `Secret Key`[^1]
- 开通
文心一言服务（如 `ERNIE-Bot 4.0`）
2. **环境要求**
- 后端服务器（Node.js/Python/
Java等）
- HTTPS协议（
百度API强制要求）
---
#### 二、
接入方案（推荐后端代理）
##### 步骤1：后端获取Access Token
```python
# Python示例（Flask）
import requests
from flask import Flask, request, jsonify
app = Flask(__name__)
# 从环境变量读取密钥（安全存储）
API_KEY = os.getenv("QIANFAN_API_KEY")
SECRET_KEY = os.getenv("QIANFAN_SECRET_KEY")
def get_access_token():
url = "https://aip.baidubce.com/oauth/2.0/token"
params = {
"grant_type": "client_credentials",
"client_id": API_KEY,
"client_secret": SECRET_KEY
}
return requests.post(url, params=params).json().get("access_token")
```
##### 步骤2：创建后端代理接口
```python
@app.route('/api/chat', methods=['POST'])
def chat_proxy():
access_token = get_access_token()
url = f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={access_token}"
# 转发前端请求
user_message = request.json.get("message")
headers = {"Content-Type": "application/json"}
body = {
"messages": [{"role": "user", "content": user_message}],
"stream": False # 是否启用流式传输
}
response = requests.post(url, json=body, headers=headers)
return jsonify(response.json())
```
##### 步骤3：前端调用接口
```html
<!-- HTML部分 -->
<input type="text" id="userInput" placeholder="输入问题...">
<button onclick="sendMessage()">发送</button>
<div id="responseArea"></div>
<script>
//
JavaScript调用
async function sendMessage() {
const input = document.getElementById('userInput').value;
const response = await fetch('/api/chat', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ message: input })
});
const data = await response.json();
document.getElementById('responseArea').innerText = data.result;
}
</script>
```
---
#### 三、直接前端调用（仅
开发测试）
```
javascript
// 注意：此方法暴露API密钥，仅限本地测试
async function unsafeDirectCall() {
const accessToken = "手动获取的临时token"; // 从后端获取临时token
const response = await fetch(
`https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=${accessToken}`,
{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
messages: [{role: "user", content: "你好！"}]
})
}
);
console.log(await response.json());
}
```
---
#### 四、关键配置项
| 参数 | 说明 | 示例值 |
|---------------|-----------------------|----------------|
| `model` | 模型版本 | `ERNIE-Bot-4` |
| `temperature` | 生成随机性(0-1) | `0.7` |
| `stream` | 启用流式传输 | `true`/`false` |
| `max_tokens` | 最大生成长度 | `1024` |
---
#### 五、安全实践
1. **后端存储密钥**：使用环境变量管理 `API Key` 和 `Secret Key`
2. **访问控制**：
```nginx
# Nginx配置示例
location /api/chat {
limit_req zone=one burst=5; # 限流
proxy_pass http://backend_server;
}
```
3. **HTTPS加密**：确保全链路HTTPS
4. **用户鉴权**：添加JWT等身份验证
> **重要提示**：生产环境必须通过后端代理，避免前端暴露敏感凭证[^1]。
---
### 常见问题解决
- **CORS错误**：在后端配置响应头 `Access-Control-Allow-Origin`
- **403权限错误**：检查
百度智能云服务是否开通
- **流式响应中断**：使用SSE（Server-Sent Events）技术
详细API文档参考：[
百度千帆大模型平台](https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Nlks5zkzu)
最低0.47元/天 解锁文章
扫一扫
1781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
