ProofSpace provides an auto generated code and library to simplify integration of QR/Web-link into your web site.
\uD83D\uDCD8 Instructions
Library options
ssi-auth-lib
library shows QR for desktop browsers and Web-link button for mobile browsers to trigger the interaction. It has two options:Show QR/Web-link to trigger an interaction with QR initiation media selected.
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.
Library can be included
<script src="<path_to_lib>/wl.js"></script>
or as npm library https://www.npmjs.com/package/ssi-auth-lib
npm install ssi-auth-lib –save
const ProofSpace = require(‘ssi-auth-lib’)
Usage
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’); });
For the interaction with SSI OAuth flow
ProofSpace.WebLinker.startWithSSIOAuth(elem, { clientId: <OAUHT_EXTENSION_ID> 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); });
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 imageconfig
- structure
{ size?: number; // size of QR-code in pixels env?: Env; // environment config, used for test, stage or local environment. Prod by default 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.{ credentialId: '<YOUR_CREDENTIAL_ID>', attributes: [ {name: '<Attribute1 name>', value: '<Attribute1 value>'}, {name: '<Attribute2 name>', value: '<Attribute2 value>'}, // ... other pre-filled attributes ] }
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 itselfDate
— 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 YETEnumeration
-- 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 : Env
is required if you want to use own OAuth server or service container, by default it uses ProofSpace PROD URIs.
Env template:
{ containerURIPrefix: string SSIAuthenticationCredDefId: string; authServiceUrl: string; nativeURIPrefix: string }
Or you can use predefined TEST and STAGE ProofSpace env if you have your services up and running there:
ProofSpace.ENV.TEST for the Testing Environment
ProofSpace.ENV.STAGE for the Staging Environment
Example:
ProofSpace.WebLinker.start(elem, { env: ProofSpace.ENV.STAGE, 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’); });
BtnConfig
structure{ class?: string; // css class style?: string; // css class text?: string; // button text. Default is 'Start interaction' icon?: string; // image url for button icon textStyle?: Style; iconStyle?: Style; target?: string; // browser target. Default is _self }
Style
structure:
{ class?: string; // css class style?: string; // css class }
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: