A standalone universal viewer and verifier for blockcerts credentials
npm install @blockcerts/blockcerts-verifier
A standalone universal viewer & verifier for blockcerts credentials
``
npm i @blockcerts/blockcerts-verifier
`html
`
Chrome will support natively the code, but for Firefox, Safari, MS Edge (Opera and Brave), you will need to add the webcomponent loader before:
`html`
Have a look at the Demo Pages to see examples of the usage
mode (concise information)
- Will allow verification of a Blockcerts Record
- Enables auto-verification (verification as the record is loaded)$3
The component will understand the following options:-
allow-download: (Boolean. default: false). Enables the download of the record. At this moment only records provided by Learning Machine are downloadable.
Example:
`html
`
- : (Boolean. default: false). Allows sharing the record on the social networks (LinkedIn, Facebook and Twitter).
Example:
`html
`
- : (Boolean. default: false). Disables starting automatically the verification sequence as the record is loaded.
Example:
`html
`
- : (Boolean. default: false). Disables the Download PDF functionality.
Example:
`html
`
- : (Boolean. default: false). Disables verification of the record altogether.
Example:
`html
`
- : (String, oneOf('card', 'full', 'fullscreen'). default: card).
Changes the display of a record.
- card will be a concise summary of the record with a link to the full record.
- full will show the actual record as designed by the emitter.
- fullscreen will display a two-column overlay (in desktop) that takes the window dimensions.
The certificate displays similar as full. NOTA: only works for certificates that have a displayHTML property.
Example:
`html
`
- : (Boolean. default: false). Enables showing the metadata of a record.
Example:
`html
`
- : (String. default: ''). Allows loading an initial record with no further actions required. src can be either an absolute URL, a relative path or a stringified certificate definition.
Example:
`html
`
- : (String. default: 'bright'). Adapts to the background of the page that hosts the component. If the component is displayed on a dark background, you should use the dark option. If it's bright, then use the bright option.
Example:
`html
`
- : (String. default: 'auto', if language code not recognized will default to English (en)). View src/i18n/lang to see the list of supported languages. Contributions welcome. Example:
`html
`
- clickable-urls: (Boolean, default: false). When set to true, the certificate view will identify and convert to clickable links (displayHTML property of the certificate. explorerAPIsAs the object would be quite complicated, the option cannot be passed as attribute, but rather via property, as follows:
``javascript`
const explorer = {
parsingFunction: function (): TransactionData {},
serviceURL: 'your-explorer-service.url',
priority: 0 | 1
}
document.addEventListener('DOMContentLoaded', function () {
const bv = document.querySelector('blockcerts-verifier');
bv.explorerAPIs = [explorer];
});
See this section: https://github.com/blockchain-certificates/cert-verifier-js#explorerapis to get more information.
object.See the event demo page for a working example.
The information is communicated via the
detail key of the event.Supported Events:
-
certificate-load
Triggered when a certificate has been loaded into the component.
Returns:
- the (object) on which the action was called.
- certificate-verify
Triggered when the verification process of a certificate is started.
Returns:
- the (object) on which the action was called.
- certificate-share
Triggered when a social network link is clicked.
Returns:
- the (object) on which the action was called.
- the socialNetwork (string) to which the record was shared.
Development
Viewing Your Element
`
npm run start
Will make the demo page available on http://localhost:8081/demo/.
Modifying the Sanitizer
The
is used in order to protect against malicious certificates that could hold XSS attacks.
It is an overlay of the xss library, since at times, you might want to be able to configure or adapt the whitelist to your own needs.To modify it, you should edit the
sanitizer/index.js file. #### Whitelist CSS properties
More specifically if you wish to whitelist some CSS properties, add them to the object
whiteListedCssProperties.#### Generate the updated sanitizer
`
npm run build:sanitizer
This will generate the
file, which is then used by the application and the tests.If you want to work on the sanitizer in watch mode (and auto-generate your changes), use the following command:
`
npm run build:sanitizer -- -w
Running Tests
$3
npm run test:application
NOTE: application must be started to run the tests, or at the very least the mock-server via the
(automatically included in the npm run start command).watch mode
`
npm run test:application:watch
$3
npm run test:components
"watch" mode
npm run test:components:persist
Will allow refreshing the test page: http://localhost:8000/components/blockcerts-verifier/generated-index.html?cli_browser_id=0Dealing with CSS
The command will also start a SASS compiler watcher, which means that any stylesheet within the components folder will be transpiled to a polymer component that can be reused within another component. ie:`javascript
import CSS from './_components.button-css';
[...]
_render () {
return html${CSS}[...]
}
$3
To reduce the amount of code duplication, and following the ITCSS philosophy, you may need to import some of the shared-styles in your component.
To do so, in your component's SASS file, add the following instruction:javascript
/ in _components.my-component.sass /@import '../../../shared-styles/objects.text';
[...component styles]
@import '../../../shared-styles/utils.a11y';
``Please note that the SASS watcher does not observe changes in the shared styles folder, and will not automatically recompile any consumer stylesheet. You will have to recompile them yourselves (TODO: improve DevX here).