@opencampus/oc-vc-verification-js v1.1.0

OpenCampus VC Verification SDK

A comprehensive SDK for verifying Verifiable Credentials (VCs) in React applications, supporting both mainnet and testnet environments.

🚀 Features

• BBS+ Verification
• NFT Ownership Verification
• Issuer Validation
• Mainnet and Testnet Support
• React Integration

📦 Installation

# Using npm
npm install @opencampus/oc-vc-verification-js

# Using yarn# 
yarn add @opencampus/oc-vc-verification-js

Compile & build project

yarn build

🔧 Usage

React Integration

1. Set up the Provider

import { CredentialProvider } from '@opencampus/oc-vc-verification-js';

function App() {
  return (
    <CredentialProvider OCUser={{ OCId, ethAddress }} opts={{windowMode: 'window' }} sandboxMode={true}>
      <YourApp />
    </CredentialProvider>
  );
}

• OCUser: (Required) is an object comprised of OCId and ethAddress of the user that is current prompted for selecting their VCs. OCUser should be passed in with the following shape

{
  OCId: <.edu OCId of the user>,
  ethAddress: <The ethAddress as returned from the connect with OCID process>
}

• sandboxMode: (Optional) if it is true, then item is issued in sandbox (testnet) environment, default to false (liveMode)
• windowMode: (Optional) the sdk supports 3 display modes: modal | tab | popup. The default display is popup

2. Retrieve Credentials

import { CredentialContext } from '@opencampus/oc-vc-verification-js';

const { 
  credentials
} = useContext(CredentialContext);

Javascript integration

1. Simple guidline to integrate with plain Javascript:

• There are two classes, SandboxCredentialSelector & LiveCredentialSelector that would help us to interact with either testnet or mainnet envrionment.

import {SandboxCredentialSelector, CredentialSelector} from '@opencampus/oc-vc-verification-js';

let storedCredentials
const updateCreds = credentialState => {
  storedCredentials = credentialState
};

let windowMode = 'modal';
let credentialSelector = new SandboxCredentialSelector(windowMode);
credentialSelector.credentialInfoManager.subscribe(updateCreds);

// call this code when users navigate away from the current page to avoid memory leak
credentialSelector.hide();

📊 Integrate with verification process

The SDK performs asynchronous verification of credentials received from our website. Each credential's verification result can be accessed using its token ID. Here's how to check verification status:

Access verification results for a specific token

import { CredentialContext } from '@opencampus/oc-vc-verification-js';
const { credentials, verificationResults } = useContext(CredentialContext);
const result = verificationResults[tokenId];

You can loop through all verification results. Each result contains an array of verifier checks

import { CredentialContext } from '@opencampus/oc-vc-verification-js';
const { credentials, verificationResults } = useContext(CredentialContext);
const result = verificationResults[tokenId];

Object.entries(verificationResults).map(([tokenId, result]) => {
  result.verificationResults.map(check => {
    console.log(`${check.verifierName}: ${check.isVerified ? 'Verified' : 'Failed'}`);
  });
});

The SDK provides two methods to access credential data: 1. metaData(): Fetches on-chain NFT data

const metadata = await credential.metaData();

2. credentialData(): Returns comprehensive credential information We also provide credentialData() that will return both on-chain data and credential data that the sdk received from OCID.

  const { metadata, presentationData } = await credential.credentialData();

Example usage:

const [metadataMap, setMetadataMap] = useState({});
    
useEffect(() => {
  const fetchAllMetadata = async () => {
    const metadata = {};
    await Promise.all(
      Object.values(credentials).map(async (credential) => {
        try {
          metadata[credential.tokenId] = await credential.metaData();
        } catch (error) {
          console.error('Error fetching metadata:', error);
          metadata[credential.tokenId] = null;
        }
      })
    );

    setMetadataMap(metadata);
  };
    
  fetchAllMetadata();
}, [credentials]);

SDK Interface Reference

useCredentialContext hook

The useCredentialContext hook returns a few useful states and functions:

OCCredential

The OCCredential object is a useful wrapper around a user selected credential. It encapsulates most complexity around using the selected credential.

Instance Values

Instance Methods

Verification Results

The VerificationResult object contains result from each of the verifiers on a credential selected by user.

Below are the verifiers that are implemented and you would see them in VerificationResult