-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DOC-2582: Add importword and exportword guide.
- Loading branch information
1 parent
9ccd3e0
commit fe7d8fa
Showing
5 changed files
with
430 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
209 changes: 209 additions & 0 deletions
209
modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,209 @@ | ||
= {pluginname} with JWT authentication (Node.js) Guide | ||
:navtitle: JWT Authentication setup for Export to Word | ||
:description: Guide on how to setup JWT Authentication for exporting docx files with Export to Word | ||
:keywords: jwt, authentication, exportword, node.js | ||
:pluginname: Export to Word | ||
:plugincode: exportword | ||
|
||
|
||
== Introduction | ||
|
||
{pluginname} requires setting up JSON Web Token (JWT) authentication to maintain control over file security. A JWT endpoint generates and provides authorization tokens that verify submitted content is sent by authorized users, preventing unauthorized access. As a standard web services authorization solution, JWT is documented extensively at link:https://jwt.io/[https://jwt.io/]. | ||
|
||
This guide provides a comprehensive walkthrough for integrating {pluginname} with {productname}, including {pluginname} functionality, by using a Node.js server for JWT token generation. It covers project setup, server configuration, and {productname} customization. | ||
|
||
== What You'll Build | ||
|
||
Before diving into the technical details, here's what you'll achieve with this guide: | ||
|
||
* A working {pluginname} system for your {productname} editor | ||
* A secure authentication system using JWT tokens | ||
* A simple Node.js server to handle the authentication | ||
|
||
[TIP] | ||
==== | ||
This guide is designed for developers new to JWT authentication and {productname} integration. | ||
==== | ||
|
||
== Prerequisites | ||
|
||
Before starting, ensure you have: | ||
|
||
* Node.js installed on your computer | ||
* A {productname} API key (get one from link:https://www.tiny.cloud/signup[TinyMCE's website]) | ||
* Basic familiarity with the command line | ||
|
||
[IMPORTANT] | ||
==== | ||
Make sure you have your API key ready before starting. You'll need it for both the server and client configuration. | ||
==== | ||
|
||
== Quick Start Guide | ||
|
||
=== Project Setup (5 minutes) | ||
|
||
[source,bash] | ||
---- | ||
# Create and enter project directory | ||
mkdir tinymce-export-to-word | ||
cd tinymce-export-to-word | ||
# Initialize project | ||
npm init -y | ||
# Install required packages | ||
npm install express cors jsonwebtoken | ||
---- | ||
|
||
Verify that the `package.json` file includes the below required dependencies: | ||
|
||
[source,json] | ||
---- | ||
{ | ||
"dependencies": { | ||
"cors": "^2.8.5", | ||
"express": "^4.21.0", | ||
"jsonwebtoken": "^9.0.2" | ||
} | ||
} | ||
---- | ||
|
||
=== Create Project Structure | ||
|
||
[source,bash] | ||
---- | ||
# Create the public folder for your web files | ||
mkdir public | ||
touch public/index.html | ||
touch jwt.js | ||
---- | ||
|
||
Your project should look like this: | ||
|
||
[source] | ||
---- | ||
/tinymce-export-to-word | ||
/public | ||
index.html (TinyMCE webpage) | ||
jwt.js (Server code) | ||
package.json (Project configuration) | ||
---- | ||
|
||
. Inside the `public` folder where you created the `index.html` file add the HTML setup code (refer to the *Setting up {productname} HTML* section). | ||
|
||
==== Web Page Setup (public/index.html) | ||
|
||
[source,html] | ||
---- | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>TinyMCE with Export to Word</title> | ||
<script | ||
src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js" | ||
referrerpolicy="origin"> | ||
</script> | ||
<script> | ||
tinymce.init({ | ||
selector: 'textarea', | ||
plugins: 'exportword', | ||
toolbar: 'exportword', | ||
exportword_converter_options: { | ||
'document': { | ||
'size': 'Letter' | ||
} | ||
}, | ||
exportword_service_url: "<serviceURL>", | ||
// export_token_provider fetches a token from the `/jwt` endpoint. | ||
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 Demo</h1> | ||
<textarea> | ||
Welcome to TinyMCE! Try the Export to Word feature. | ||
</textarea> | ||
</body> | ||
</html> | ||
---- | ||
|
||
. In the root directory, copy and paste the server setup code into the `jwt.js` file (refer to the *Configuring the Node.js Server for JWT Token Generation* section). | ||
|
||
==== Server Setup (jwt.js) | ||
|
||
[source,javascript] | ||
---- | ||
const express = require('express'); // Sets up the web server. | ||
const jwt = require('jsonwebtoken'); // Generates and signs JWTs. | ||
const cors = require('cors'); // Allows cross-origin requests. | ||
const path = require('path'); // Handles file paths. | ||
const app = express(); | ||
app.use(cors()); | ||
// Your private key (Replace this with your actual key) | ||
const privateKey = ` | ||
-----BEGIN PRIVATE KEY----- | ||
{Your private PKCS8 key goes here} | ||
-----END PRIVATE KEY----- | ||
`; | ||
app.use(express.static(path.join(__dirname, 'public'))); | ||
// JWT token generation endpoint | ||
app.post('/jwt', (req, res) => { | ||
const payload = { | ||
aud: 'YOUR-API-KEY-HERE', // Replace with your actual API key | ||
iat: Math.floor(Date.now() / 1000), // Issue timestamp | ||
exp: Math.floor(Date.now() / 1000) + (60 * 10) // Expiration time (10 minutes) | ||
}; | ||
try { | ||
// Tokens are signed with the RS256 algorithm using your private key | ||
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}`); | ||
}); | ||
---- | ||
|
||
=== Configuration Steps | ||
|
||
==== 1. Add Your API Key | ||
|
||
* Replace `YOUR-API-KEY` in both files with your actual {productname} API key | ||
* The API key should be the same in both the HTML script source and the JWT payload | ||
|
||
==== 2. Add Your Private Key | ||
|
||
* Replace the private key placeholder in `jwt.js` with your actual private key | ||
* Make sure it's in `PKCS8` format | ||
* Keep this key secure and never share it publicly | ||
|
||
=== Running Your Project | ||
|
||
. Start the server: | ||
+ | ||
[source,bash] | ||
---- | ||
node jwt.js | ||
---- | ||
|
||
. Open your browser to: `http://localhost:3000` | ||
. You should see: | ||
* The {productname} editor | ||
* An "Export to Word" button in the toolbar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.