Skip to content

Commit ee66416

Browse files
kemister85LewisAtTinyFarzad Hayatabhinavgandham
authored
DOC-2582: Add exportword, importword and exportpdf JWT authentication guides for (Node.js). (#3517)
* DOC-2582: Export to PDF with JWT authentication (Node.js) Guide. * Update modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc * DOC-2582: Add importword and exportword guide. * DOC-2582: Update comments in the html sorce examples. * DOC-2582: Replace duplicated content with partials, cleaned up lvl headings in sidebar. * Update modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/pages/importword-with-jwt-authentication-nodejs.adoc * DOC-2582: Update folder structure and naming, added JWT setup, fixed nav.adoc. * DOC-2582: Copy edits, fix typos. * Update modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/auth/document-converters/server-setup-jwt.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/exportword.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/auth/document-converters/initial-project-setup.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/auth/document-converters/initial-project-setup.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/auth/document-converters/initial-project-setup.adoc * Update modules/ROOT/pages/importword-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc * Update modules/ROOT/partials/auth/document-converters/jwt-setup-document-converters.adoc Co-authored-by: CODE:AG <[email protected]> * DOC-2582: Minor copy edits. --------- Co-authored-by: LewisAtTiny <[email protected]> Co-authored-by: Farzad Hayat <[email protected]> Co-authored-by: CODE:AG <[email protected]>
1 parent 01db151 commit ee66416

10 files changed

+344
-6
lines changed

‎modules/ROOT/nav.adoc‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,17 +314,20 @@
314314
*** xref:exportpdf.adoc[Export to PDF]
315315
**** xref:html-to-pdf-converter-api.adoc[HTML to PDF Converter API]
316316
**** JWT Authentication
317-
***** xref:export-to-pdf-with-jwt-authentication-with-php.adoc[Export to PDF with JWT authentication (PHP)]
317+
***** xref:export-to-pdf-with-jwt-authentication-nodejs.adoc[NodeJS]
318+
***** xref:export-to-pdf-with-jwt-authentication-with-php.adoc[PHP]
318319
*** xref:exportword.adoc[Export to Word]
319320
**** xref:html-to-docx-converter-api.adoc[HTML to DOCX Converter API]
320321
**** JWT Authentication
321-
***** xref:export-to-word-with-jwt-authentication-with-php.adoc[Export to Word with JWT Authentication (PHP)]
322+
***** xref:export-to-word-with-jwt-authentication-nodejs.adoc[NodeJS]
323+
***** xref:export-to-word-with-jwt-authentication-with-php.adoc[PHP]
322324
*** xref:footnotes.adoc[Footnotes]
323325
*** xref:formatpainter.adoc[Format Painter]
324326
*** xref:importword.adoc[Import from Word]
325327
**** xref:docx-to-html-converter-api.adoc[DOCX to HTML Converter API]
326328
**** JWT Authentication
327-
***** xref:import-word-with-jwt-authentication-with-php.adoc[Import From Word with JWT Authentication (PHP)]
329+
***** xref:importword-with-jwt-authentication-nodejs.adoc[NodeJS]
330+
***** xref:import-word-with-jwt-authentication-with-php.adoc[PHP]
328331
*** xref:editimage.adoc[Image Editing]
329332
*** xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare]
330333
*** xref:inline-css.adoc[Inline CSS]

