Biometrically enable your web application

BioClient.Web content

To biometrically enable your web application using BioClient V3, and start transacting with BioClient.Web, you simply include three JavaScript files in your web application:

alcazar-base.js - This is the base Alcazar JavaScript file. It is a dependency for BioClient.Web.
bioclient-plugin.js - This is the main BioClient.Web JavaScript file. It contains the core plugin and is always required.
bioclient-your-app.js - This is your custom implementation of BioClient.Web builder and response functions.

You find these files in the BioClient.Web.Content NuGet package. When you include this package in your web application, these files are copied to the Scripts folder of your web application. Typically, bioclient-plugin.js is used without any modifications. However, you need to create your own bioclient-your-app.js to suit your application. BioClient.Web.Content includes four sample implementations:

bioclient-sample.js contains a bare-minimum sample implementation for builder and response methods. It can serve as template for application-specific implementations.
bioclient-internal.js contains a sample implementation for builder and response methods. This sample is suitable for an Alcazar internal demo application, and demonstrates the principles of builder and response methods.
bioclient-store.js contains a sample implementation for builder and response methods. This sample is suitable for the transact pages of Alcazar Biostore, and is a real-life example of how an application has implemented builder and response methods.
bioclient-single.js, contains a sample implementation for builder and response methods. This sample is suitable for the Alcazar.Single biometric verification option of multi-factor authentication, and is a real-life example of how an application has implemented builder and response methods.

BioClient.Web usage

To use BioClient.Web in your web application, you need to include the following scripts on your web page:

Include the required Javascript files for biometric enablement.

  <script src="~/Scripts/alcazar-base.js">
  </script>
  <script src="~/Scripts/bioclient-plugin.js">
  </script>
  <script src="~/Scripts/bioclient-your-app.js">
  </script>

Extend the built-in BioClient options with your own implementation. pageOptions represent any options specifically required for the current page, and the yourOptions object represents your application-wide options, which must be defined in bioclient-your-app.js.
```
// Define page options
const pageOptions = {};
```
```
// Extend the built-in BioClient options
var options = $.extend(yourOptions, pageOptions);
```

On page load, define the bioClient object to transact against.

// On page load, define the bioClient object
const bioClient = BioClientClass.init(options);

Call built-in and custom methods to setup event handlers. The custom methods must be defined in bioclient-your-app.js.

// Call built-in and custom methods to setup event handlers
bc_addToastrEvents(bioClient);
bc_addButtonEvents(bioClient);
bc_addCustomButtonEvents(bioClient);
bc_addCustomMessageEvents(bioClient);

Finally, you might want to transact against BioClient immediately on page load

// Perform any BioClient transactions on page load
var id = $('#Person_ID').val();
var name = $('#Person_PersonIdentity').val();
if (id !== 0 || name !== null) {
  bioClient.retrieve_person();
}

The complete Javascript block could look like this example:

    <script src="~/Scripts/alcazar-base.js">
    </script>
    <script src="~/Scripts/bioclient-plugin.js">
    </script>
    <script src="~/Scripts/bioclient-store.js">
    </script>

    <script>
        $(function () {
            // Extend the built-in BioClient options
            const pageOptions = {};
            var options = $.extend(storeOptions, pageOptions);

            // On page load, define the bioClient object
            const bioClient = BioClientClass.init(storeOptions);

            // Call built-in and custom methods to setup event hendlers
            bc_addToastrEvents(bioClient);
            bc_addButtonEvents(bioClient);
            bc_addButtonEvents_View(bioClient);
            bc_addMessageEvents(bioClient);

            // Perform any BioClient transactions on page load
            var id = $('#Person_ID').val();
            var name = $('#Person_PersonIdentity').val();
            if (id !== 0 || name !== null) {
                bioClient.retrieve_person();
            }
        });
    </script>

BioClient object initialisation

For your page to successfully connect to the BioClient.Web service and to transact, you need to provide:

A custom override for the constructed option in your bioclient-your-app.js file. This method is called when the BioClient object is successfully constructed. You can use this event for visual feedback or to perform further initialisation. The constructed option is not implemented as an event, as the event is fired while the object is constructed, and the caller could not yet have subscribed to the event.
An override to the built-in option get_service_url in your bioclient-your-app.js file, which provides the URL of the BioClient.Web service. The default implementation returns a hardcoded URL wss://localhost:44314/biometric. This URL may be suitable in many cases, or you might want to override it.
A custom override for BioClient events in your bioclient-your-app.js file. These events are triggered when BioClient transacts. You can use these event for visual feedback or any other action.
Custom build and response functions in your bioclient-your-app.js file. Built-in functions are provided in bioclient-sample.js, but are basic samples only, which will not suffice for most use cases. This section will be the largest part of your implementation.

For an implementation example, see the section bioclient-your-app.js below in The BioClient Javascript plugin.

BioClient custom implementation

The bioclient-your-app.js defines your custom implementation of BioClient.Web builder and response functions.

The main element of this file is the yourOptions object, which is used to extend the built-in BioClient options.
```
const storeOptions = { };
```

This example of the constructed option displays a toastr notification when the BioClient object is constructed.

  constructed: function (obj) {
      toastr['info']("Constructed BioClient '{0}'...".format(obj), 'Connect');
  },

This example of the get_service_url option obtains the service URL from the web page.

  get_service_url: function () {
      return $('#bioclient-service-url').val();
  },

This example of custom override of the BioClient sending event hides elements on the web page.

  bioClient.addEventListener('sending', function (evt) {
      $('#bc-person-message').hide();
      $('#bc-capture-message').hide();
  });

This example of the custom build function to retrieve a person obtains parameters from the page and returns the constructed command.

  build_retrieve_person: function () {
      // Build the command to verify a feature
      var storeName = $('#bioclient-uniqueName').val();
      var adapter = $('#bioclient-adapter').val();
      var name = $('#Person_PersonIdentity').val();
      var mode = $('#mode').val();
      var sampleClass = $('#sampleClass').val();
      var featureClass = $('#featureClass').val();
      var data = $('#data').prop("checked");
      var props = $('#propsTemplate').val();
      return { command: 'retrieve', storeName, adapter, name, mode, sampleClass, featureClass, data, props };
  },

This example of the custom response function after retrieving a person displays the content of the response on the page.

  retrieved_person: function (response) {
      // We have a response, update the UI
      $("#Person_ID").val(person.id);
      $("#Person_PersonIdentity").val(person.name);
      $("#Person_Description").val(person.description);
      $("#Person_Status").val(person.status);
      $("#Person_Substatus").val(person.substatus);
      $("#Person_Group").val(person.group);
      $("#Person_Subgroup").val(person.subgroup);
      $("#Person_FirstEnrolled").val(person.created);
      $("#Person_LastUpdated").val(person.modified);
  },