AIR Credential SDK

AIR Credential SDK.

Installation

pnpm add @mocanetwork/air-credential-sdk

# or
yarn add @mocanetwork/air-credential-sdk

# or
npm install @mocanetwork/air-credential-sdk

Getting Started

Step 1. Import styles

To ensure the widget displays correctly, import the SDK’s CSS file early in your application:

import '@mocanetwork/air-credential-sdk/dist/style.css'

Step 2. Create a new AirCredentialWidget instance

Issue Credential

import {
  type JsonDocumentObject,
  AirCredentialWidget
} from '@mocanetwork/air-credential-sdk'

// Set the credential attribute value according to the scheme type configured in the dashboard
const credentialSubject: JsonDocumentObject = {
  birthday: 20020101,
  documentType: 99,
}

// Construct the claim request for issuing a credential
const claimRequest = {
  process: 'Issue',
  issuerDid: 'Your issuer DID',
  issuerAuth: 'Refer to the API documentation to obtain a token',
  credentialId: 'The credential id configured in the dashboard',
  credentialSubject: credentialSubject,
}

const airCredentialWidget = new AirCredentialWidget(
  claimRequest,
  'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' // AIR partnerId
  options // Optional configurations are detailed in the table below
)

Verify Proof

import {
  AirCredentialWidget
} from '@mocanetwork/air-credential-sdk'

const queryRequest = {
  process: 'Verify',
  verifierAuth: 'Refer to the API documentation to obtain a token',
  programId: 'The program id configured in the dashboard',
}

const airCredentialWidget = new AirCredentialWidget(
  queryRequest,
  'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' // AIR partnerId
  options // Optional configurations are detailed in the table below
)

| Param | Type | Description | |-------------------|--------------------|------------------------------------------------------| | options.endpoint | string? | URL to the widget endpoint. | | options.theme | Theme? | "auto", "light" or "dark", default "auto". | | options.locale | Language? | "en" or "zh-hk", default "en" | | options.redirectUrlForIssuer | string? | During the verification process, if the user does not possess the specified type of credential, the SDK will automatically open the link and guide the user to complete the credential issuance. If needed, please obtain this link from the issuer of the credential type you want to verify. |

Step 3. Listen to the issueCompleted/verifyCompleted widget events to detect when the user has completed the Issue/Verify process.

Issue

function handleIssueCompleted() {
  console.log('Credential issuance completed successfully.')
  // You can add additional success logic here, such as UI notifications.
}

airCredentialWidget.on('issueCompleted', handleIssueCompleted)

Verify

function handleVerifyCompleted(results) {
  const { status } = results

  if (status === 'Compliant') {
    // Add your success logic here, such as:
    // Updating UI to show verification success.
  } else if (status === 'Non-Compliant') {
    // Prompt the user that does not meet your verification conditions.
  } else {
    // See the table below for more details on other statuses.
  }
}
airCredentialWidget.on('verifyCompleted', handleVerifyCompleted)

| Status | Description | |-------------------|------------------------------------------------------| | Pending | The target credential is waiting for confirmation on the blockchain. | | Revoking | Target credential are being revoked. | | Revoked | The target credential have been revoked. | | Expired | The target credential have expired. | | NotFound | No such credentials was found. |

Step 4. Launch the AirCredential widget and it will be displayed in the center of your webpage.

// Button on your page
button.addEventListener('click', () => {
  airCredentialWidget.launch()
})

AirCredentialWidget instance methods

launch()

Launch the AirCredential widget and it will be displayed in the center of your webpage.

launch(): void

on()

The widget emits several events you can subscribe to in order to manage your application's flow:

• issueCompleted: Emitted when the issuance is successfully completed.
• verifyCompleted: Emitted when credential verification concludes. This event includes a result object with verification status.
• close: Emitted when the widget is closed or cancelled by the user.

on(event: 'issueCompleted', callback: () => void): void;
on(event: 'verifyCompleted', callback: VerifyCompletedHook): void;
on(event: 'close', callback: () => void): void;

hide()

Hide the AirCredential widget.

hide(): void

destroy()

Remove the message event listener registered by the AirCredential widget from the window and destroy the DOM node.

destroy(): void