Skip to content

Sunbird-RC/vc-verification

Repository files navigation

Sunbird VC Verification

The module is developed for scanning the QR(Quick Response) codes inside your Angular applications. This library are designed to be used in sunbird RC platforms.

To use this module you need to follow a few steps.

  1. Install vc-verification npm package in your angular project. Using below command
npm i vc-verification
  1. You need to install the @zxing/ngx-scanner npm module. Before install this npm module you need to check your angular compatible version with this package version. You can check the details below too.

Run cmd -

npm i @zxing/[email protected]
Angular Version Ngx-scanner version
Angular 9.0.0 <10 v3.0.0, v3.0.1
Angular 10.1.5 v3.1.0, v3.1.1, v3.1.2, v3.1.3
Angular 11.2.11, 12.0.4 v3.2.0, v3.3.0
Angular 11.2.11, 12.0.4, 13.0.0 v3.4.2, v3.5.0

For more detail about compatible version you can check this doc - https://www.npmpeer.dev/packages/@zxing/ngx-scanner/compatibility

  1. Add below CND link in index.html file
  <script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js"></script>
  1. Import vc-verification and @zxing/ngx-scanner library in your app.module.ts file

import { VerifyModule } from 'vc-verification';

import { ZXingScannerModule } from '@zxing/ngx-scanner';

import * as configData from '../assets/config.json'; // Read config from .json file

Or

// Add configuration in app.module.ts file

const configData = {

baseUrl: "assets/api/event-detail.json",

}

@NgModule({

declarations: [

AppComponent

],

imports: [

.....

......

VerifyModule.forChild(configData), < —

ZXingScannerModule, < —

.....

......

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

i) Anyone can use the Default Scan template using sb-vc-verify selector or he/she can use only verify service too.

Add below code in your app.component.html file

<sb-vc-verification> </sb-vc-verification>

ii) If anyone wants to change labels and messages from template. You can pass it through item property.

app.component.html

<sb-vc-verification [item]="itemData"></sb-vc-verification>

App.component.ts : Change the value of key

this.itemData =

{

"scanNote”:”To verify any eLocker document, simply scan the QR code that's on the document.”,

"verify_certificate": 'Verify Certificate',

"scan_qrcode": 'Scan QR Code',

"detecting_qrcode": 'Detecting QR code',

"back": 'Back',

"certificate_isverified": 'Certificate is verified',

"verify_another_Certificate": 'Verify another Certificate',

"cetificate_not_valid": 'This Certificate is not valid',

“scan_qrcode_again” : ‘Please scan QR code again’

}

});

iii) If anyone wants to use their own he/she can implement their own UI and he/she can use service methods of vc-verification library.

App.component.ts :

Import service file in your component where you want to call vc-verification library service method call.

import { Component } from '@angular/core';

import { VerifyService } from 'verify-module';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

constructor(public verifyService: VerifyService) {

this.verifyService.scanSuccessHandler(event).then((res) => {

console.log(res);

})

}

}

List of service methods

Method Name Parameter Description
enableScanner() - To Hide/show scanner screen
scanSuccessHandler($event: any) $event This method used to verify scan data

For latest info refer this doc - https://github.com/Sunbird-RC/community/blob/main/vc-verification-module.md

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published