Installation & Setup for Browser Applications

Adding the ZSM Client SDK into your Browser project

The ZSM Client SDK is a package that provides programmatic access to Ideem’s interfaces used to integrate Universal Multi-Factor Authentication (UMFA) into your application. This document will guide you through the process of adding the ZSM Client SDK to your Browser app project.

Step #1: Install the NPM Package

From within your project directory, run the following command to install the ZSM Client SDK:

npm install @ideem/zsm-client-sdk --save

After installation, you should see the following in your package.json file (#.#.## will depend on the version installed):

"dependencies": {
    "@ideem/zsm-client-sdk": "^#.#.##"
}

IMPORTANT: You can ensure that, during the development process, the ZSM Client SDK is always up to date by using the npm update command.

OPTIONAL: You can also change the "^#.#.##" in your package.json to "latest" to always get the latest version (although it is recommended that you specify a specific version, or version range when rolling to production to avoid breaking changes as future releases are published):

"dependencies": {
    "@ideem/zsm-client-sdk": "latest"
}

Step #2: Import the ZSM Client SDK

The ZSM Client SDK can be imported into your application in one of three ways:

1. ES Modules/Frameworks/Modern Universal ("import" syntax)

The SDK can be included in ES module applications using the import statement. (This includes virtually all modern browsers and Node.js versions that support ES modules (which includes almost every JS framework).

(This also includes the use of the type="module" attribute in the <script> tag, as well as the use of the --experimental-modules flag in Node.js.)

Frameworks (and Node.js with ES modules/--experimental-modules flag)

import { UMFAClient } from './zsm-client-sdk.js';

(or, using the type="module" attribute in the <script> tag of vanilla HTML)

<script type="module">
    import { UMFAClient } from "./node_modules/@ideem/zsm-client-sdk/zsm-client-sdk.js";
</script>

2. Node.js/CommonJS ("require" syntax):

The SDK can be included in Node.js and CommonJS applications using the require function.

const { UMFAClient } = require('./zsm-client-sdk.js');

3. Browser/HTML:

The SDK can be included in HTML files using a <script> tag. The SDK will be available as a global object named ZSMClientSDK.

<script src="./node_modules/@ideem/zsm-client-sdk/zsm-client-sdk.js">
    const {UMFAClient} = ZSMClientSDK;
</script>

Step #3: Set up the ZSM Configuration File

Within your application, create a .json file or JSON object to store the ZSM application configuration. It should contain the following properties:

{ 
    "application_id"           : "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    "host_url"                 : "https://zsm-authenticator-demo.useideem.com/",
    "application_environment"  : "TEST",
    "api_key"                  : "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
}

These values are provided by Ideem and are unique to your application, although testing versions are pre-populated in the Sample Apps specific to the language you are using.

Configuration Properties

Step #4: Initialize the ZSM Client SDK

After importing the ZSM Client SDK and setting up the configuration file, you can initialize the client SDK - being sure to pass it the configuration object you created in the previous step - as follows:

UMFA Client:

    const umfaClient = new UMFAClient(config);