共计 2644 个字符，预计需要花费 7 分钟才能阅读完成。
Cesium 申请 Token 全流程解析：从入门到生产环境避坑
背景痛点
在初次使用 Cesium 进行三维场景开发时，Token 申请环节往往会遇到各种问题，导致开发效率低下。以下是一些常见的坑点：
- 认证超时：由于网络延迟或服务器响应慢，Token 请求经常超时
- Scope 权限不足：申请的 Token 缺少必要权限，导致部分 API 无法调用
- 跨域问题：本地开发时遇到 CORS 预检请求失败
- Token 失效：未正确处理 Token 过期情况，导致场景加载异常
技术对比
| 对比项 | Cesium Ion Token | 自签名 JWT |
|---|---|---|
| 适用场景 | 官方托管服务 | 私有化部署 |
| 过期策略 | 固定有效期（默认 30 天） | 可自定义 |
| 安全性 | 依赖 OAuth2.0 流程 | 需要自行管理密钥 |
| 维护成本 | 低 | 高 |
核心实现
Cesium Ion 控制台操作
- 登录Cesium Ion 控制台
- 创建新项目(Project)
- 进入 ”Tokens” 选项卡
- 点击 ”New Token” 按钮
- 设置 Token 名称和过期时间
- 选择所需权限(Scopes)
- 生成并复制 Token
Python 示例代码
import requests
import logging
logging.basicConfig(level=logging.INFO)
def get_cesium_token():
try:
response = requests.post(
'https://ion.cesium.com/oauth/token',
data={
'grant_type': 'client_credentials',
'client_id': 'your_client_id', # 替换为实际 ID
'client_secret': 'your_secret',
'scope': 'assets:read assets:write'
},
timeout=10
)
response.raise_for_status()
return response.json()['access_token']
except requests.exceptions.RequestException as e:
logging.error(f"Token 请求失败: {e}")
return NoneJavaScript 动态加载方案
let cesiumToken = '';
async function refreshToken() {
try {
const response = await fetch('https://your-api/token', {
method: 'POST',
headers: {'Content-Type': 'application/json'}
});
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
cesiumToken = data.token;
Cesium.Ion.defaultAccessToken = cesiumToken;
// 设置 Token 过期前自动刷新
setTimeout(refreshToken, data.expires_in * 1000 - 60000);
} catch (error) {console.error('Token 刷新失败:', error);
// 重试逻辑
setTimeout(refreshToken, 5000);
}
}
// 处理 401 错误
Cesium.Resource.overrideFetch(function(url, options) {return Cesium.Resource.fetch.call(this, url, options)
.catch(function(error) {if (error.statusCode === 401) {return refreshToken().then(() => {options.headers.Authorization = `Bearer ${cesiumToken}`;
return Cesium.Resource.fetch.call(this, url, options);
});
}
throw error;
});
});安全实践
Token 存储方案对比
- localStorage：
- 优点：易于实现
-
缺点：易受 XSS 攻击
-
HttpOnly Cookie：
- 优点：防止 JavaScript 读取
- 缺点：需要处理 CSRF 防护
授权信息显示
viewer.creditDisplay.addDefaultCredit(new Cesium.Credit('Your App © 2023', true)
);避坑指南
解决 CORS 预检失败
- 确保服务器响应包含以下头部：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Authorization - 在 Chrome 启动参数中添加：
--disable-web-security --user-data-dir=/tmp/chrome-dev
处理 Token 缓存问题
当遇到 Scene#pickPosition 坐标偏移时：
viewer.scene.requestRenderMode = true;
viewer.scene.globe.depthTestAgainstTerrain = true;延伸思考
对于生产环境，建议将 Token 管理集成到 AWS Secrets Manager：
- 创建 Secret 存储 Token
- 配置 Lambda 函数定期轮换
- 通过 IAM 策略控制访问权限
- 应用端通过 SDK 动态获取
参考资源
sequenceDiagram
participant Client
participant CesiumIon
participant YourApp
Client->>CesiumIon: 请求 Token (client_id, secret)
CesiumIon-->>Client: 返回 access_token
Client->>YourApp: 使用 Token 访问 API
YourApp->>CesiumIon: 验证 Token
CesiumIon-->>YourApp: 返回验证结果
YourApp-->>Client: 返回 API 响应希望这篇指南能帮助你顺利获取和使用 Cesium Token，避免在生产环境中踩坑。如果遇到其他问题，可以参考官方文档或社区讨论。
正文完
