Renderer Plugin
Please note that this content is under development and is not ready for implementation. This status message will be updated as content development progresses.
The Renderer Plugin is a module that provides rendering capabilities for verifiable credentials. It allows you to render verifiable credentials using different render methods, such as HTML templates.
Implement a Render Provider
To implement a new render provider, follow these steps:
-
Implement the
IRendererProvider
interface, which includes therenderCredential
method. This method takes two parameters:template
(a string containing the template to be rendered) anddocument
(a JSON object containing the data to be rendered). The method should return a string with the rendered document. -
Save the provider file in the
packages/renderer/src/providers
folder, using a name that corresponds to the render type. For example, if you want to implement a provider forWebRenderingTemplate2022
, name the provider file asweb-rendering-template-2022.ts
. -
Add the provider to the agent.yml file, as shown in the following example:
renderer:
$require: '@vckit/renderer#Renderer'
$args:
- defaultProvider: WebRenderingTemplate2022
providers:
WebRenderingTemplate2022:
$require: '@vckit/renderer#WebRenderingTemplate2022'
Usage
Standalone
Verifiable credential data that uses the proof type 'lds'
import { WebRenderingTemplate2022 } from '@vckit/renderer';
// Example credential data
const params = {
credential: {
'@context': ['https://www.w3.org/ns/credentials/v2', 'https://www.w3.org/ns/credentials/examples/v2', 'https://dev-render-method-context.s3.ap-southeast-1.amazonaws.com/dev-render-method-context.json'],
id: 'http://example.gov/credentials/3732',
type: ['VerifiableCredential', 'ExampleDegreeCredential'],
issuer: 'did:example:6fb1f712ebe12c27cc26eebfe11',
validFrom: '2010-01-01T19:23:24Z',
credentialSubject: {
id: 'https://subject.example/subject/3921',
degree: {
type: 'ExampleBachelorDegree',
name: 'Bachelor of Science and Arts',
},
},
render: [
{
template: '<div>Template</div>',
},
],
proof: {
type: 'DataIntegrityProof',
cryptosuite: 'eddsa-rdfc-2022',
created: '2021-11-13T18:19:39Z',
verificationMethod: 'did:web:example.com#key',
proofPurpose: 'assertionMethod',
proofValue: 'z58DAdFfa9SkqZMVPxAQp...jQCrfFPP2oumHKtz',
},
},
};
const WebRenderingTemplate2022 = new WebRenderingTemplate2022();
const renderer = new Renderer({
providers: {
WebRenderingTemplate2022,
},
defaultProvider: 'WebRenderingTemplate2022',
});
const context = {};
const result = await renderer.renderCredential(params, context);
// The result will be the encoded base64 of the rendered HTML string.
Verifiable credential data with EnvelopedVerifiableCredential
import { WebRenderingTemplate2022 } from '@vckit/renderer';
const params = {
credential: {
'@context': ['https://www.w3.org/ns/credentials/v2', 'https://www.w3.org/ns/credentials/examples/v2'],
id: 'data:application/vc-ld+jwt,eyJhbGciOiJFZERTQSIsIm...', // The JWT should contain render field with the template.
type: 'EnvelopedVerifiableCredential',
},
};
const WebRenderingTemplate2022 = new WebRenderingTemplate2022();
const renderer = new Renderer({
providers: {
WebRenderingTemplate2022,
},
defaultProvider: 'WebRenderingTemplate2022',
});
const context = {};
const result = await renderer.renderCredential(params, context);
// The result will be the encoded base64 of the rendered HTML string.
With VCkit
Using the VCkit CLI or API
-
Override the default configuration file to agent.yml.
-
Using CLI:
pnpm vckit execute -m renderCredential -f test.json
# Provide the input JSON file, test.json, with the credential data.
- Using API:
pnpm vckit server
curl -X 'POST' \
'http://localhost:3332/agent/renderCredential' \
-H 'accept: application/json; charset=utf-8' \
-H 'Authorization: Bearer test123' \
-H 'Content-Type: application/json' \
-d '{
"credential": {
// Verifiable credential data...
}
}'
With VCkit Library
You can try VCkit Renderer plugin by follow this get started guide.