简介
导出到 PDF 需要设置 JSON Web Token (JWT) 身份验证,以保持对文件安全性的控制。JWT 端点生成并提供授权令牌,用于验证提交的内容是由授权用户发送的,从而防止未经授权的访问。作为标准的 Web 服务授权解决方案,JWT 在 https://jwt.io/ 上有详尽的文档说明。
本指南提供了将 Export to PDF 与 TinyMCE 集成的全面教程,包括使用 Node.js 服务器生成 JWT 令牌来实现 Export to PDF 功能。内容涵盖项目设置、服务器配置和 TinyMCE 自定义。
您将构建什么
在深入探讨技术细节之前,以下是通过本指南您将实现的目标:
一个运行 Export to PDF 插件的可用 TinyMCE 编辑器
一个使用 JWT 令牌的安全身份验证系统
一个简单的 Node.js 服务器来处理身份验证
本指南是为新接触 JWT 身份验证和 TinyMCE 集成的开发人员设计的。
先决条件
开始之前,请确保您具备以下条件:
计算机上已安装 Node.js(检查方法是在终端中运行
node -v)一个 TinyMCE API 密钥(可从 TinyMCE 的网站获取)
基本熟悉命令行
请确保在开始前准备好您的 API 密钥。服务器和客户端配置都需要用到它。
快速入门指南
项目设置
# Create and enter project directory mkdir tinymce-my-app cd tinymce-my-app # Initialize project npm init -y # Install required packages npm install express cors jsonwebtoken
验证 package.json 文件现在是否包含所需的依赖项。
创建项目结构
# Create the public folder for your web files mkdir public touch public/index.html touch jwt.js
您的项目应如下所示:
/tinymce-my-app
/public
index.html (TinyMCE webpage)
jwt.js (Server code)
package.json (Project configuration)设置
生成公钥/私钥对
设置 JWT 身份验证
要为 TinyMCE Export to PDF 设置 JSON Web Token (JWT) 身份验证:
将公钥添加到您的 Tiny 账户,登录。
通过 Tiny 账户 - JWT 密钥 设置一个 JSON Web Token (JWT) 提供者端点
配置您的 TinyMCE 以使用 JWT 端点。
Export to PDF 服务器需要一个由将用于 JSON Web Token (JWT) 提供者端点的相同私钥生成的公钥。存储在 Export to PDF 服务器上的公钥用于确保内容是由授权用户发送的。
在账户门户的 JWT 密钥部分有两种生成和添加公钥的方法:
在 Tiny 账户 - JWT 密钥 生成新的密钥对(推荐)。
在本地生成密钥对,并在 Tiny 账户 - JWT 密钥 导入公钥。
使用 Tiny 账户 JWT 密钥页面生成密钥对
Tiny 账户 - JWT 密钥页面提供了“生成新密钥对”选项,这是一种快速且安全的生成所需密钥的方法。这将存储一份公钥的副本,并提供一个可下载的文件,包含公钥和私钥。Tiny 不会存储私钥,并且该密钥对之后无法检索。
在本地生成密钥对并将其添加到账户
此方法涉及两个步骤:在本地生成密钥对,然后将公钥添加到账户门户。
在本地生成密钥对
在本地生成密钥对时,请使用一种受支持的算法。Export to PDF 不支持对称加密算法,例如 HS256。Tiny 建议使用 RS256 算法。以下算法受支持:
RS256
RS384
RS512
PS256
PS384
PS512
有关这些算法的详细信息,请访问:RFC 7518,JSON Web 算法 (JWA) 第 3 节 - 数字签名和 MAC 的加密算法。
有关在本地生成密钥对的说明,请参阅:为 Tiny Cloud 创建私钥/公钥对。
在账户门户的 JWT 密钥部分添加公钥
一旦在本地生成了公钥,请使用账户门户 JWT 密钥部分中的“导入公钥”选项:Tiny 账户 - JWT 密钥。
设置一个 JSON Web Token (JWT) 端点
JSON Web Token (JWT) 端点是一个用于生成并向用户提供授权令牌的服务。这些令牌可用于验证提交的内容是由授权用户发送的,并防止未经授权的访问。
下图展示了 JWT 的使用方式:
当用户打开 Export to PDF 时:
Export to PDF 代表用户请求一个已签名的 JWT。
如果您的 JWT 端点授权用户,您的 JWT 端点将向 Export to PDF 发送一个 JWT,以证明该用户已获得授权。
当用户发出请求(如导出文档)时,JWT 将随请求一起发送,以表明该用户已获得授权。此 JWT 使用存储在 Export to PDF Server 上的公钥进行验证。
Export to PDF Server 发送响应,指示内容提交成功(或在必要时指示未授权)。
JWT 端点要求
Export to PDF 的 JSON Web Token (JWT) 端点需要满足以下要求:
端点或服务器接受 JSON HTTP POST 请求。
用户身份验证 - 一种验证用户身份及其是否应有权访问 Export to PDF 的方法。
JWT 是使用与提供给 Tiny Account - JWT Keys 的公钥配对的私钥生成(签名)的。
端点或服务器生成包含令牌的 JSON 响应。Export to PDF 将随请求一起提交该令牌给 Export to PDF Server。
Export to PDF 所需的 JWT 声明
JWT 端点生成的 JSON Web Token 必须包含以下声明:
aud (必选)类型: 字符串
aud 是一个区分大小写的字符串,必须与启用了 Export to PDF 插件的有效 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 PDF 功能的 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: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_converter_options: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
// exportpdf_token_provider 从 `/jwt` 端点获取令牌。
exportpdf_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 PDF 演示</h1>
<textarea>
欢迎使用 TinyMCE!请尝试 Export to PDF 功能。
</textarea>
</body>
</html>配置步骤
添加您的 API 密钥
将两个文件中的
no-api-key替换为您的实际 TinyMCE API 密钥HTML 脚本源和 JWT 负载中的 API 密钥应相同
添加您的私钥
将
jwt.js中的私钥占位符替换为您的实际私钥确保其格式为
PKCS8妥善保管此密钥,切勿公开分享
运行您的项目
启动服务器:
node jwt.js
在浏览器中打开:
http://localhost:3000您应该会看到:
TinyMCE 编辑器
工具栏中的“导出为PDF”按钮