Signing and encrypting
(since release 2.0.18)
Support for signing and encrypting documents using a Qualified Electronic Signature (QES) with CryptoPro software.
PrerequisitesPre-setup for Working
To use this functionality, the user must have the required software CryptoPro installed.
Basic
Supported:
- document signing;
- document encrypting;
- document signing and encrypting;
- document encrypting and signing;
type — operation type:
| Parameter | Description |
|---|---|
sign |
Signing only |
encrypt |
Encryption only |
encryptAndSign |
Encrypt first, then sign |
signAndEncrypt |
Sign first, then encrypt |
Document signing
| Parameter | Description |
|---|---|
type (required) |
Operation type. sign — document signing |
signaturePackage |
Signature container type (detached / attached / any), default: detached |
signatureType |
Electronic signature type (CADES_BES / CADES_T), default: CADES_BES |
actionName (required) |
Name of the operation to be executed (e.g. documentSign) |
documentFileIdKey (required) |
Key used for the document file ID |
documentFileNameKey (required) |
Key used for the document file name |
signatureFileIdKey (required) |
Key for the signature file ID |
signatureFileNameKey (required) |
Key for the signature file name |
How does it look?
How to add?
Example
Step 1 Add a button for signing in the corresponding Service.
@Override
public Actions<MyexampleDTO> getActions() {
return Actions.<MyexampleDTO>builder()
.create(crt -> crt.text("Create"))
.delete(dlt -> dlt.text("Delete"))
.save(sv -> sv.text("Save"))
.action(act -> act
.action("documentSign", "Document Sign")
.scope(ActionScope.RECORD)
.available(bc -> {
return true;
})
.invoker((bc, dto) -> {
Optional<Myexample> myexample = myexampleRepository.findById(Long.valueOf(dto.getId()));
myexample.ifPresent(e -> {
e.setStatus(StatusSignEnum.SIGNED);
myexampleRepository.save(myexample.get());
});
return new ActionResultDTO<MyexampleDTO>()
.setAction(PostAction.showMessage(
MessageType.INFO, "Action documentSign was invoked"
));
})
)
.cancelCreate(ccr -> ccr.text("Cancel"))
.build();
}
Step 2 Include options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
},
{
"label": "File Signed",
"key": "fileSign",
"type": "hidden",
"fileIdKey": "fileSignId"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
},
"cryptoGenerator": [
{
"type": "sign",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
}
}
}
Electronic Signature Type
"CAdES_T" Live Sample · GitHub
CAdES_BES Live Sample · GitHub
The user can select the electronic signature type:
-
CAdES_BES — basic electronic signature type
Used for standard document signing without additional attributes. -
CAdES_T — extended signature type
Includes all properties of CAdES_BES and additionally contains a trusted timestamp that records the exact moment of signing.
How to add?
Example
Step 1 Add the signatureType property to options.cryptoGenerator in the .widget configuration options.
CADES_BES (default) / CADES_T
{
"name": "MyExampleCadesBesForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"signatureType": "CADES_BES",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleCadesTForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"signatureType": "CADES_T",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
To change the Time Stamping Authority (TSA) server address:
- Navigate to the
ui/.envandui/.env.developmentfiles. -
Add the REACT_APP_CRYPTOPRO_TSA_URL variable:
In
ui/.env.development— set the test server address.In
ui/.env— set the production server address (by default).
Info
If this constant is not present, the application will default to http://testca2012.cryptopro.ru/tsp/tsp.srf.
Signature Container Format
The user can choose the format of the generated container:
detached (detached signature)
A separate signature file is generated that contains only the signature for the document.
The document itself is not included in the container.
attached (attached signature)
A single container is generated that includes: original document and signature for the document
Two scenarios are possible in the UI:
User selects the signature type
A popup is displayed with a dropdown allowing the user to choose: container format (detached / attached)
Signature type is predefined by the system
The dropdown is not shown in the interface.
The signature is generated automatically according to the predefined configuration.
How does it look?
How to add?
Example
Step 1 Add the signaturePackage property to options.cryptoGenerator in the .widget configuration options.
any — user selects the signature type
detached (default) / attached — signature type is predefined by the system
{
"name": "MyExampleAnyForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"signaturePackage": "any",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDetachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"signaturePackage": "detached",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleAttachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"signaturePackage": "attached",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDefaultForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "sign",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
}
]
}
}
}
Override of the signed document name
You can override the name of the signed document file.
How does it look?
How to add?
Example
Step 1 Add the signatureFileBaseNameKey property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleBaseNameForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Signed",
"key": "fileSign",
"type": "fileUpload",
"fileIdKey": "fileSignId"
},
{
"label": "File Signed Name",
"key": "NAME_FILE_OVERRIDE_SIGN",
"type": "hidden"
}
],
"options": {
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSign",
"span": 12
}
]
}
]
},
"cryptoGenerator": [
{
"type": "sign",
"actionName": "documentSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"signatureFileBaseNameKey": "NAME_FILE_OVERRIDE_SIGN"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSign"
]
}
}
}
Step 2 Add a hidden field referenced by signatureFileBaseNameKey to fields.
Document encrypting
| Parameter | Description |
|---|---|
type (required) |
Operation type. encrypt — document encryption |
actionName (required) |
Name of the operation to be executed (e.g. documentEncrypt) |
documentFileIdKey (required) |
Key used for the document file ID |
documentFileNameKey (required) |
Key used for the document file name |
encryptedFileIdKey (required) |
Key for the encrypted file ID |
encryptedFileNameKey (required) |
Key for the encrypted file name |
How does it look?
How to add?
Example
Step 1 Add a button for encryption in the corresponding Service.
@Override
public Actions<MyexampleDTO> getActions() {
return Actions.<MyexampleDTO>builder()
.create(crt -> crt.text("Create"))
.delete(dlt -> dlt.text("Delete"))
.save(sv -> sv.text("Save"))
.action(act -> act
.action("documentEncrypt", "Document Encrypt")
.scope(ActionScope.RECORD)
.available(bc -> true)
.invoker((bc, dto) -> {
Optional<Myexample> myexample = myexampleRepository.findById(Long.valueOf(dto.getId()));
myexample.ifPresent(e -> {
e.setStatus(StatusEncryptEnum.ENCRYPT);
myexampleRepository.save(myexample.get());
});
return new ActionResultDTO<MyexampleDTO>()
.setAction(PostAction.showMessage(
MessageType.INFO, "Action documentSign was invoked"
));
})
)
.cancelCreate(ccr -> ccr.text("Cancel"))
.build();
}
Step 2 Include options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleBaseForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncrypt",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encrypt",
"actionName": "documentEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncrypt",
"span": 12
}
]
}
]
}
}
}
Override of the encrypted document name
You can override the name of the encrypted document file.
How does it look?
How to add?
Example
Step 1 Add the encryptedFileBaseNameKey property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleBaseNameForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncrypt",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Encrypt Name",
"key": "NAME_FILE_OVERRIDE_ENCRYPT",
"type": "hidden"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encrypt",
"actionName": "documentEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt",
"encryptedFileBaseNameKey": "NAME_FILE_OVERRIDE_ENCRYPT"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncrypt",
"span": 12
}
]
}
]
}
}
}
Step 2 Add a hidden field referenced by encryptedFileBaseNameKey to fields.
Document signing and encrypting
Sign first, then encrypt (signAndEncrypt).
| Parameter | Description |
|---|---|
type (required) |
Operation type. signAndEncrypt — sign first, then encrypt |
actionName (required) |
Name of the operation to be executed (e.g. documentSignEncrypt) |
documentFileIdKey (required) |
Key used for the document file ID |
documentFileNameKey (required) |
Key used for the document file name |
signatureFileIdKey (required) |
Key for the signature file ID |
signatureFileNameKey (required) |
Key for the signature file name |
encryptedFileIdKey (required) |
Key for the encrypted file ID |
encryptedFileNameKey (required) |
Key for the encrypted file name |
How does it look?
How to add?
Example
Step 1 Add a button for signing and encrypting in the corresponding Service.
@Override
public Actions<MyexampleDTO> getActions() {
return Actions.<MyexampleDTO>builder()
.create(crt -> crt.text("Create"))
.delete(dlt -> dlt.text("Delete"))
.save(sv -> sv.text("Save"))
.action(act -> act
.action("documentSignEncrypt", "Document Sign Encrypt")
.scope(ActionScope.RECORD)
.available(bc -> {
return true;
})
.invoker((bc, dto) -> {
Optional<Myexample> myexample = myexampleRepository.findById(Long.valueOf(dto.getId()));
myexample.ifPresent(e -> {
e.setStatus(StatusSignEncryptEnum.SIGN_ENCRYPT);
myexampleRepository.save(myexample.get());
});
return new ActionResultDTO<MyexampleDTO>()
.setAction(PostAction.showMessage(
MessageType.INFO, "Action documentSignEncrypt was invoked"
));
})
)
.cancelCreate(ccr -> ccr.text("Cancel"))
.build();
}
Step 2 Include options.cryptoGenerator with type: signAndEncrypt in the .widget configuration options.
{
"name": "MyExampleForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Electronic Signature Type
"CAdES_T" Live Sample · GitHub
CAdES_BES Live Sample · GitHub
The user can select the electronic signature type:
-
CAdES_BES — basic electronic signature type
Used for standard document signing without additional attributes. -
CAdES_T — extended signature type
Includes all properties of CAdES_BES and additionally contains a trusted timestamp that records the exact moment of signing.
How to add?
Example
Step 1 Add the signatureType property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleCadesBesForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"signatureType": "CADES_BES",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleCadesTForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"signatureType": "CADES_T",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
- Navigate to the
ui/.envandui/.env.developmentfiles. -
Add the REACT_APP_CRYPTOPRO_TSA_URL variable:
In
ui/.env.development— set the test server address.In
ui/.env— set the production server address (by default).
Info
If this constant is not present, the application will default to http://testca2012.cryptopro.ru/tsp/tsp.srf.
Signature Container Format
The user can choose the format of the generated container:
detached (detached signature)
A separate signature file is generated that contains only the signature for the document.
The document itself is not included in the container.
attached (attached signature)
A single container is generated that includes: original document and signature for the document
Two scenarios are possible in the UI:
User selects the signature type
A popup is displayed with a dropdown allowing the user to choose: container format (detached / attached)
Signature type is predefined by the system
The dropdown is not shown in the interface.
The signature is generated automatically according to the predefined configuration.
How does it look?
How to add?
Example
Step 1 Add the signaturePackage property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleAnyForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"signaturePackage": "any",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDetachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"signaturePackage": "detached",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleAttachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"signaturePackage": "attached",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDefaultForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Override of the signed document name
You can override the name of the signed document file.
How does it look?
How to add?
Example
Step 1 Add the signatureFileBaseNameKey property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleBaseNameForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
},
{
"label": "NAME FILE OVERRIDE ENCRYPT 3714",
"key": "NAME_FILE_OVERRIDE_ENCRYPT_3714",
"type": "hidden"
},
{
"label": "NAME_FILE_OVERRIDE_SIGN_3714",
"key": "NAME_FILE_OVERRIDE_SIGN_3714",
"type": "hidden"
}
],
"options": {
"cryptoGenerator": [
{
"type": "signAndEncrypt",
"actionName": "documentSignEncrypt",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt",
"encryptedFileBaseNameKey": "NAME_FILE_OVERRIDE_ENCRYPT_3714",
"signatureFileBaseNameKey": "NAME_FILE_OVERRIDE_SIGN_3714"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentSignEncrypt",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Step 2 Add a hidden field referenced by signatureFileBaseNameKey to fields.
Document encrypting and signing
Encrypt first, then sign (encryptAndSign).
| Parameter | Description |
|---|---|
type (required) |
Operation type. encryptAndSign — encrypt first, then sign |
actionName (required) |
Name of the operation to be executed (e.g. documentEncryptSign) |
documentFileIdKey (required) |
Key used for the document file ID |
documentFileNameKey (required) |
Key used for the document file name |
signatureFileIdKey (required) |
Key for the signature file ID |
signatureFileNameKey (required) |
Key for the signature file name |
encryptedFileIdKey (required) |
Key for the encrypted file ID |
encryptedFileNameKey (required) |
Key for the encrypted file name |
How does it look?
How to add?
Example
Step 1 Add a button for encrypting and signing in the corresponding Service.
@Override
public Actions<MyexampleDTO> getActions() {
return Actions.<MyexampleDTO>builder()
.create(crt -> crt.text("Create"))
.delete(dlt -> dlt.text("Delete"))
.save(sv -> sv.text("Save"))
.action(act -> act
.action("documentEncryptSign", "Document Encrypt Sign")
.scope(ActionScope.RECORD)
.available(bc -> {
return true;
})
.invoker((bc, dto) -> {
Optional<Myexample> myexample = myexampleRepository.findById(Long.valueOf(dto.getId()));
myexample.ifPresent(e -> {
e.setStatus(StatusEncryptSignEnum.SIGN_ENCRYPT);
myexampleRepository.save(myexample.get());
});
return new ActionResultDTO<MyexampleDTO>()
.setAction(PostAction.showMessage(
MessageType.INFO, "Action documentEncryptSign was invoked"
));
})
)
.cancelCreate(ccr -> ccr.text("Cancel"))
.build();
}
Step 2 Include options.cryptoGenerator with type: encryptAndSign in the .widget configuration options.
{
"name": "MyExampleForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Electronic Signature Type
"CAdES_T" Live Sample · GitHub
CAdES_BES Live Sample · GitHub
The user can select the electronic signature type:
-
CAdES_BES — basic electronic signature type
Used for standard document signing without additional attributes. -
CAdES_T — extended signature type
Includes all properties of CAdES_BES and additionally contains a trusted timestamp that records the exact moment of signing.
How to add?
Example
Step 1 Add the signatureType property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleCadesBesForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"signatureType": "CADES_BES",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleCadesTForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"signatureType": "CADES_T",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
To change the Time Stamping Authority (TSA) server address:
- Navigate to the
ui/.envandui/.env.developmentfiles. -
Add the REACT_APP_CRYPTOPRO_TSA_URL variable:
In
ui/.env.development— set the test server address.In
ui/.env— set the production server address (by default).
Info
If this constant is not present, the application will default to http://testca2012.cryptopro.ru/tsp/tsp.srf.
Signature Container Format
The user can choose the format of the generated container:
detached (detached signature)
A separate signature file is generated that contains only the signature for the document.
The document itself is not included in the container.
attached (attached signature)
A single container is generated that includes: original document and signature for the document
Two scenarios are possible in the UI:
User selects the signature type
A popup is displayed with a dropdown allowing the user to choose: container format (detached / attached)
Signature type is predefined by the system
The dropdown is not shown in the interface.
The signature is generated automatically according to the predefined configuration.
How does it look?
How to add?
Example
Step 1 Add the signaturePackage property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleAnyForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"signaturePackage": "any",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDetachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"signaturePackage": "detached",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleAttachedForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"signaturePackage": "attached",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
{
"name": "MyExampleDefaultForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Override of the signed document name
You can override the name of the signed document file.
How does it look?
How to add?
Example
Step 1 Add the signatureFileBaseNameKey property to options.cryptoGenerator in the .widget configuration options.
{
"name": "MyExampleBaseNameForm",
"title": "",
"type": "Form",
"bc": "myexample",
"fields": [
{
"label": "File",
"key": "file",
"type": "fileUpload",
"fileIdKey": "fileId",
"preview": {
"enabled": true
}
},
{
"label": "File Encrypted",
"key": "fileEncryptRO",
"type": "fileUpload",
"fileIdKey": "fileEncryptId"
},
{
"label": "File Signed",
"key": "fileSignRO",
"type": "fileUpload",
"fileIdKey": "fileSignId"
},
{
"label": "File Signed Name",
"key": "NAME_FILE_OVERRIDE_SIGN",
"type": "hidden"
},
{
"label": "File Encrypt Name",
"key": "NAME_FILE_OVERRIDE_ENCRYPT",
"type": "hidden"
}
],
"options": {
"cryptoGenerator": [
{
"type": "encryptAndSign",
"actionName": "documentEncryptSign",
"documentFileIdKey": "fileId",
"documentFileNameKey": "file",
"signatureFileIdKey": "fileSignId",
"signatureFileNameKey": "fileSign",
"encryptedFileIdKey": "fileEncryptId",
"encryptedFileNameKey": "fileEncrypt",
"encryptedFileBaseNameKey": "NAME_FILE_OVERRIDE_ENCRYPT",
"signatureFileBaseNameKey": "NAME_FILE_OVERRIDE_SIGN"
}
],
"actionGroups": {
"include": [
"create",
"save",
"documentEncryptSign",
"cancel-create"
]
},
"layout": {
"rows": [
{
"cols": [
{
"fieldKey": "file",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileSignRO",
"span": 12
}
]
},
{
"cols": [
{
"fieldKey": "fileEncryptRO",
"span": 12
}
]
}
]
}
}
}
Step 2 Add a hidden field referenced by signatureFileBaseNameKey to fields.