简介

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 部分,有两种生成并添加公钥的方法:

  1. 在 Tiny Account - JWT Keys 页面生成新的密钥对(推荐)。

  2. 在本地生成密钥对,然后在 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 的用法:

JSON Web Token 调用流程图 1. JSON Web Token 调用流程

当用户打开 TinyMCE AI 时:

  1. TinyMCE AI 代表用户请求一个已签名的 JWT。

  2. 如果您的 JWT 端点授权该用户,您的 JWT 端点将向 TinyMCE AI 发送一个 JWT,证明该用户身份。

  3. JWT 包含一个 sub(主体)声明,用于标识用户。该用户标识符用于将对话历史、AI 生成内容以及其他用户特定数据锁定到各个用户,确保隐私性和数据隔离。

  4. 当用户发出请求(例如开始聊天对话、请求 AI 操作或提交审查)时,JWT 将随请求一起发送,以表明用户已获得授权。该 JWT 使用存储在 AI 服务上的公钥进行验证。

  5. 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 模型。

示例:向 JWT 设置中添加模型选项
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 添加到编辑器配置中

  • 有关详细信息,请参阅模型配置

运行项目

  1. 启动服务器:

    node jwt.js
  2. 在浏览器中打开:http://localhost:3000

  3. 应该能看到以下内容:

    • TinyMCE 编辑器

    • 工具栏中的 AI 功能按钮(tinymceai-chat、tinymceai-quickactions、tinymceai-review)