<blockcerts-universal-verifier>
A standalone universal viewer & verifier for blockcerts credentials
Production
The component is developed with Polymer 3. To use the component in your project, install it via:
- TBD
Then just add it into your project with:
Have a look at the Demo Pages to see examples of the usage
API Usage
Default behavior
By the default, the component will:
- Display a Blockcerts record in
card
mode (concise information) - Will allow verification of a Blockcerts Record
- Enables auto-verification (verification as the record is loaded)
API
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:
-
allow-social-share
: (Boolean. default:false
). Allows sharing the record on the social networks (LinkedIn, Facebook and Twitter).Example:
-
disable-auto-verify
: (Boolean. default:false
). Disables starting automatically the verification sequence as the record is loaded.Example:
-
disable-verify
: (Boolean. default:false
). Disables verification of the record altogether.Example:
-
display-mode
: (String, oneOf('card', 'full'). default:card
). Changes the display of a record.card
will be a concise summary of the record with a link to the full record, whilefull
will show the actual record as designed by the emitter.Example:
-
show-metadata
: (Boolean. default:false
). Enables showing the metadata of a record.Example:
-
src
: (String. default:''
). Allows loading an initial record with no further actions required.src
can be either an absolute URL, or a relative path.Example:
Event Tracking API
The component will emit events on different moment of the certificate life cycle.
To subscribe and track these events you should add on your consumer page event listeners on the window
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
certificateDefinition
(object) on which the action was called.
- the
-
certificate-verify
Triggered when the verification process of a certificate is started. Returns:
- the
certificateDefinition
(object) on which the action was called.
- the
-
certificate-share
Triggered when a social network link is clicked. Returns:
- the
certificateDefinition
(object) on which the action was called. - the
socialNetwork
(string) to which the record was shared.
- the
Development
Viewing Your Element
npm run start
Will make the demo page available on http://localhost:8081/demo/.
Running Tests
Application Tests
npm run test:application
NOTE: application must be started to run the tests, or at the very least the mock-server via the npm run start:mock-server
(automatically included in the npm run start
command).
watch mode
npm run test:application:watch
Component Tests
npm run test:components
"watch" mode
npm run test:components:persist
Will allow refreshing the test page: http://localhost:8000/components/blockcerts-universal-verifier/generated-index.html?cli_browser_id=0
Dealing with CSS
The npm run start
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:
;... { return html`[...]`}
Using shared styles
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:
/* in _components.my-component.sass */ @; ...component styles @;
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).
More info
Please have a look through the ADR documentation to get more context around the architecture and the ways of developing a component.