Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOC-2583 Add exportword, importword and exportpdf JWT authentication guides for (PHP). #3519

Open
wants to merge 14 commits into
base: tinymce/7
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions modules/ROOT/nav.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -313,12 +313,18 @@
*** xref:advtable.adoc[Enhanced Tables]
*** xref:exportpdf.adoc[Export to PDF]
**** xref:html-to-pdf-converter-api.adoc[HTML to PDF Converter API]
**** JWT Authentication
***** xref:export-to-pdf-with-jwt-authentication-with-php.adoc[Export to PDF with JWT authentication (PHP)]
*** xref:exportword.adoc[Export to Word]
**** xref:html-to-docx-converter-api.adoc[HTML to DOCX Converter API]
**** JWT Authentication
***** xref:export-to-word-with-jwt-authentication-with-php.adoc[Export to Word with JWT Authentication (PHP)]
*** xref:footnotes.adoc[Footnotes]
*** xref:formatpainter.adoc[Format Painter]
*** xref:importword.adoc[Import from Word]
**** xref:docx-to-html-converter-api.adoc[DOCX to HTML Converter API]
**** JWT Authentication
***** xref:import-word-with-jwt-authentication-with-php.adoc[Import From Word with JWT Authentication (PHP)]
*** xref:editimage.adoc[Image Editing]
*** xref:inline-css.adoc[Inline CSS]
*** xref:linkchecker.adoc[Link Checker]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
= Export to PDF with JWT authentication (PHP) Guide
:navtitle: JWT Authentication setup for Export to PDF
:description: Guide on how to setup JWT Authentication for exporting PDF files with {productname}
:keywords: jwt, authentication, exportpdf, pdf, php
:pluginname: Export to PDF
:plugincode: exportpdf

include::partial$auth/document-converters/php/intro-and-prerequisites.adoc[]

include::partial$auth/document-converters/php/initial-project-setup.adoc[]

. 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 (index.html)

