简介

使用“导出为 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) 身份验证:

  1. 将公钥添加到您的 Tiny 账户,登录。

  2. 通过 Tiny Account - JWT Keys 设置一个 JSON Web Token (JWT) 提供者端点

  3. 配置您的 TinyMCE 以使用 JWT 端点。

“导出为 Word”服务器需要一个由将用于 JSON Web Token (JWT) 提供者端点的同一 私钥生成的公钥。存储在“导出为 Word”服务器上的公钥用于确保内容是由授权用户发送的。

在账户门户的 JWT Keys 部分有两种生成和添加公钥的方法:

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

  2. 在本地生成密钥对,并在 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 的使用方式:

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

当用户打开“导出为 Word”功能时:

  1. “导出为 Word”功能代表用户请求一个已签名的 JWT。

  2. 如果 JWT 端点授权用户,JWT 端点将向 Export to Word 发送一个 JWT,证明该用户已获得授权。

  3. 当用户发出请求(例如导出文档)时,JWT 将随请求一起发送,以表明用户已获得授权。此 JWT 使用存储在 Export to Word 服务器上的公钥进行验证。

  4. 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 格式

  • 妥善保管此密钥,切勿公开分享

运行您的项目

  1. 启动服务器:

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

  3. 您应该会看到:

    • TinyMCE 编辑器

    • 工具栏中的“Export to Word”按钮