Error Cant Resolve WebSdk

teknosains commented 1 year ago

I tried to follow the limited tutorial here,

reader.ts

/**
 * @author Budi K
 * 
 * @reference https://github.com/hidglobal
 */

import './modules/WebSdk';
import {  CardsReader, Card, CardInserted, CardRemoved, CardType } from '@digitalpersona/devices';

interface ICardData<T = any> {
  type: string | null
  data: T
}

export default class CardsSigninControl
{
  private reader: CardsReader | undefined;
  private card: any;
  private pin: string | undefined; // ini gk akan dipakai hrusnya

  init() {
    this.reader = new CardsReader();
    this.reader.on("DeviceConnected", this.onDeviceConnected);
    this.reader.on("DeviceDisconnected", this.onDeviceDisconnected);
    this.reader.on<CardInserted>("CardInserted", this.onCardInserted);
    this.reader.on<CardRemoved>("CardRemoved", this.onCardRemoved);
  }

  destroy() {
    this.reader?.off();
    delete this.reader;
  }

  // Event handlers.
  private onDeviceConnected = (event: any) => {
    console.log('Reader Connedted')
  }

  private onDeviceDisconnected = (event: any) => {
    console.log('Reader disconnected')
  }

  private onCardInserted = async (event: any) => {
    console.log('Card inserted into reader')
    try {
      // get card type and other info
      const card = await this.reader?.getCardInfo(event.deviceId);
      if (!card) return;

      this.card = card;
      let cardData: ICardData = { type: '', data: {} };

      // detek tipe kartu
      switch (card.Type) {
        case CardType.Contact:
          cardData.type = 'Contact';          
          break;
        case CardType.Contactless:
          cardData.type = 'Contactless';           
          break;
        case CardType.Proximity:
          cardData.type = 'Proximity'; 
          break;
        default:
          cardData.type = 'Unknwown'
      }

      cardData.data = await this.reader?.getCardAuthData(card.Reader);

      console.log(cardData);
      return cardData;

    } catch (err) {
      console.log(err)
      alert(err)
    }
  }

  private onCardRemoved = (event: any) => {
    console.log('Card removed from reader')
  }

}

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

import CardsSigninControl from './reader'

const BinusCardReader = new CardsSigninControl()

function App() {

  React.useEffect(() => {

    BinusCardReader.init()

    return () => {
      BinusCardReader.destroy()
    }
  }, [])

  return (
    <div className="App">
     ...
    </div>
  );
}

export default App;

public/index.html


<head>
    <script src="../src/modules/WebSdk/index.js"></script>
</head>
<body>
   <div id="roor"></div>
</body>

yet i got this Error, error reader

I have no idea why the @digitalpersona/devices library try to load the WebSdk? because in the tutorial

https://hidglobal.github.io/digitalpersona-devices/tutorial.html

WebSdk should even be loaded directly in html

teknosains commented 1 year ago

please help how to resolve this issue @a-bronx @daniilr @LenHodgeman

a-bronx commented 1 year ago

The @digitalpersona/devices library is a browser-side library, not a server-side. It expects the WebSdk global object to be present in the HTML page, and it uses the WebSdk channel to communicate with the client's devices.

You must not try to load it into your NodeJS server-side code, it will fail. If you see the WebSdk error in the NodeJS console, you're loading the @digitalpersona/devices into a wrong place, an you need to configure your bundler.

alex1727tonato commented 8 months ago

<head>
    <script src="../src/modules/WebSdk/index.js"></script>
</head>
<body>
   <div id="roor"></div>
</body>

Can you provide an example of an implementation in Nextjs? I have the same problem.

hidglobal / digitalpersona-devices

Error Cant Resolve WebSdk #36