Versions Compared

Old Version 7

changes.mady.by.user Viktor Radchenko

Saved on

compared with

New Version Current

changes.mady.by.user Olesya Kershaw

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

\uD83D\uDCD8 Instructions

  1. 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:

    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

      Code Block
      languagetypescript
      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

      Code Block
      languagetypescript
      ProofSpace.WebLinker.startWithSSIOAuth(elem, {
 clientId: <CLIENT_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);
});

Find the “clientId”

To find the “clientId”:

  1. Install the “SSI OAuth Extension” to your service (you can find steps to install an extension to your service on the “Integration options“ page).

  2. Add it to the desired interaction (you can find steps to do so on the “Integration options“ page).

  3. Click on the installed “SSI OAuth Extension” in the interaction.

The first line on the new page, will be “clientId.”

Extension ID-20240521-230447.pngImage Added

Client ID-20240521-230836.pngImage Added

Find your “serviceDid”

To find the “serviceDid”:

  1. Go to the “Service Info” page.

The first line on that page will be “Service Public DID.”

Service DID-20240521-230803.pngImage Added

Find the “interactionId”

To find the “interactionId”:

  1. Click the “Interactions” tab. One of the columns on the “Interactions” page called “ID.”

  2. Find the interaction where you added the “SSI OAuth Extension and copy it’s ID.”

interactionId-20240521-231454.pngImage Added

Find the “instanceId”

To find the “instanceId”:

  1. Click the “Interactions” tab.

  2. On the new page, click on the desired interaction’s name.

  3. On the next page, select the “Instances” tab and choose the Interaction Instance ID.

Instance ID-20240521-231046.pngImage Added

  1. 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

Code Block
languagejson
{
  size?: number; // size of QR-code in pixels
  env?: Env; // environment config, usefulused 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)
}

...

Info

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 : Env is required if you want to use own OAuth server or service container, by default it uses ProofSpace PROD URIs.
    Env template:

Code Block
{
  containerURIPrefix: string
  SSIAuthenticationCredDefId: string;
  authServiceUrl: string;
  nativeURIPrefix: string
}

...