- 快速入门
- Explore advanced topics
- Accessibility
- Editor control identifiers
- Annotations
- Editor events
- tinymce-AddOnManager
- Boilerplate content CSS
- Handle asynchronous image uploads
- tinymce-Annotator
- tinymce-FocusEvent
- Configuring callbacks for Comments 2-0
- Keyboard shortcuts
- tinymce-CommandEvent
- tinymce-FocusManager
- tinymce-WindowManager
- Toolbar buttons
- PHP image upload handler
- tinymce-ContentEvent
- tinymce-Formatter
- tinymce-dom-DomQuery
- Create a plugin for TinyMCE
- Security
- tinymce-Editor
- tinymce-NotificationManager
- tinymce-dom-DOMUtils
- Create a skin for TinyMCE
- Usage with module loaders
- tinymce-EditorCommands
- tinymce-Plugin
- tinymce-dom-ScriptLoader
- Create custom notifications
- TinyMCE plugin Yeoman generator
- tinymce-EditorManager
- tinymce-ProgressStateEvent
- tinymce-dom-BookmarkManager
- Editor command identifiers
- tinymce-Formatter
- tinymce-EditorObservable
- tinymce-ResizeEvent
- tinymce-dom-ControlSelection
- tinymce
- tinymce-Env
- tinymce-Shortcuts
- tinymce-dom-DomQuery
- tinymce-Event
- tinymce-Theme
- tinymce-dom-DOMUtils
- tinymce-UndoManager
- tinymce-dom-EventUtils
- tinymce-dom-RangeUtils
- tinymce-dom-ScriptLoader
- tinymce-dom-Selection
- tinymce-html-Schema
- tinymce-dom-Serializer
- tinymce-html-Serializer
- tinymce-util-I18n
- tinymce-dom-TreeWalker
- tinymce-html-Styles
- tinymce-util-JSON
- Cloud deployment of plugins Only
- tinymce-editor-ui-registry
- tinymce-html-Writer
- tinymce-util-JSONRequest
- Version compatibility reference
- Image & file upload options
- tinymce-geom-Rect
- tinymce-util-LocalStorage
- Configuration options reference
- Integration and setup options
- tinymce-html-DomParser
- tinymce-util-Observable
- tinymce-util-Observable
- Advanced editing behaviors
- JWT authentication setup
- tinymce-html-Entities
- tinymce-util-URI
- tinymce-util-Tools
- Content appearance options
- Localization options
- tinymce-html-Node
- tinymce-util-Color
- tinymce-util-XHR
- Content filtering options
- Spelling options
- tinymce-html-SaxParser
- tinymce-util-Delay
- Cloud deployment guide
- Content formatting options
- URL handling options
- tinymce-util-EventDispatcher
- Cloud deployment of editor & plugins
- Contribute to documentation
- Examples & demos
- Specify editor & plugin versions
- Contribute to TinyMCE development
- Basic example
- User interface options
- Case Change
- Checklist plugin
- Classic editor example
- Comments 2-0 Demo
- Custom formats example
- Custom menu item
- HTML5 formats example
- Valid elements example
- Custom toolbar button
- Format Painter
- Live example
- Embed rich media
- Full featured example
- Premium features
- Configure Enhanced Media Embed Server
- Server-side component installation
- Custom toolbar menu button
- Image tools example
- Accessibility checking
- Integrate Enhanced Media Embed Server
- Configure server-side components
- Custom toolbar split button
- Inline editor example
- Advanced source code editing
- Format Painter
- Troubleshoot server-side components
- Tiny Drive
- Local upload
- Case Change
- Get TinyMCE bugs fixed
- Professional support
- Distraction-free editor example
- Page Embed plugin
- Checking links as-you-type
- Mentions
- System requirements
- Basic local file picker
- Permanent Pen plugin
- Check Spelling As-You-Type
- Self-hosted file management
- Commenting & collaboration
- URL conversion example
- Adding custom dictionaries
- Page Embed plugin
- Cloud-based file management
- Checklist plugin
- Paste from Word
- Introduction & getting started
- Permanent Pen Plugin
- Advanced installation choices
- Logo & attribution requirements
- Basic setup
- Customizing the editor UI
- TinyMCE distraction-free editing mode
- Filtering TinyMCE content
- Setup inline editing mode
- Rails integration
- Get Support & FAQ
- Work with plugins to extend TinyMCE
- React integration
- Advanced Code Editor plugin
- Localize TinyMCE
- Integrate with other projects
- TinyMCE for Swing integration
- Advanced List plugin
- Code plugin
- Use multiple TinyMCE instances in a single page
- Angular 2+ integration
- Vue integration
- Anchor plugin
- Code Sample plugin
- Check spelling in TinyMCE
- Angular 1 integration
- WordPress integration
- Autolink plugin
- Color Picker plugin
- System requirements
- Bootstrap integration
- Migrating from TinyMCE 4-x to TinyMCE 5-0-
- Autoresize plugin
- Comments 2-0
- Uploading images and files
- Dojo integration
- TinyMCE Mobile
- Autosave plugin
- TinyMCE classic editing mode
- jQuery integration
- BBCode plugin
- Context Menu plugin
- KnockoutJS integration
- Add plugins to TinyMCE
- Case Change
- Directionality plugin
- Accessibility Checker plugin
- Character Map plugin
- Drive plugin
- Checklist plugin
- Emoticons plugin
- Format Painter
- Full Page plugin
- Full Screen plugin
- Link Checker plugin
- Help plugin
- Lists plugin
- Paste plugin
- Horizontal Rule plugin
- Media plugin
- Permanent Pen Plugin
- Table plugin
- Image plugin
- Enhanced Media Embed plugin
- PowerPaste plugin
- Template plugin
- User interface components
- Image Tools plugin
- Mentions plugin
- Preview plugin
- Text Color plugin
- Autocompleter
- Import CSS plugin
- MoxieManager plugin
- Print plugin
- Text Pattern plugin
- Context forms
- Insert Date/Time plugin
- Nonbreaking Space plugin
- Quick Toolbar plugin
- Spell Checker Pro plugin
- Context menu
- Legacy Output plugin
- Noneditable plugin
- Save plugin
- Table of Contents plugin
- Context toolbar
- Link plugin
- Page Break plugin
- Search and Replace plugin
- Visual Blocks plugin
- Custom sidebar
- Page Embed plugin
- Spell Checker plugin
- Visual Characters plugin
- Dialog
- Tab Focus plugin
- Word Count plugin
- Dialog components
- Quick start
- Custom menu items
- Toolbar buttons
- Types of toolbar buttons
JWT authentication setup
Audience
This section is intended to be used by developers with prior knowledge of JSON Web Token (or JWT) in detail, including how they can be used for user authentication and session management in a web application. There will be some coding involved on both the client-side and the server-side to configure JWT as per the instructions in this section.
Introduction
Some cloud services for TinyMCE require you to setup JWT authentication. This allows us to verify that you and your end user are allowed to access a particular feature. JWT is a common authorization solution for web services and is documented in more detail at the https://jwt.io/ website. The guide aims to show how to setup JWT authentication for the cloud services provided for TinyMCE.
Private/public key pair
Tokens used by the TinyMCE cloud services make use of a public/private RSA key-pair. 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 tokens. We can only verify that they are valid and extract user information from that token.
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.
JWT provider URL
The easiest way to setup JWT authentication against TinyMCE cloud services is to create a JWT provider endpoint. This endpoint 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.
The following diagram explains the JWT call flow:
JWT requirements
Algorithm
The following algorithms are supported for the JWT header/signature:
- RS256
- RS384
- RS512
- PS256
- PS384
- PS512
All of these algorithms use the private RSA key to sign the JWT, but vary in how they execute. RS256
, the most widely supported algorithm, features in following code examples.
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 the user uploads a file, this name is presented as the creator of that file.
PHP token provider example
This example uses the Firebase JWT library 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.
<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$privateKey = <<<EOD
-----BEGIN PRIVATE KEY-----
....
-----END PRIVATE KEY-----
EOD;
$payload = array(
// Unique user id string
"sub" => "123",
// Full name of user
"name" => "John Doe",
// Optional custom user root path
// "https://claims.tiny.cloud/drive/root" => "/johndoe",
// 10 minutes expiration
"exp" => time() + 60 * 10
);
try {
$token = JWT::encode($payload, $privateKey, 'RS256');
http_response_code(200);
header('Content-Type: application/json');
echo json_encode(array("token" => $token));
} catch (Exception $e) {
http_response_code(500);
header('Content-Type: application/json');
echo $e->getMessage();
}
?>
Node token provider example
This example shows you how to set up a Node.js express handler that produces the tokens. It requires you to install the Express web framework and the jsonwebtoken
Node modules. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
const express = require('express');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const app = express();
app.use(cors());
const privateKey = `
-----BEGIN PRIVATE KEY-----
....
-----END PRIVATE KEY-----
`;
app.post('/jwt', function (req, res) {
const payload = {
// Unique user id string
sub: '123',
// Full name of user
name: 'John Doe',
// Optional custom user root path
// 'https://claims.tiny.cloud/drive/root': '/johndoe',
// 10 minutes expiration
exp: Math.floor(Date.now() / 1000) + (60 * 10)
};
try {
const token = jwt.sign(payload, privateKey, { algorithm: 'RS256'});
res.set('content-type', 'application/json');
res.status(200);
res.send(JSON.stringify({
token: token
}));
} catch (e) {
res.status(500);
res.send(e.message);
}
});
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.
https://claims.tiny.cloud/drive/root - (optional) Full path to a tiny drive specific root for example “/johndoe”.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论