Descripción
This plugin allows you to sign HTML DOM element content with CryptoPro GOST certificates.
Element content will be converted to PDF and signed by selected cretificate.
Plugin uses https://www.npmjs.com/package/crypto-pro-actual-cades-plugin#api-cryptopro lib
JavaScript Libraries
This plugin uses the following JavaScript libraries:
- jsPDF v4.0.0 – https://github.com/parallax/jsPDF
A library to generate PDFs in JavaScript
Source JavaScript files are located in the js folder. Plugin scripts are built with Vite; the configuration is in vite.config.js. Build scripts are defined in package.json. For development, use npm (e.g. npm run dev, npm run build).
Software Dependencies
This plugin requires the following software to be installed on the user’s system:
- КриптоПро CSP – https://cryptopro.ru/products/csp
- КриптоПро ЭЦП Browser plug-in – https://docs.cryptopro.ru/cades/plugin
For more information about КриптоПро CSP, please see the product leaflet: https://cryptopro.ru/sites/default/files/products/csp/cryptopro_csp_leaflet_a4.pdf
All rights for КриптоПро CSP and КриптоПро ЭЦП Browser plug-in are reserved by © ООО «КРИПТО-ПРО».
Recommended Browser
Browsers that do not require additional browser extension configuration after plugin installation:
- Chromium-Gost – https://cryptopro.ru/products/chromium-gost
- Yandex Browser for organizations – https://browser.yandex.ru/b/cryptopro_plugin
Alternative Browsers
If you plan to use a different browser, you will need to manually enable the browser extension after completing the plugin installation. Use the instruction corresponding to your browser:
- Chromium-based browser (Chrome, Microsoft Edge) – https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-%d0%bd%d0%b0-%d0%be%d1%81%d0%bd%d0%be%d0%b2%d0%b5-chromium
- Opera browser or Yandex Browser – https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-opera-%d0%b8%d0%bb%d0%b8-%d0%af%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80
- Firefox browser – https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-firefox
- Installing browser extension from file for different browsers – https://support.cryptopro.ru/index.php?/Knowledgebase/Article/View/467
Hooks
This plugin provides several hooks to extend its functionality.
PHP Hooks
sdcp_params
Filters the shortcode parameters. You can change the DOM element id to sign
add_filter('sdcp_params', 'change_sdcp_params');
function change_sdcp_params($sdcp_params)
{
// Your code here
return $sdcp_params;
}
sdcp_cert_list_item
Filters the list item of the certificate. You can filter cerst by INN, owner, cn
add_filter('sdcp_cert_list_item', 'change_sdcp_cert_item_li');
function change_sdcp_cert_item_li($item)
{
// Your code here
return 'Signed at: ' . esc_html($item['created_at']) . ' by ' . esc_html($item['owner']);
}
sdcp_saved_sign
This action is triggered after a signature is saved. You can do anything with signed data array
add_action('sdcp_saved_sign', 'sdcp_get_datasignement', 50, 1);
function sdcp_get_datasignement($saved_data)
{
// Your code here
}
JavaScript Hooks
You must add yur own script to WordPress at first
function sdcp_hook_javascript_footer() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_footer', 'sdcp_hook_javascript_footer');
certs
This hook is triggered after the certificates are fetched.
sdcp_ajax_object.callbacks.push({ hook: “certs”, callback: certs });
const certs = (certs) => {
console.log(certs);
return certs;
};
success
This hook is triggered after the form is submitted successfully.
sdcp_ajax_object.callbacks.push({ hook: "success", callback: success });
const success = (successData) => {
console.log(successData);
return successData;
};
error
This hook is triggered if an error occurs during form submission.
sdcp_ajax_object.callbacks.push({ hook: "error", callback: errors });
const errors = (errorData) => {
console.log(errorData);
return errorData;
};
listoptions
This hook is triggered when the certificate options are being rendered.
sdcp_ajax_object.callbacks.push({ hook: "listoptions", callback: listoptions });
const listoptions = (cert) => {
console.log(cert);
return Owner: ${cert.owner}, Expires: ${new Date(
cert.validTo
).toLocaleDateString()}`;
};`
Verification
To verify the attached signature, you can use the CryptoPro aplication in your browser, or the Gosuslugi service.
Plugin makes the attached signature and store it in post meta field “sdcp_sign” in “sign” json field.
Plugin give you link to download the signatures as file in [sdcp_show_creation_date] shortcode. Optionaly you can use the “post_id” parameter with this short code. As example,
[sdcp_show_creation_date post_id=2]
Using Gosuslugi
- Go to the Gosuslugi signature verification page: https://e-trust.gosuslugi.ru/check/sign#/portal/sig-check
- Upload the file with the attached signature.
- The service will verify the signature and display the result.
Instalación
- Upload the plugin files to the
/wp-content/plugins/crypto-wpdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress
-
Use the
[sdcp_show_form]shortcode to display the signing form on a post. You have to use the “node_id” parameter with this short code to set the DOM element for signing. Dont forget add this id (“Anchor” parameter in
Gutenberg editor). As example,[sdcp_show_form node_id=”signed-content”]
-
Use the
[sdcp_show_creation_date]shortcode to display the creation date of the signatures. Optionaly you can use the “post_id” parameter with this short code. As example,[sdcp_show_creation_date post_id=2]
Delete
Delete all the “sdcp_sign” post meta form database after plugin delete.
FAQ
-
What is a typical use case? (e.g. signing a contract)
-
- Administrator publishes content for users (sends a link by email or places the content in a personal cabinet) so that they can sign it.
- Users sign the content and see only their own signatures under it.
- Administrator sees all users’ signatures.
-
How can I customize the appearance of the signing form?
-
You can use CSS to customize the signing form. The form has the ID
#sdcp_form. The “Add Sign” button has the ID#sdcp_add-sign-button, and the “Sign” button has the ID#sdcp_sign-button. You can use these IDs to target the elements in your CSS.For example, to change the background color of the “Sign” button, you can use the following CSS:
#sdcp_sign-button { background-color: #0073aa; } -
How can I customize the appearance of the signature list?
-
You can use CSS to customize the signature list. The list is an unordered list (
<ul>) and each signature is a list item (<li>). The link to each signature has the class.sdcp_signmment-link.For example, to change the color of the signature links, you can use the following CSS:
/* 1. Container Reset & Layout */ .sdcp_signment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; /* Space between items */ max-width: 600px; /* Optional: limits width for better readability */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* 2. The Card Item */ .sdcp_signment-item { margin: 0; } /* 3. The Link Styling (The main card look) */ .sdcp_signmment-link { display: flex; align-items: center; position: relative; /* Size & Spacing */ padding: 16px 20px; background-color: #ffffff; border-radius: 8px; /* Borders */ border: 1px solid #e0e0e0; border-left: 6px solid #037971; /* Teal Accent */ /* Text Styling */ color: #56445d; /* Dark Purple Text */ text-decoration: none; font-weight: 500; font-size: 16px; line-height: 1.5; /* Modern Depth */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Animation */ transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } /* 4. Adding a decorative "Status Dot" using CSS (No HTML change needed) */ .sdcp_signmment-link::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: #fb3640; /* Red Dot */ border-radius: 50%; margin-right: 15px; flex-shrink: 0; } /* 5. Hover State */ .sdcp_signmment-link:hover { transform: translateY(-3px); /* Lifts up slightly */ box-shadow: 0 10px 20px rgba(159, 187, 204, 0.4); /* Uses the Light Blue in shadow */ border-color: #9fbbcc; /* Light Blue border */ } /* 6. Active/Click State */ .sdcp_signmment-link:active { transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #fafafa; } /* 7. Focus State (Accessibility) */ .sdcp_signmment-link:focus { outline: none; box-shadow: 0 0 0 3px #ffcf56; /* Yellow Glow ring */ border-radius: 8px; } -
How can I customize the appearance of the dynamically created elements?
-
The plugin’s JavaScript file creates some HTML elements dynamically. You can use CSS to customize these elements as well.
- The certificate select dropdown has the ID
#sdcp_certificate-selectand the class.sdcp_cert-select. - The options in the select dropdown have the class
.sdcp_cert-select. - The footer added to the PDF has the class
.temp-pdf-footer.
For example, to change the font size of the certificate select dropdown, you can use the following CSS:
#sdcp_certificate-select { font-size: 14px; } - The certificate select dropdown has the ID
Reseñas
No hay reseñas para este plugin.
Colaboradores & Desarrolladores
“Sign Documents with Crypto Pro” es software de código abierto. Las siguientes personas han contribuido a este plugin.
ColaboradoresTraduce “Sign Documents with Crypto Pro” a tu idioma.
¿Interesado en el desarrollo?
Revisa el código, echa un vistazo al repositorio SVN, o suscríbete al registro de desarrollo por RSS .
Historial de cambios
1.0
- Initial release.
