简介
TinyMCE AI 需要设置 JSON Web Token (JWT) 认证,以控制对 AI 功能的访问权限。JWT 端点会生成并提供授权令牌,用于验证用户是否有权使用 AI 功能,防止未授权访问。作为一种标准的 Web 服务授权解决方案,JWT 的文档资料十分丰富,可访问 https://jwt.io/ 查阅。TinyMCE 建议使用 jwt.io/libraries 列出的库来创建 JWT 令牌。
本指南将提供一个完整的操作流程,指导您如何通过 Node.js 服务器生成 JWT 令牌,将 TinyMCE AI 与 TinyMCE 集成,包括 TinyMCE AI 功能。内容涵盖项目设置、服务器配置和 TinyMCE 定制。
将要构建的内容
在深入技术细节之前,以下是通过本指南将实现的目标:
一个运行 TinyMCE AI 插件且可用的 TinyMCE 编辑器
一个使用 JWT 令牌的安全认证系统
一个简单的 Node.js 服务器用于处理认证
本指南专为初次接触 JWT 认证和 TinyMCE 集成的开发人员设计。
先决条件
开始之前,请确保您具备以下条件:
计算机上已安装 Node.js(可在终端中运行
node -v检查)已启用 TinyMCE AI 的 TinyMCE API 密钥(可从 Tiny 网站获取)
熟悉基本的命令行操作
确保在开始前已准备好 API 密钥。服务器和客户端配置都需要用到该密钥。
快速入门指南
如果尚未设置 Node.js 项目,请按照以下步骤创建一个用于集成 TinyMCE AI 和 JWT 认证的基本环境。如果已配置项目,则可跳过本节,直接进入“JWT 配置要求”部分。
项目设置
# 创建并进入项目目录 mkdir tinymce-my-app cd tinymce-my-app # 初始化项目 npm init -y # 安装所需的软件包 npm install express cors jsonwebtoken
验证 package.json 文件是否已包含所需的依赖项。
创建项目结构
# 创建用于存放 Web 文件的 public 文件夹 mkdir public touch public/index.html touch jwt.js
项目应如下所示:
/tinymce-my-app
/public
index.html (TinyMCE 网页)
jwt.js (服务器代码)
package.json (项目配置)生成公钥/私钥对
TinyMCE AI 服务器需要一个由相同 私钥 生成的 公钥,该私钥将用于 JSON Web Token (JWT) 提供程序端点。存储在 TinyMCE AI 服务器上的公钥用于确保内容是由授权用户发送的。
在账户门户的 JWT Keys 部分,有两种生成并添加公钥的方法:
在 Tiny Account - JWT Keys 页面生成新的密钥对(推荐)。
在本地生成密钥对,然后在 Tiny Account - JWT Keys 页面导入公钥。
使用 Tiny Account JWT Keys 页面生成密钥对
Tiny Account - JWT Keys 页面提供“Generate New Keypair”选项,可快速、安全地生成所需的密钥。该操作会存储 公钥 的副本,并提供一个可下载的文件,包含公钥和私钥。Tiny 不会存储 私钥,且之后无法检索该密钥对。
在本地生成密钥对并添加到账户
此方法涉及两个步骤:在本地生成密钥对,然后将公钥添加到账户门户。
在本地生成密钥对
在本地生成密钥对时,请使用支持的算法之一。TinyMCE AI 不支持对称加密算法,例如 HS256。Tiny 建议使用 RS256 算法。支持的算法如下:
RS256
RS384
RS512
PS256
PS384
PS512
有关这些算法的详细信息,请访问:RFC 7518,JSON Web Algorithms (JWA) 第 3 节 - 数字签名和 MAC 的加密算法。
有关在本地生成密钥对的说明,请参阅:为 Tiny Cloud 创建私钥/公钥对。
在账户门户的 JWT Keys 部分添加公钥
在本地生成公钥后,请在账户门户的 JWT Keys 部分使用“Import Public Key”选项,地址为:Tiny Account - JWT Keys。
JWT 配置要求
本节说明 JWT 认证需要进行哪些配置,无论是使用托管服务(如 AWS 或 Azure 的 JWT 服务)还是设置手动端点。
有关 JWT 要求、声明和权限的完整信息,请参阅 JWT Authentication。
JSON Web Token (JWT) 端点是用于生成并向用户提供授权令牌的服务。这些令牌可用于验证提交的内容是否由授权用户发送,并防止未授权访问。
下图展示了 JWT 的用法:
当用户打开 TinyMCE AI 时:
TinyMCE AI 代表用户请求一个已签名的 JWT。
如果您的 JWT 端点授权该用户,您的 JWT 端点将向 TinyMCE AI 发送一个 JWT,证明该用户身份。
JWT 包含一个
sub(主体)声明,用于标识用户。该用户标识符用于将对话历史、AI 生成内容以及其他用户特定数据锁定到各个用户,确保隐私性和数据隔离。当用户发出请求(例如开始聊天对话、请求 AI 操作或提交审查)时,JWT 将随请求一起发送,以表明用户已获得授权。该 JWT 使用存储在 AI 服务上的公钥进行验证。
AI 服务发送响应,指示请求成功(或必要时提示未授权)。
JWT 端点要求
适用于 TinyMCE AI 的 JSON Web Token(JWT)端点需要满足以下条件:
该端点或服务器接受 JSON HTTP POST 请求。
用户身份验证:需要一种验证用户身份及其是否有权访问 TinyMCE AI 的方法。
使用与提供给 Tiny Account - JWT Keys 的公钥配对的私钥生成(签名)JWT。
该端点或服务器生成包含令牌的 JSON 响应。TinyMCE AI 将在向 AI 服务发送请求时附带该令牌。
TinyMCE AI 所需的 JWT 声明
JWT 端点生成的 JSON Web Tokens 必须包含以下声明:
aud (必需)类型: String
aud 是一个区分大小写的字符串,必须与启用了 TinyMCE AI 插件的有效 API 密钥匹配。
sub (必需)类型: String
sub 声明标识用户。这应该是一个对发出请求的用户唯一的标识符。有关长度限制和会话要求,请参阅 Payload properties。
iat (必需)类型: Number
iat 表示签发时间戳,以秒为单位指定。例如,要将签发时间设置为当前时间戳,计算签发时间为当前时间戳除以 1000。
iat: Math.floor(Date.now() / 1000), // 签发时间戳
exp (必需)类型: Number
exp 表示过期时间戳,以秒为单位指定。例如,要设置 10 分钟的有效期,计算过期时间为当前时间戳加上 600 秒。
exp: Math.floor(Date.now() / 1000) + (60 * 10) // 过期时间(10 分钟)
auth (必需)类型: Object
auth 对象包含 AI 特定权限,用于控制用户可以访问哪些功能。
以下示例授予对对话、推荐的 agent 模型以及系统操作和审查的访问权限。有关可用权限的完整列表,请参阅 Permissions。
示例auth: {
ai: {
permissions: [
"ai:conversations:read",
"ai:conversations:write",
"ai:models:agent",
"ai:actions:system:*",
"ai:reviews:system:*"
]
}
}有关可用权限的完整列表以及配置用户访问权限的最佳实践,请参阅 Permissions。
设置 JWT 端点
以下部分介绍如何手动创建 JWT 端点。如果使用托管的 JWT 服务(例如 AWS 或 Azure),请根据上述要求进行配置,然后跳转到“配置 TinyMCE”部分。
服务器设置(jwt.js)
在根目录中,将服务器设置代码复制并粘贴到 jwt.js 文件中。
const express = require('express'); // 设置 Web 服务器。const jwt = require('jsonwebtoken'); // 生成并签名 JWT。const cors = require('cors'); // 允许跨域请求。const path = require('path'); // 处理文件路径。const app = express();app.use(cors());// 私钥(请替换为实际的密钥)const privateKey = `-----BEGIN PRIVATE KEY-----{Your private PKCS8 key goes here}-----END PRIVATE KEY-----`;app.use(express.static(path.join(__dirname, 'public')));// JWT token 生成端点app.post('/jwt', (req, res) => { const payload = { aud: 'no-api-key', // 替换为实际的 API 密钥 sub: 'user-id', // 替换为实际的用户标识符 iat: Math.floor(Date.now() / 1000), // 签发时间戳 exp: Math.floor(Date.now() / 1000) + (60 * 10), // 过期时间(10 分钟) // 权限控制用户可以访问哪些 AI 功能。完整详情请参阅权限页面。 auth: { ai: { permissions: [ 'ai:conversations:read', 'ai:conversations:write', 'ai:models:agent', 'ai:actions:system:*', 'ai:reviews:system:*' ] } } }; try { // 使用私钥通过 RS256 算法对 token 进行签名 const token = jwt.sign(payload, privateKey, { algorithm: 'RS256' }); res.json({ token }); } catch (error) { res.status(500).send('Failed to generate JWT token.'); console.error(error.message); }});const PORT = 3000;app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}`);});JWT 的 payload 包含一个
auth.ai.permissions数组,该数组定义了用户可以访问的 AI 功能。请根据需求调整这些权限。有关可用权限的更多详细信息,请参阅权限。
配置 TinyMCE
网页(public/index.html)
在创建了 index.html 文件的 public 文件夹中,添加 HTML 设置代码。
<!DOCTYPE html>
<html>
<head>
<title>{productname} with {pluginname}</title>
<script
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js"
referrerpolicy="origin"
crossorigin="anonymous">
</script>
<script>
tinymce.init({
selector: 'textarea',
plugins: 'tinymceai',
toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
// tinymceai_token_provider 从 `/jwt` 端点获取 token。
// 此演示不验证用户会话;它模拟一个已认证的用户。在返回 token 之前,请与您的认证系统集成。
tinymceai_token_provider: () => {
return fetch('http://localhost:3000/jwt', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});
</script>
</head>
<body>
<h1>{pluginname} Demo</h1>
<textarea>
Welcome to {productname}! Try the AI features like chat, quick actions, and review.
</textarea>
</body>
</html>模型配置
可以使用 tinymceai_default_model 和 tinymceai_allow_model_selection 来配置模型选择。有关详细信息,请参阅聊天模型配置。模型访问权限由 JWT 权限控制;有关可用模型权限的信息,请参阅模型权限,有关可用模型列表的信息,请参阅AI 模型。
tinymce.init({
selector: 'textarea',
plugins: 'tinymceai',
toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
tinymceai_default_model: 'agent-1',
tinymceai_allow_model_selection: true,
// 此演示不验证用户会话;它模拟一个已认证的用户。在返回 token 之前,请与您的认证系统集成。
tinymceai_token_provider: () => {
return fetch('http://localhost:3000/jwt', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});配置和运行
配置步骤
添加 API 密钥
将两个文件中的
no-api-key替换为实际的 TinyMCE API 密钥API 密钥在 HTML 脚本源和 JWT payload 中应该是相同的
添加私钥
将
jwt.js中的私钥占位符替换为实际的私钥确保其格式为
PKCS8妥善保管此密钥,切勿公开分享
配置 AI 权限
根据需求调整 JWT payload 中的
auth.ai.permissions数组有关可用权限和最佳实践的信息,请参阅权限
配置模型选择(可选)
如有需要,将
tinymceai_default_model和tinymceai_allow_model_selection添加到编辑器配置中有关详细信息,请参阅模型配置
运行项目
启动服务器:
node jwt.js
在浏览器中打开:
http://localhost:3000应该能看到以下内容:
TinyMCE 编辑器
工具栏中的 AI 功能按钮(tinymceai-chat、tinymceai-quickactions、tinymceai-review)