简介
使用“导出为 Word”功能需要配置 JSON Web Token (JWT) 身份验证以控制文件安全性。JWT 端点生成并提供授权令牌,以验证提交的内容是由授权用户发送的,从而防止未经授权的访问。作为标准的 Web 服务授权解决方案,JWT 的相关文档可在 https://jwt.io/ 上找到。
本指南提供了将“导出为 Word”功能与 TinyMCE 集成的全面教程,包括通过使用 Node.js 服务器生成 JWT 令牌来实现“导出为 Word”功能。内容涵盖项目设置、服务器配置和 TinyMCE 自定义。
您将构建的内容
在深入技术细节之前,以下是通过本指南您将实现的目标:
一个运行“导出为 Word”插件的可用 TinyMCE 编辑器
一个使用 JWT 令牌的安全身份验证系统
一个简单的 Node.js 服务器来处理身份验证
本指南适用于初次接触 JWT 身份验证和 TinyMCE 集成的开发人员。
前提条件
在开始之前,请确保您具备以下条件:
已在计算机上安装 Node.js(可通过在终端运行
node -v来检查)拥有一个 TinyMCE API 密钥(可从 TinyMCE 网站获取)
对命令行有基本的了解
在开始之前,请确保您已准备好 API 密钥。服务器和客户端配置都需要用到它。
快速入门指南
项目设置
# 创建并进入项目目录 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 (项目配置)配置
生成公钥/私钥对
设置 JWT 身份验证
要为 TinyMCE 的“导出为 Word”功能设置 JSON Web Token (JWT) 身份验证:
将公钥添加到您的 Tiny 账户,登录。
通过 Tiny Account - JWT Keys 设置一个 JSON Web Token (JWT) 提供者端点
配置您的 TinyMCE 以使用 JWT 端点。
“导出为 Word”服务器需要一个由将用于 JSON Web Token (JWT) 提供者端点的同一 私钥生成的公钥。存储在“导出为 Word”服务器上的公钥用于确保内容是由授权用户发送的。
在账户门户的 JWT Keys 部分有两种生成和添加公钥的方法:
在 Tiny Account - JWT Keys 上生成新的密钥对(推荐)。
在本地生成密钥对,并在 Tiny Account - JWT Keys 上导入公钥。
使用 Tiny Account JWT Keys 页面生成密钥对
Tiny Account - JWT Keys 页面提供了一个“Generate New Keypair”选项,提供了一种快速且安全的方式来生成所需的密钥。这将存储公钥的副本,并提供一个可下载的文件,包含公钥和私钥。Tiny 不会存储 私钥,并且之后无法检索该密钥对。
在本地生成密钥对并将其添加到账户
这种方法涉及两个步骤:在本地生成密钥对,然后将公钥添加到账户门户。
在本地生成密钥对
在本地生成密钥对时,请使用支持的算法之一。“导出为 Word”不支持对称加密算法,例如 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。
设置一个 JSON Web Token (JWT) 端点
JSON Web Token (JWT) 端点是一个用于生成并向用户提供授权令牌的服务。这些令牌可用于验证提交的内容是由授权用户发送的,并防止未经授权的访问。
下图展示了 JWT 的使用方式:
当用户打开“导出为 Word”功能时:
“导出为 Word”功能代表用户请求一个已签名的 JWT。
如果 JWT 端点授权用户,JWT 端点将向 Export to Word 发送一个 JWT,证明该用户已获得授权。
当用户发出请求(例如导出文档)时,JWT 将随请求一起发送,以表明用户已获得授权。此 JWT 使用存储在 Export to Word 服务器上的公钥进行验证。
Export to Word 服务器发送响应,指示内容提交成功(或必要时未授权)。
JWT 端点要求
Export to Word 的 JSON Web Token (JWT) 端点需要:
端点或服务器接受 JSON HTTP POST 请求。
用户身份验证——一种验证用户身份以及是否应有权访问 Export to Word 的方法。
JWT 使用与提供给Tiny 账户 - JWT 密钥的公钥配对的私钥生成(签名)。
端点或服务器生成包含令牌的 JSON 响应。Export to Word 将随请求一起向 Export to Word 服务器提交令牌。
Export to Word 必需的 JWT 声明
由 JWT 端点生成的 JSON Web Token 必须包含以下声明:
aud (必需)类型:字符串
aud 是一个区分大小写的字符串,必须与启用了 Export to Word 插件的有效 API 密钥匹配。
iat (必需)类型:数字
iat 表示签发时间戳,以秒数表示。例如,要将签发时间设置为当前时间戳,将签发时间计算为当前时间戳除以 1000。
iat: Math.floor(Date.now() / 1000), // 签发时间戳
exp (必需)类型:数字
exp 表示过期时间戳,以秒数表示。例如,要将有效期设置为 10 分钟,将过期时间计算为当前时间戳加 600 秒。
exp: Math.floor(Date.now() / 1000) + (60 * 10) // 过期时间(10 分钟)
服务器设置 (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-----{您的 PKCS8 私钥放在这里}-----END PRIVATE KEY-----`;app.use(express.static(path.join(__dirname, 'public')));// JWT 令牌生成端点app.post('/jwt', (req, res) => { const payload = { aud: 'no-api-key', // 替换为您的实际 API 密钥 iat: Math.floor(Date.now() / 1000), // 签发时间戳 exp: Math.floor(Date.now() / 1000) + (60 * 10) // 过期时间(10 分钟) }; try { // 令牌使用您的私钥通过 RS256 算法签名 const token = jwt.sign(payload, privateKey, { algorithm: 'RS256' }); res.json({ token }); } catch (error) { res.status(500).send('生成 JWT 令牌失败。'); console.error(error.message); }});const PORT = 3000;app.listen(PORT, () => { console.log(`服务器运行在 http://localhost:${PORT}`);});网页 (public/index.html)
在您创建 index.html 文件的 public 文件夹内添加 HTML 设置代码。
<!DOCTYPE html>
<html>
<head>
<title>带有 Export to Word 功能的 TinyMCE</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: 'exportword',
toolbar: 'exportword',
exportword_converter_options: {
'document': {
'size': 'Letter'
}
},
// exportword_token_provider 从 `/jwt` 端点获取令牌。
exportword_token_provider: () => {
return fetch('http://localhost:3000/jwt', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});
</script>
</head>
<body>
<h1>TinyMCE Export to Word 演示</h1>
<textarea>
欢迎使用 TinyMCE!试试 Export to Word 功能。
</textarea>
</body>
</html>配置步骤
添加您的 API 密钥
将两个文件中的
no-api-key替换为您的实际 TinyMCE API 密钥API 密钥在 HTML 脚本源和 JWT 有效负载中应相同
添加您的私钥
将
jwt.js中的私钥占位符替换为您的实际私钥确保其为
PKCS8格式妥善保管此密钥,切勿公开分享
运行您的项目
启动服务器:
node jwt.js
在浏览器中打开:
http://localhost:3000您应该会看到:
TinyMCE 编辑器
工具栏中的“Export to Word”按钮