@sphereon/ssi-sdk.qr-code-generator NPM

qr-code-generator

A Sphereon SSI-SDK plugin to create an QR codes for SIOPv2/OpenID4VP, DIDCommv2 and OpenID4VCI. Next to the above specific QR types, of course you can also generate generic QR codes with this package.

It is tailored towards React and React-Native but also provides textual representations.

Installation

yarn add @sphereon/ssi-sdk.qr-code-generator

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

Importing the plugin

import { QrCodeProvider } from '@sphereon/ssi-sdk.qr-code-generator'

// Include in the interface
// const agent = createAgent<...  QrCodeProvider>

Adding plugin to the agent

plugins: [...new QrCodeProvider()]

Inside the component we can declare or get the values to pass to QR Code plugin

import { WaciOobProps } from '@sphereon/ssi-sdk.qr-code-generator'

function getOobQrCodeProps(): QRRenderingProps {
  return {
    baseUrl: 'https://example.com/?oob=',
    type: QRType.SIOPV2,
    id: '599f3638-b563-4937-9487-dfe55099d900',
    from: 'did:key:zrfdjkgfjgfdjk',
    object: {
      goalCode: GoalCode.STREAMLINED_VP,
      accept: [AcceptMode.SIOPV2_WITH_OIDC4VP],
    },
    onGenerate: (oobQRProps: QRRenderingProps, payload: WaciOobProps) => {
      console.log(payload)
    },
    bgColor: 'white',
    fgColor: 'black',
    level: 'L',
    size: 128,
    title: 'title2021120903',
  }
}

delegateCreateOobQRCode = () => {
  let qrCode = createQrCode(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",
  "object": {
    "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 = DidCommOutOfBandMessage.createPayload(getOobQrCodeProps())
const encoded = DidCommOutOfBandMessage.urlEncode(payload)
const url = oobQRProps.baseUrl + encoded
console.log(url) // https://example.com/?oob=eyJ0eXBlIjoic2lvcHYyIiwiaWQiOiI1OTlmMzYzOC1iNTYzLTQ5MzctOTQ4Ny1kZmU1NTA5OWQ5MDAiLCJmcm9tIjoiZGlkOmtleTp6cmZkamtnZmpnZmRqayIsImJvZHkiOnsiZ29hbC1jb2RlIjoic3RyZWFtbGluZWQtdnAiLCJhY2NlcHQiOlsic2lvcHYyK29pZGM0dnAiXX19

For rendering add to the view

<View>
  //...
  {this.delegateCreateOobQRCode()}
</View>

OpenID4VCI example:

This is the credential offer

export const credentialOffer = JSON.stringify({
  credential_issuer: 'https://credential-issuer.example.com',
  credentials: [
    'UniversityDegree_JWT',
    {
      format: 'mso_mdoc',
      doctype: 'org.iso.18013.5.1.mDL',
    },
  ],
  grants: {
    authorization_code: {
      issuer_state: 'eyJhbGciOiJSU0Et...FYUaBy',
    },
    'urn:ietf:params:oauth:grant-type:pre-authorized_code': {
      'pre-authorized_code': 'adhjhdjajkdkhjhdj',
      user_pin_required: true,
    },
  },
})

It needs to be assigned to the credentialOffer field in the data scheme. The same can be done using a reference, this will require to use the credentialOfferUri property and assign the uri of the credential offer to it. Notice that the scheme defaults to openid-credential-offer and baseUri is optional.

const openid4vcObjectValue: OpenID4VCIDataWithScheme = {
  scheme: 'https',
  baseUri: 'test.com/credential-offer',
  credentialOffer,
}

Now the data scheme needs to be added to the QR code data

const openid4vciDataValue: QRData<QRType.OpenID4VCI, OpenID4VCIDataWithScheme> = {
  object: openid4vcObjectValue,
  type: QRType.OpenID4VCI,
  id: '568',
}

So the QR code can be generated

export const openid4vciCreateValue: CreateValueArgs<QRType.OpenID4VCI, OpenID4VCIDataWithScheme> = {
  data: openid4vciDataValue,
  onGenerate: (result: ValueResult<QRType.OpenID4VCI, OpenID4VCIDataWithScheme>) => {
    console.log(result, null, 2)
  },
}

And eventually added to an app

export const openid4vciCreateElement: CreateElementArgs<QRType.OpenID4VCI, OpenID4VCIDataWithScheme> = {
  data: openid4vciDataValue,
  renderingProps,
  onGenerate: (result: ValueResult<QRType.OpenID4VCI, OpenID4VCIDataWithScheme>) => {
    render(<div data-testid="test-div-openid4vci">{result.data.object.credentialOffer}</div>)
    console.log(result.value)
  },
}

Sphereon SSI React WACI OpenID OpenID4VP OpenID4VCI QR Code

@veramo/core base64url react react-qr-code

@everything-registry/sub-chunk-857

18 hours ago

6 days ago

6 days ago

7 days ago

7 days ago

8 days ago

8 days ago

8 days ago

10 days ago

9 days ago

10 days ago

10 days ago

14 days ago

13 days ago

13 days ago

13 days ago

13 days ago

14 days ago

14 days ago

14 days ago

27 days ago

28 days ago

29 days ago

29 days ago

28 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

6 months ago

9 months ago

7 months ago

9 months ago

7 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

7 months ago

9 months ago

7 months ago

9 months ago

5 months ago

9 months ago

7 months ago

9 months ago

7 months ago

9 months ago

5 months ago

9 months ago

6 months ago

8 months ago

9 months ago

7 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

5 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago