waci-pex-qr-react (Typescript)
Warning: This package still is in very early development. Breaking changes without notice will happen at this point!
waci-pex-qr-react
A Sphereon SSI-SDK
plugin to create an QR code and to verify using SIOPv2
or OIDC4
. This plugin component is only
supporting react and react-native frameworks.
It will be possible in future to request the issuer to issue credentials.
Installation
yarn add @sphereon/ssi-sdk-waci-pex-qr-react
Build
yarn build
Usage
The usage scenario will include the plugin code to be integrated in the client code. A party will be requesting the recipient to either:
- authenticate itself to the requester
- inviting the issuer to issue a credential
The data fields required to generate the QR code will depend on the type of request and the acceptable values. The
possible accept
value may be:
oidc4vp
siopv2+oidc4vp
siopv2
didcomm/v2
Importing the plugin
import { WaciQrCodeProvider } from '@sphereon/ssi-sdk-waci-pex-qr-react'
// Include in the interface
// const agent = createAgent<... WaciQrCodeProvider>
Adding plugin to the agent
plugins: [
...
new WaciQrCodeProvider()
],
Export for the function
export const createSsiQrCode = agent.ssiQrCode
The function declared in agent can be imported for usage like below:
import { createSsiQrCode } from '../agent'
import { QRContent, QRType } from '@sphereon/ssi-sdk-waci-pex-qr-react'
Inside the component we can declare or get the values to pass to QR Code plugin
import { OobPayload } from '@sphereon/ssi-sdk-waci-pex-qr-react'
function getOobQrCodeProps(): OobQRProps {
return {
oobBaseUrl: 'https://example.com/?oob=',
type: QRType.DID_AUTH_SIOP_V2,
id: '599f3638-b563-4937-9487-dfe55099d900',
from: 'did:key:zrfdjkgfjgfdjk',
body: {
goalCode: GoalCode.STREAMLINED_VP,
accept: [AcceptMode.SIOPV2_WITH_OIDC4VP],
},
onGenerate: (oobQRProps: OobQRProps, payload: OobPayload) => {
console.log(payload)
},
bgColor: 'white',
fgColor: 'black',
level: 'L',
size: 128,
title: 'title2021120903',
}
}
delegateCreateOobQRCode = () => {
let qrCode = createOobQrCode(this.getOobQrCodeProps())
return qrCode.then((qrCodeResolved) => {
return qrCodeResolved
})
}
On generate gives the following (example) output
{
"type": "openid",
"id": "599f3638-b563-4937-9487-dfe55099d900",
"from": "did:key:zrfdjkgfjgfdjk",
"body": {
"goal-code": "streamlined-vp",
"accept": ["siopv2+oidc4vp"]
}
}
If you want to create the payload manually and want to do serialization yourself you can use:
const payload = OutOfBandMessage.createPayload(getOobQrCodeProps())
const encoded = OutOfBandMessage.urlEncode(payload)
const url = oobQRProps.oobBaseUrl + encoded
console.log(url) // https://example.com/?oob=eyJ0eXBlIjoic2lvcHYyIiwiaWQiOiI1OTlmMzYzOC1iNTYzLTQ5MzctOTQ4Ny1kZmU1NTA5OWQ5MDAiLCJmcm9tIjoiZGlkOmtleTp6cmZkamtnZmpnZmRqayIsImJvZHkiOnsiZ29hbC1jb2RlIjoic3RyZWFtbGluZWQtdnAiLCJhY2NlcHQiOlsic2lvcHYyK29pZGM0dnAiXX19
For rendering add to the view
<View>
//...
{this.delegateCreateOobQRCode()}
</View>