‎modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
= {pluginname} with JWT authentication (Node.js) Guide
2+
:navtitle: JWT Authentication setup for Export to PDF
3+
:description: Guide on how to setup JWT Authentication for exporting pdf files with Export to PDF
4+
:keywords: jwt, authentication, exportpdf, pdf, node.js
5+
:pluginname: Export to PDF
6+
:plugincode: exportpdf
7+
8+
9+
include::partial$auth/document-converters/intro-and-prerequisites.adoc[]
10+
11+
include::partial$auth/document-converters/initial-project-setup.adoc[]
12+
13+
== Setup
14+
15+
include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]
16+
17+
. 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).
18+
19+
include::partial$auth/document-converters/server-setup-jwt.adoc[]
20+
21+
=== Web Page (public/index.html)
22+
23+
[source,html]
24+
----
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<title>TinyMCE with PDF Export</title>
29+
<script
30+
src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
31+
referrerpolicy="origin">
32+
</script>
33+
<script>
34+
tinymce.init({
35+
selector: 'textarea',
36+
plugins: 'exportpdf',
37+
toolbar: 'exportpdf',
38+
exportpdf_converter_options: {
39+
'format': 'Letter',
40+
'margin_top': '1in',
41+
'margin_right': '1in',
42+
'margin_bottom': '1in',
43+
'margin_left': '1in'
44+
},
45+
46+
// exportpdf_token_provider fetches a token from the `/jwt` endpoint.
47+
exportpdf_token_provider: () => {
48+
return fetch('http://localhost:3000/jwt', {
49+
method: 'POST',
50+
headers: { 'Content-Type': 'application/json' },
51+
}).then(response => response.json());
52+
},
53+
});
54+
</script>
55+
</head>
56+
<body>
57+
<h1>TinyMCE Export to PDF Demo</h1>
58+
<textarea>
59+
Welcome to TinyMCE! Try the Export to PDF feature.
60+
</textarea>
61+
</body>
62+
</html>
63+
----
64+
65+
include::partial$auth/document-converters/configuration-steps.adoc[]

‎modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
= {pluginname} with JWT authentication (Node.js) Guide
2+
:navtitle: JWT Authentication setup for Export to Word
3+
:description: Guide on how to setup JWT Authentication for exporting docx files with Export to Word
4+
:keywords: jwt, authentication, exportword, node.js
5+
:pluginname: Export to Word
6+
:plugincode: exportword
7+
8+
9+
include::partial$auth/document-converters/intro-and-prerequisites.adoc[]
10+
11+
include::partial$auth/document-converters/initial-project-setup.adoc[]
12+
13+
== Setup
14+
15+
include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]
16+
17+
. 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).
18+
19+
include::partial$auth/document-converters/server-setup-jwt.adoc[]
20+
21+
=== Web Page (public/index.html)
22+
23+
[source,html]
24+
----
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<title>TinyMCE with Export to Word</title>
29+
<script
30+
src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
31+
referrerpolicy="origin">
32+
</script>
33+
<script>
34+
tinymce.init({
35+
selector: 'textarea',
36+
plugins: 'exportword',
37+
toolbar: 'exportword',
38+
exportword_converter_options: {
39+
'document': {
40+
'size': 'Letter'
41+
}
42+
},
43+
44+
// exportword_token_provider fetches a token from the `/jwt` endpoint.
45+
exportword_token_provider: () => {
46+
return fetch('http://localhost:3000/jwt', {
47+
method: 'POST',
48+
headers: { 'Content-Type': 'application/json' },
49+
}).then(response => response.json());
50+
},
51+
});
52+
</script>
53+
</head>
54+
<body>
55+
<h1>TinyMCE Export to Word Demo</h1>
56+
<textarea>
57+
Welcome to TinyMCE! Try the Export to Word feature.
58+
</textarea>
59+
</body>
60+
</html>
61+
----
62+
63+
include::partial$auth/document-converters/configuration-steps.adoc[]

‎modules/ROOT/pages/importword-with-jwt-authentication-nodejs.adoc‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
= {pluginname} with JWT authentication (Node.js) Guide
2+
:navtitle: JWT Authentication setup for Import from Word
3+
:description: Guide on how to setup JWT Authentication for importing docx (MS Word) files with Import from Word
4+
:keywords: jwt, authentication, importword, node.js
5+
:pluginname: Import from Word
6+
:plugincode: importword
7+
8+
9+
include::partial$auth/document-converters/intro-and-prerequisites.adoc[]
10+
11+
include::partial$auth/document-converters/initial-project-setup.adoc[]
12+
13+
== Setup
14+
15+
include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]
16+
17+
. In the root directory, copy and paste the server setup code into the `jwt.js` file (refer to the *Server Setup (jwt.js)* section).
18+
19+
include::partial$auth/document-converters/server-setup-jwt.adoc[]
20+
21+
=== Web Page (public/index.html)
22+
23+
[source,html]
24+
----
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<title>TinyMCE with Import from Word</title>
29+
<script
30+
src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
31+
referrerpolicy="origin">
32+
</script>
33+
<script>
34+
tinymce.init({
35+
selector: 'textarea',
36+
plugins: 'importword',
37+
toolbar: 'importword',
38+
importword_converter_options: {
39+
'formatting': {
40+
'styles': 'inline',
41+
'resets': 'inline',
42+
'defaults': 'inline',
43+
}
44+
},
45+
46+
// importword_token_provider fetches a token from the `/jwt` endpoint.
47+
importword_token_provider: () => {
48+
return fetch('http://localhost:3000/jwt', {
49+
method: 'POST',
50+
headers: { 'Content-Type': 'application/json' },
51+
}).then(response => response.json());
52+
},
53+
});
54+
</script>
55+
</head>
56+
<body>
57+
<h1>TinyMCE Import from Word Demo</h1>
58+
<textarea>
59+
Welcome to TinyMCE! Try the Import from Word feature.
60+
</textarea>
61+
</body>
62+
</html>
63+
----
64+
65+
include::partial$auth/document-converters/configuration-steps.adoc[]

‎modules/ROOT/partials/auth/document-converters/configuration-steps.adoc‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
== Configuration Steps
2+
3+
=== Add Your API Key
4+
5+
* Replace `YOUR-API-KEY` in both files with your actual {productname} API key
6+
* The API key should be the same in both the HTML script source and the JWT payload
7+
8+
=== Add Your Private Key
9+
10+
* Replace the private key placeholder in `jwt.js` with your actual private key
11+
* Make sure it's in `PKCS8` format
12+
* Keep this key secure and never share it publicly
13+
14+
=== Running Your Project
15+
16+
. Start the server:
17+
+
18+
[source,bash]
19+
----
20+
node jwt.js
21+
----
22+
23+
. Open your browser to: `http://localhost:3000`
24+
. You should see:
25+
* The {productname} editor
26+
* An "{pluginname}" button in the toolbar

‎modules/ROOT/partials/auth/document-converters/initial-project-setup.adoc‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
== Quick Start Guide
2+
3+
=== Project Setup
4+
5+
[source,bash]
6+
----
7+
# Create and enter project directory
8+
mkdir tinymce-my-app
9+
cd tinymce-my-app
10+
11+
# Initialize project
12+
npm init -y
13+
14+
# Install required packages
15+
npm install express cors jsonwebtoken
16+
----
17+
18+
Verify that the `package.json` file now includes the required dependencies.
19+
20+
=== Create Project Structure
21+
22+
[source,bash]
23+
----
24+
# Create the public folder for your web files
25+
mkdir public
26+
touch public/index.html
27+
touch jwt.js
28+
----
29+
30+
Your project should look like this:
31+
32+
[source]
33+
----
34+
/tinymce-my-app
35+
/public
36+
index.html (TinyMCE webpage)
37+
jwt.js (Server code)
38+
package.json (Project configuration)
39+
----
40+
41+
. Inside the `public` folder where you created the `index.html` file add the HTML setup code (refer to the *Web Page (public/index.html)* section).

