description: JWT tokens is a common way for authorization of web services.
---
Some cloud services for tinymce requires you to setup jwt token authentication. This allows us to verify that you and your end user is allowed to access a particular feature. Jwt tokens is a common way for authorization of web services and is documented more detail at the [https://jwt.io/](https://jwt.io/) website. This guide aims to show how to setup jwt authentication for the cloud services provided for tinymce.
Some cloud services for TinyMCE requires you to setup JWT token authentication. This allows us to verify that you and your end user are allowed to access a particular feature. JWT tokens are a common way for authorization of web services and they are documented in more detail at the https://jwt.io/ website. This guide aims to show how to setup JWT authentication for the cloud services provided for TinyMCE.
## Private/public key pair
Jwt tokes used by the tinymce cloud services are done using a public/private rsa key. This allows you as an integrator to have full control over the authentication since we don't store the private key only you have access to that key and only you can produce valid jwt tokens. We can only verify that they are valid and extract user information from that token.
## Private/Public Key Pair
The private/public key pair is created in your shop account page but we only store the public key on our side. The private key is for you to store in your backend.
JWT tokens used by the TinyMCE cloud services are done using a public/private RSA key. This allows you as an integrator to have full control over the authentication as we don't store the private key. Only you have access to the private key, and only you can produce valid JWT tokens. We can only verify that they are valid and extract user information from that token.
## Jwt token provider url
The private/public key pair is created in your Tiny account page, but we only store the public key on our side. The private key is for you to store in your backend.
The easiest way to setup jwt token authentication against tinymce cloud services is to create a jwt token provider page. This page takes a JSON HTTP POST request and produces a JSON result with the token that the service will then use for all the http requests.
## PHP Token provider example
## JWT Token Provider URL
This example uses the [firebase jwt library](https://github.com/firebase/php-jwt) provided though [composer](https://getcomposer.org/). The private key should be the private key that got generated on the store page. Each service requires different claims to be provided so the example shows the sub and name claims needed for tiny drive.
The easiest way to setup JWT token authentication against TinyMCE cloud services is to create a JWT token provider page. This page takes a JSON HTTP POST request and produces a JSON result with the token that the service will then use for all the HTTP requests.
<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
## PHP Token Provider Example
$privateKey = <<<EOD
-----BEGIN RSA PRIVATE KEY-----
....
-----END RSA PRIVATE KEY-----
EOD;
This example uses the [Firebase JWT library]("https://github.com/firebase/php-jwt") provided through the Composer dependency manager. The private key should be the private key that was generated through your Tiny Account. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
This example shows you how to setup a node js express handler that produces the jwt tokens. It requires you to install [express](https://expressjs.com/) and the [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) node modules. Each service requires different claims to be provided so the example shows the sub and name claims needed for tiny drive.
This example shows you how to set up a Node.js express handler that produces the JWT tokens. It requires you to install the Express web framework and the JSON web token Node modules. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
**sub** - (required) Unique string to identify the user. This can be a database id, hashed email address or similar.
app.listen(3000);
```
## Tiny Drive Specific JWT Claims:
**sub** - (required) Unique string to identify the user. This can be a database id, hashed email address, or similar identifier.
**name** - (required) Full name of the user that will be used for presentation inside Tiny Drive. When a user uploads a file, the username is presented as the creator of that file.
**name** - (required) Full name of the user this will be used for presentation inside tiny drive when a user uploads a file the user name is presented as the creator of that file.
This example shows you how to use Moxie Manager for your file and image management. Full documentation on MoxieManager, including how to [integrate with TinyMCE](http://www.moxiemanager.com/documentation/index.php/TinyMCE_Integration), can be [found](http://www.moxiemanager.com/documentation/) on the MoxieManager website.
This example shows you how to use Moxie Manager for your file and image management. Full documentation on MoxieManager, including how to [integrate with TinyMCE](http://www.moxiemanager.com/documentation/index.php/TinyMCE_Integration), can be found on the [MoxieManager website](http://www.moxiemanager.com/documentation/).
This example shows you how to use Tiny Drive for your file and image management. For more information on the Tiny Drive plugin, see the [docs]({{site.baseurl}}/plugins/tinydrive/).
@ -17,4 +17,5 @@ MoxieManager is a paid addition to TinyMCE. It is included in [TinyMCE subscript
Full documentation on MoxieManager, including how to [integrate with TinyMCE](http://www.moxiemanager.com/documentation/index.php/TinyMCE_Integration), can be [found](http://www.moxiemanager.com/documentation/) on the MoxieManager website.
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/moxie-manager/).
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/moxie-manager/).
@ -5,32 +5,34 @@ description: Tiny Drive. A premium plugin to manage files & images.
keywords: tinydrive .net php relative_urls
---
## File and Image Management Using Tiny Drive
### Cloud-based File and image Management for TinyMCE
### Cloud-based file and image management for TinyMCE
Tiny Drive is a premium TinyMCE plugin for cloud-based asset management and storage solution. Tiny Drive is a solution for creating rich text by attaching and embedding images, videos, and other files in your document.
The “rich” in rich text generally means images, videos, and other files that are attached or embedded in your document. Until now, it has been difficult and time-consuming to wire up file upload and management to TinyMCE.
Drive presents a cloud-based asset management and storage solution that provides the ease of use of Google Drive without the server requirements of a self-hosted asset manager such as, our own MoxieManager.
To solve this issue, we’re excited to announce the release of Tiny Drive, our cloud-based asset management and storage solution.. If you’ve ever marveled at Google Drive and its ease of use, or considered our own MoxieManager for self-hosted asset management but been discouraged by the server requirements, then Drive will be an excellent solution for you.
### Getting Started
### Getting started
If you you would like to try out Drive and our Cloud-delivered editor, the first step is to create a free Tiny account. When you create an account, you are assigned an API key, which is required for the implementation of Drive. In addition, the API key is also provisioned with a free 30-day trial of all of our premium plugins, with no credit card information or commitment required.
#### Creating an Account
Once you have the API key, or if you are a current Cloud user who already has an API key, then you have access to Drive. In order to get the service up and running, you’ll just need to complete a few more [easy?] steps, outlined in our documentation (link).
If you would like to try out Drive and our Cloud-delivered editor, the first step is to create a free [Tiny account]("https://www.tiny.cloud/download/"). When you create an account, you are assigned an API key, which is required for the implementation of Drive.
We are launching the service with a complimentary 100MB of storage and up to 1 GB of bandwidth.
Security
We know security is a primary concern when it comes to cloud storage. Drive uses an Amazon Web Services S3 bucket, the same storage solution used by companies like Netflix, Thomson Reuters, and Zillow. (You can read about Amazon’s comprehensive security approach here.)
> The API key is also provisioned with a free 30-day trial of all of our [premium plugins](https://apps.tiny.cloud/product-category/tiny-cloud-extensions/), with no credit card information or commitment required.
And as your assets are passed back and forth between your TinyMCE editor instance and the S3 bucket, Drive uses both your API key and a JSON Web Token (JWT) to authenticate each data transaction. Each Drive user will need to create their own JWT, and we walk you through the whole process (link to JWT section of docs).
#### Configuring the Editor for Drive
### What’s next for Drive?
We are working on allowing you the ability to store content in your own corporate S3 bucket. And after that...you tell us! (link to contact form) With what other storage providers should we integrate? Are you happy with using the Tiny S3 bucket, but want more storage and bandwidth? What other features do you want to see on Drive?
Once you have the API key, or if you are a current Cloud user who already has an API key, then you have access to Drive. In order to get the service up and running, you’ll need to complete a few more steps. See our [documentation]({{site.baseurl}}/plugins/tinydrive) for more information.
We are always thrilled to hear from our users, so please reach out and let us know what you think will make Drive -- or any of our products -- even better.
> We are launching the service with a complimentary 100MB of storage and up to 1 GB of bandwidth.
In the meantime, you can find us on Twitter (link) and Github (link), and you can sign up for our newsletter below to stay up-to-date on all the latest and greatest with Tiny.
### Security & Performance
Full documentation on Tiny Drive can be found [here](({{site.baseurl}}/plugins/tinydrive) on the TinyMCE website.
We know security is a primary concern when it comes to cloud storage. Drive uses an [Amazon Web Services S3]("https://aws.amazon.com/s3/") bucket, the same storage solution used by companies like Netflix, Thomson Reuters, and Zillow. (You can read about Amazon’s comprehensive security approach [here]("https://aws.amazon.com/security/").)
As your assets are passed back and forth between your TinyMCE editor instance and the S3 bucket, Drive uses both your API key and a [JSON Web Token](https://jwt.io/introduction/) (JWT) to authenticate each data transaction. Each Drive user will need to create their own JWT, and we walk you through the whole process [here]({{site.baseurl}}/configure/jwt-authentication/).
And to make sure your assets are delivered as fast as possible, we utilize the [Cloudfront CDN]("https://aws.amazon.com/cloudfront/"), which is Amazon’s global content delivery network, known for its low latency and high data transfer speeds.
For more information on Drive see our full [documentation]({{site.baseurl}}/plugins/tinydrive/).
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/tiny-drive/).
description: Cloud-based file and image management for TinyMCE.
keywords: tinydrive storage media tiny drive
---
This plugin adds the functionality to upload and manage files and images to the cloud. This plugin is only available in Tiny Cloud and requires you to register for an API key. To enable this functionality, add the `tinydrive` to the list of plugins in the `tinymce.init` call. You also also need to authenticate the user using a JWT token.
The Tiny Drive plugin adds the functionality to upload and manage files and images to the cloud. This plugin is only available in [Tiny Cloud]("https://www.tiny.cloud/download/") and requires you to register for an API key.
Once you enable Drive it, by default, integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.
To enable this functionality, add `tinydrive` to the list of plugins in the `tinymce.init` call. You also need to authenticate the user using a [JWT token]({{site.baseur}}/configure/jwt-authentication).
## Example
Once you enable Drive it integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive'
});
### Example
```js
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive'
});
```
## Options
These settings are necessary to make Drive work.
These settings are necessary to make the Drive work:
## `tinydrive_token_provider`
###`tinydrive_token_provider`
This setting could either be an URL to a page that takes a HTTP JSON Post request and produces a JSON structure with a valid JWT token. It uses a post request to avoid caching by browsers and proxies.
This setting could take one of the following two forms:
It can also be a function that provides the same token though a callback. This allows you to make your own http request in any format you like. The provider function is a function that has a success and failure callback where the success takes a object with a token property containing the JWT token and the failure callback takes a string to present as an error message if the token could not be produced.
* An URL to a page that takes an HTTP JSON POST request and produces a JSON structure with a valid JWT token. It uses a POST request to avoid caching by browsers and proxies.
* A function that provides the same token through a callback. This allows you to make your own HTTP request in any format you like. The provider function is a function that has a success and failure callback where the success takes an object with a token property containing the JWT token, and the failure callback takes a string to present as an error message if the token could not be produced.
You can read more about how to create these JWT tokens in the [JWT authentication]({{site.baseurl}}/configure/jwt-authentication/) guide.
@ -33,118 +39,77 @@ You can read more about how to create these JWT tokens in the [JWT authenticatio
**Required:** yes
## Example using a JWT token provider URL
#### Example Using a JWT Token Provider URL
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
tinydrive_token_provider: '/jwt'
});
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
tinydrive_token_provider: '/jwt'
});
```
## Example using a JWT token provider callback
#### Example Using a JWT Token Provider Callback
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_token_provider: function (success, failure) {
success({ token: 'jwt-token' });
// failure('Could not create a jwt token')
}
});
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_token_provider: function (success, failure) {
success({ token: 'jwt-token' });
// failure('Could not create a jwt token')
}
});
```
## `tinydrive_upload_path`
###`tinydrive_upload_path`
This setting allows you to change the default upload path for files that get uploaded when pasting content into the editor or uploading directly though the Image dialog or when you drag-and-drop into the editor. It will produce a date based structure within this path like this /uploads/{year}/{month}/{day}. This is to avoid having thousands of files in the same directory as having the default `automatic_uploads` setting enabled it will automatically upload files directly after images are added to the editor.
This setting enables you to change the default upload path for files that get uploaded when pasted into the editor, uploaded directly through the Image dialog, or when you drag-and-drop images into the editor. It will produce a date-based structure within this path like this `/uploads/{year}/{month}/{day}`. This is to avoid having thousands of files in the same directory.
**Type:** `String`
**Default Value:** `"/uploads"`
## Example
#### Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_upload_path: '/some/other/path'
});
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_upload_path: '/some/other/path'
});
```
## Insert File toolbar button
Drive will automatically integrate into the Image, Link, and Media dialogs as a custom file picker. You can also configure it to insert files directly into your content using the '`insertfile`' button. To enable this button add it to your toolbar editor setting.
The Insert File toolbar button will insert an images as `img` tags or other files as links to that file.
## Example of toolbar button
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
toolbar: 'insertfile'
});
## Restrictions and quotas
Tiny drive has some restrictions on what files you can upload and how large these files can be. Here is a list of the current restrictions for Drive.
- The maximum file size is currently set to 100MB.
- Allowed video extensions: mp4 m4v, ogv, webm, mov
- Allowed archive extensions: zip
## Upload files URL
All files are uploaded to a central storage with a CDN endpoint that means that we are hosting your files and they are publicly available in read only mode for anyone that has access to the URL of that file. The URL format for each file is `https://drive.tiny.cloud/1/{your-api-key}/{uuid}` and gets generated when a file is uploaded if you move or rename a file it will still have the same unique URL so restructuring of you files using Drive won't affect where they are being used. However, deleting a file will make mark the URL as being unused and the URL will not continue to work.
## Internal Tiny Drive Options
There are some somewhat internal settings to the client side part of tinydrive aka "clerk" there are publically available but should not be documented externally.
## `tinydrive_script_url`
This setting allows you to override the default path where the lazy loaded asset manager js file is loaded from.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_script_url: 'somedir/assetmanager.js'
});
## `tinydrive_css_url`
This setting allows you to override the default path where the lazy loaded asset manager css file is loaded from.
## Example
Drive will automatically integrate into the Image, Link, and Media dialogs as a file picker. You can also configure it to insert files directly into your content using the `insertfile` button. To enable this button, add it to your toolbar editor setting.
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_css_url: 'somedir/assetmanager.css'
});
The Insert File toolbar button will insert images as `img` elements or other files as links to that file.
##`tinydrive_demo_files_url`
### Example of toolbar button
This setting allows you to create a fake memory only file system from a json structure this allows us to mimic a real file system and demo tiny drive without having to rely on a real server. This will override the `tinydrive_service_url` and `tinydrive_token_provider` settings.
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
toolbar: 'insertfile'
});
```
## Example
## Restrictions and Quotas
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_demo_files_url: 'files.json'
});
Tiny Drive has restrictions on what files can be uploaded and how large these files can be:
* Allowed video extensions: mp4 m4v, ogv, webm, mov
* Allowed archive extensions: zip
This setting allows you to specify where the api endpoint for the backend is it will do requests based on that endpoint like this `{tinydrive_service_url}/{version}/{path}` for example [`http://localhost:4000/1/client/files/list`](http://localhost:4000/1/client/files/list) . This should be configured to the api gateway endpoint for staging, production or local development.
## Upload Files URL
## Example
All files are uploaded to a central storage with a CDN endpoint that means that we are hosting your files and they are publicly available in read-only mode for anyone that has access to the URL of that file.
The URL format for each file is `https://drive.tiny.cloud/1/{your-api-key}/{uuid}` and gets generated when a file is uploaded.
If you move or rename a file, it will still have the same unique URL, so the restructuring of your files using Drive won't affect where they are being used. However, deleting a file will mark the URL as being unused, and the URL will not continue to work.
tinymce.init({
selector: 'textarea', // change this value according to your html
shikha
7 years ago