[source,html]
----
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE with PDF Export</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: 'exportpdf',
toolbar: 'exportpdf',
exportpdf_converter_options: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
// exportpdf_token_provider fetches a token from the `/jwt.php` endpoint.
exportpdf_token_provider: () => {
return fetch('http://localhost:3000/jwt.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});
</script>
</head>
<body>
<h1>TinyMCE Export to PDF Demo</h1>
<textarea>
Welcome to TinyMCE! Try the Export to PDF feature.
</textarea>
</body>
</html>
----

. In the root directory, copy and paste the server setup code into the `jwt.php` file.

include::partial$auth/document-converters/php/server-setup-php.adoc[]

include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]

include::partial$auth/document-converters/php/configuration-steps.adoc[]
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
= Export to Word with JWT authentication (PHP) Guide
:navtitle: JWT Authentication setup for Export to Word
:description: Guide on how to setup JWT Authentication for exporting Word files with {productname}
:keywords: jwt, authentication, exportword, word, php
:pluginname: Export to Word
:plugincode: exportword

include::partial$auth/document-converters/php/intro-and-prerequisites.adoc[]

include::partial$auth/document-converters/php/initial-project-setup.adoc[]


. 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 (index.html)

[source,html]
----
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE with Word Export</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: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
// exportword_token_provider fetches a token from the `/jwt.php` endpoint.
exportword_token_provider: () => {
return fetch('http://localhost:3000/jwt.php', {
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.php` file.

include::partial$auth/document-converters/php/server-setup-php.adoc[]

include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]

include::partial$auth/document-converters/php/configuration-steps.adoc[]
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
= Import to Word with JWT authentication (PHP) Guide
:navtitle: JWT Authentication setup for Import Word to TinyMCE Edtior
:description: Guide on how to setup JWT Authentication for importing Word files with {productname}
:keywords: jwt, authentication, importword, word, php
:pluginname: Import from Word
:plugincode: importword

include::partial$auth/document-converters/php/intro-and-prerequisites.adoc[]

include::partial$auth/document-converters/php/initial-project-setup.adoc[]

. 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 (index.html)

[source,html]
----
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE with Word Import</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: 'importword',
toolbar: 'importword',
importword_converter_options: {
'format': 'Letter',
'margin_top': '1in',
'margin_right': '1in',
'margin_bottom': '1in',
'margin_left': '1in'
},
// importword_token_provider fetches a token from the `/jwt.php` endpoint.
importword_token_provider: () => {
return fetch('http://localhost:3000/jwt.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
}).then(response => response.json());
},
});
</script>
</head>
<body>
<h1>TinyMCE Import Word Demo</h1>
<textarea>
Welcome to TinyMCE! Try the Import from Word feature.
</textarea>
</body>
</html>
----

. In the root directory, copy and paste the server setup code into the `jwt.php` file.

include::partial$auth/document-converters/php/server-setup-php.adoc[]

include::partial$auth/document-converters/jwt-setup-document-converters.adoc[leveloffset=+1]

include::partial$auth/document-converters/php/configuration-steps.adoc[]
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
[[setting-up-jwt-authentication]]
== Setting up JWT authentication

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

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

include::partial$auth/private-public-key-pairs-for-tiny-cloud-services.adoc[]

[[set-up-a-json-web-token-jwt-endpoint]]
== Set up a JSON Web Token (JWT) endpoint

include::partial$auth/how-jwts-are-used.adoc[]

=== JWT endpoint requirements

A JSON Web Token (JWT) endpoint for {pluginname} requires:

* The endpoint or server accepts a JSON HTTP POST request.
* User authentication - A method of verifying the user, and that they should have access to the {pluginname}.
* The JWTs are generated (signed) using the _private_ key that pairs with the _public_ key provided to link:{accountjwturl}[{accountpage} - JWT Keys].
* The endpoint or server produces a JSON response with the token. {pluginname} will submit the token with requests to the {pluginname} Server.

=== Required JWT claims for {pluginname}

JSON Web Tokens produced by the JWT endpoint must include the following claims:

`+aud+` _(required)_::
*Type:* `+String+`
+
The `aud` is case-sensitive string that must match a valid API key that has the {pluginname} plugin enabled.

`+iat+` _(required)_::
*Type:* `+Number+`
+
The `iat` represents the issue timestamp, specified as the number of seconds. For example, to set the issue time to the current timestamp, calculate the issue time as the current timestamp divided by 1000.

.Example
[source,json]
----
iat: Math.floor(Date.now() / 1000), // Issue timestamp
----

`+exp+` _(required)_::
*Type:* `+Number+`
+
The `exp` represents the expiration timestamp, specified as the number of seconds. For example, to set a validity period of 10 minutes, calculate the expiration time as the current timestamp plus 600 seconds.

.Example
[source,json]
----
exp: Math.floor(Date.now() / 1000) + (60 * 10) // Expiration time (10 minutes)
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
=== 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.php` 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]
----
php -S localhost:3000
----

. Open your browser to: `http://localhost:3000`
. You should see:
* The {productname} editor
* An "{pluginname}" button in the toolbar
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
== Update PHP php.ini Files

Update files inside the downloaded php package:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What downloaded php package is this referring to?


* php.ini
* php.ini-development
* php.ini-production

Ensure the following lines are uncommented:

[source, bash]
----
extension=openssl
extension_dir={Depends on your development environment}
----

== Quick Start Guide

=== Project Setup (5 minutes)

[source,bash]
----
# Create and enter project directory
mkdir tinymce-app
cd tinymce-app
# Initialize Composer
composer require firebase/php-jwt
----

=== Create Project Structure

[source,bash]
----
# Create the public folder for your web files
touch index.html
touch jwt.php
----

Your project should look like this:

[source]
----
/tinymce-app
index.html (TinyMCE webpage)
jwt.php (Server code)
composer
composer.lock
vendor
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
== 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 PHP 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 {productname} editor running {pluginname} plugin.
* A secure authentication system using JWT tokens
* A simple PHP 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:

* PHP installed on your computer
* OpenSSL installed on your computer
* Composer 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.
====
Loading
Loading