‎modules/ROOT/partials/auth/document-converters/intro-and-prerequisites.adoc‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
== Introduction
2+
3+
{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/].
4+
5+
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.
6+
7+
=== What You'll Build
8+
9+
Before diving into the technical details, here's what you'll achieve with this guide:
10+
11+
* A working {productname} editor running {pluginname} plugin.
12+
* A secure authentication system using JWT token.
13+
* A simple Node.js server to handle the authentication.
14+
15+
[TIP]
16+
====
17+
This guide is designed for developers new to JWT authentication and {productname} integration.
18+
====
19+
20+
=== Prerequisites
21+
22+
Before starting, ensure you have:
23+
24+
* Node.js installed on your computer
25+
* A {productname} API key (get one from link:https://www.tiny.cloud/signup[TinyMCE's website])
26+
* Basic familiarity with the command line
27+
28+
[IMPORTANT]
29+
====
30+
Make sure you have your API key ready before starting. You'll need it for both the server and client configuration.
31+
====

‎modules/ROOT/partials/auth/document-converters/jwt-setup-document-converters.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
To set up JSON Web Token (JWT) authentication for {productname} {pluginname}:
55

6-
. Add a public key to you {accountpage}, link:https://www.tiny.cloud/auth/login/[login].
6+
. Add a public key to your {accountpage}, link:https://www.tiny.cloud/auth/login/[login].
77
. Set up a JSON Web Token (JWT) Provider endpoint via link:{accountjwturl}[{accountpage} - JWT Keys]
88
. Configure your {productname} to use the JWT endpoint.
99

‎modules/ROOT/partials/auth/document-converters/server-setup-jwt.adoc‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
=== Server Setup (jwt.js)
2+
3+
[source,javascript]
4+
----
5+
const express = require('express'); // Sets up the web server.
6+
const jwt = require('jsonwebtoken'); // Generates and signs JWTs.
7+
const cors = require('cors'); // Allows cross-origin requests.
8+
const path = require('path'); // Handles file paths.
9+
10+
const app = express();
11+
app.use(cors());
12+
13+
// Your private key (Replace this with your actual key)
14+
const privateKey = `
15+
-----BEGIN PRIVATE KEY-----
16+
{Your private PKCS8 key goes here}
17+
-----END PRIVATE KEY-----
18+
`;
19+
20+
app.use(express.static(path.join(__dirname, 'public')));
21+
22+
// JWT token generation endpoint
23+
app.post('/jwt', (req, res) => {
24+
const payload = {
25+
aud: 'YOUR-API-KEY', // Replace with your actual API key
26+
iat: Math.floor(Date.now() / 1000), // Issue timestamp
27+
exp: Math.floor(Date.now() / 1000) + (60 * 10) // Expiration time (10 minutes)
28+
};
29+
30+
try {
31+
// Tokens are signed with the RS256 algorithm using your private key
32+
const token = jwt.sign(payload, privateKey, { algorithm: 'RS256' });
33+
res.json({ token });
34+
} catch (error) {
35+
res.status(500).send('Failed to generate JWT token.');
36+
console.error(error.message);
37+
}
38+
});
39+
40+
const PORT = 3000;
41+
app.listen(PORT, () => {
42+
console.log(`Server running at http://localhost:${PORT}`);
43+
});
44+
----

‎modules/ROOT/partials/auth/private-public-key-pairs-for-tiny-cloud-services.adoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The {pluginname} Server requires a _public_ key generated from the same _private_ key that will be used on your JSON Web Token (JWT) provider endpoint. The public key(s) stored on the {pluginname} Server are used to ensure that content is sent by authorized users.
1+
The **{pluginname}** Server requires a _public_ key generated from the same _private_ key that will be used on your JSON Web Token (JWT) provider endpoint. The public key(s) stored on the {pluginname} Server are used to ensure that content is sent by authorized users.
22

33
There are two methods for generating and adding a public key to your API key:
44

@@ -7,7 +7,7 @@ There are two methods for generating and adding a public key to your API key:
77

88
== Generate a key pair using the {accountpage} JWT Keys page
99

10-
The link:{accountjwturl}[{accountpage} - JWT Keys] page provides a private/public key generator, providing a quick and secure way of generating the required keys. This generator will store a copy of the _public_ key, and provide a downloadable file for both the public and private keys. {companyname} does not store the _private_ key and the key pair cannot be retrieved later.
10+
The link:{accountjwturl}[{accountpage} - JWT Keys] page provides a private/public key generator, providing a quick and secure way of generating the required keys. This generator will store a copy of the _public_ key, and provide a downloadable file for both the public and private keys. {companyname} does **not store** the _private_ key and the key pair **cannot** be retrieved later.
1111

1212
[[generate-a-key-pair-locally]]
1313
== Generate a key pair locally

0 commit comments

Comments
 (0)