When interacting with Verifiable Presentations, it is often useful to use QR codes.
For converting VPs to QRs, and vice versa, LearnCard leverages an open-source library from Digital Bazaar, :
An isomorphic JS (for Node.js and browser) library that takes a Verifiable Presentation, compresses it via CBOR-LD, and turns it into a QR Code.
There are several advantages to the VPQR approach:
Base-64 Image: for locally generated, transient QR codes.
CBOR-LD Compression: because VPs are JSON-LD, they can often be bloated with context files; VPQR handles compressing/expanding JSON-LD files for minimal QR data footprint.
Installation
pnpm i @learncard/vpqr-plugin
Use Cases
There are many use cases for converting between VPs & QR codes.
Issuing a Verifiable Credential to a subject: for example, check out the LearnCard Discord Bot, which sends a QR code as an attachment to an issued credential in a Discord message, allowing receivers to scan and claim the credential from any interoperable wallet.
//TODO: more examples
How to Convert a Verifiable Presentation into a QR code:
/**
* Returns a QR-embeddable data string from a VP
*/
VPtoQrCode: (vp: VP) => Promise<string>;
Then, the qrImage can be embedded in HTML like so:
<img src="data:image/gif;base64,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"
alt="Test VP Embedded in QR Code" />
If you scan the QR code, you will get the following text:
How to Retrieve a Verifiable Presentation from a QR code:
/**
* Returns a VP from a QR code string.
*/
VPfromQrCode: (text: string) => Promise<VP>;
If you followed the steps in the previous section, to generate a QR code from a Verifiable Presentation, you should be able to scan a QR code and read a string like this: