Overview

The RBA-widget is designed to provide a secure and efficient way to handle user authentication and transaction verification using risk-based analysis. It supports login and transaction processes with detailed logging and error handling.

Features

• Risk-Based Authentication: Dynamically adjusts security measures based on the assessed risk level.
• Login and Transaction Support: Handles both user login and transaction verification.
• Detailed Logging: Provides comprehensive logs for actions and errors.
• Configurable: Easily integrate and configure with your existing systems.

Installation :-

i). Install at HTML pages

• Step 1: Be ready with HTML form and import the package

<script type="module">
   // import rba package
   import RBAWidget from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>

or use default type (umd file)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.min.js"></script>

• Step 2: Call RBAWidget function to get the risk based authentication service

   // form submission with RBAWidget for validating user
   RBAWidget({
      baseUrl: string,
      ipInfoToken:  string,
      type: string,
      userDetails: {
        userId: string,
        secret: string,
        accountId: string | null,
      },
      pageLoadTime: number,
      onMessage: (arg) => { }
   });

Note: If RBAWidget function is called in form, make sure you prevent default value.

Example :-

document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("myForm").addEventListener("submit", function (event) {
      // Prevent the default form submission behavior
      event.preventDefault();
      ...
      // call widget
      RBAWidget({
         ...
      });
   }
}

ii). Install at package.json

• Step 1: Be ready with terminal and install the package

npm install rba-widget 

or

yarn add rba-widget

• Step 2: import RBAWidget and its types from the rba-widget package

import RBAWidget, { RBAWidgetProps, UserDetails, LogMessage } from 'rba-widget';

• Step 3: Call RBAWidget function to get the risk based authentication service

   // form submission with RBAWidget for validating user
   RBAWidget({
      baseUrl: string,
      ipInfoToken:  string,
      type: string, // login | transaction
      userDetails: {
        userId: string,
        secret: string,
        accountId: string | null,
      },
      pageLoadTime: number,
      onMessage: (arg) => { 
        if(arg.code === 1) {
          // alert success
        } else if (arg.code === 0) {
          // alert failed
        } else {
          // observe the log messages
        }
      }
   });

| Key | Required | value | Description | | ----------- | :-----------: | :-----------: | :----------- | | baseUrl | true | string | It is used call the back office server base URL. | | ipInfoToken | true | string | It is used to location details api at ipInfo. | | type | true | string | It is used send what type of method going to be used. only login or transaction is allowed | | userDetails | true | object | It is used to get the user details, given in the form and from axiom protect dashboard. |
| onMessage | true | function | It is used get the response with more details. | | pageLoadTime | false | number | It is used pass the page loaded time by Date.now(). If not provided widget will take its initialized time. |

Types

type RBAWidgetProps = {
    baseUrl: string;
    ipInfoToken: string;
    type: "login" | "transaction";
    userDetails: UserDetails;
    onMessage: (arg: LogMessage) => void;
	  pageLoadTime?: number;
}

type UserDetails = {
    userId: string;
  	secret: string;
    accountId?: string | null;
	  transactionId?: string | null;
    transaction_amount?: string | number | null;
    transaction_type?: string | null;
    recipient_details?: string | null;
    transaction_category?: string | null;
}

type LogMessage = {
    action: string;
    message: string;
    code: number;
    data?: unknown;
}

Logging

Use the onMessage callback to receive detailed logs about the operations. The logs include an action, message, code, and optional data.

Response Codes

The widget provides response codes to indicate the status of operations(check for code):

• -1: Configuration error message
• 0: Failed message
• 1: Success message
• 2: Information message

Authors

• @Shankaresh