How-to integrate QR/Web-link to trigger Interaction

ProofSpace provides an auto generated code and library to simplify integration of QR/Web-link into your web site.

 Instructions

  1. ssi-auth-lib library shows QR for desktop browsers and Web-link button for mobile browsers to trigger the interaction. It has two options:

    1. Show QR/Web-link to trigger an interaction with QR initiation media selected.

    2. Show QR/Web-link to trigger an interaction with QR initiation media selected and support SSI OAuth flow configured on the dashboard for this particular interaction.

  2. Library can be included

    1. as builded bundle

      <script src="<path_to_lib>/wl.js"></script>

    2. or as npm library https://www.npmjs.com/package/ssi-auth-lib
      npm install ssi-auth-lib –save
      const ProofSpace = require(‘ssi-auth-lib’)

  3. Usage

    1. For the pure interaction without SSI OAuth flow

      ProofSpace.WebLinker.start(elem, { serviceDid: <YOUR_SERVICE_DID>, interactionId: <YOUR_OAUTH_ACTION_ID>, instanceId: <YOUR_OAUTH_INSTANCE_ID>, size: 300 // size of QR code in pixels }).then(() => { console.log(‘QR Initialized’); });

       

    2. For the interaction with SSI OAuth flow

      ProofSpace.WebLinker.startWithSSIOAuth(elem, { serviceDid: <YOUR_SERVICE_DID>, interactionId: <YOUR_OAUTH_ACTION_ID>, instanceId: <YOUR_OAUTH_INSTANCE_ID>, size: 300 // size of QR code in pixels }).then((result) => { console.log(result.access_token); });
  4. Both start and startWithSSIOAuth has 3 parameters:

    start(element, config, preFilledCredentials)

    where

  • element - HTMLDivElement to show QR code (or button in case mobile device)
    If you want to use popOverMode, then element must contain some visible elements like button or image 

  • config - structure

{ size?: number; // size of QR-code in pixels env?: Env; // environment config, useful for test or local environment serviceDid: string; // your service did interactionId: string; // id of your interaction instanceId: string; // id of your interaction instance  button?: BtnConfig; // config for styling button for mobile web link timer?: Style; // style for timer element (for SSIOAuth) qr?: Style; // style for QR element returnToBrowser?: boolean; // use callback for return to browser page popOverMode?: boolean; // use PopOver with QR code for desktop log?: LogFn; // function for logs (debug info) }

 

  • preFilledCredentials - array of Pre-filled Credential structures

    This section is used when the interaction contains Self-Attested credentials that should be pre-filled from QR/Web-link e.g. Session ID or User ID to match your user with the credentials shared by ProofSpace App user and received by your backend via webhook.

     

Note: the attribute values should all be string.

According to the attribute type, which is set in the credential schema, values should be set to:
Text — text itself
Date — string with the number of seconds since epoch.
Number — number as string. If this number is float, than '.' used as decimal point "222.2222"
ImageURL -- url as string. // NOT USED YET
Enumeration -- numeric enumeration value as string, i.e. "0", "1",..etc

Actual value types will be casted on credential attribute display in the app according to the credential schema attribute types.

 

  • Env is required if you want to use own OAuth server or service container, by default it uses ProofSpace URIs.

 

  • BtnConfig structure

     

  • Style structure:

 

To simplify the integration ProofSpace Dashboard can show the test QR and generate the code to embed for your interactions.

Example:

5. You may find a few examples through the links:

Pre-filled credentials

SSI OAuth Demo