Initial Script

This script is designed to be implemented within the client project's html page/view where required.

Initially, the following code must be added within the <script> tags or the javascript file of the page/view where you want to implement the widget:

!function (t, e, n, s) {
  t[s] = function (){t[s].q=[...(t[s].q||[]),arguments]};t[s].e=e.getElementsByTagName('w-shield')[0];
  var c=e.createElement("script"),o= e.getElementsByTagName("script")[0];!e.getElementById(s)
  ?(o=e.getElementsByTagName("script")[0],c.async=1,c.src=n,c.id=s,o.parentNode.insertBefore(c, o)):null;
}(window, document, "<https://shield-authentication.masivapp.com/js/shield.js>", "wmavshield");
wmavshield('configuration', {
  p: "12345678",
  s: "abcde-shield-id",
  a: "account-id",
  i: "",
  m: { ... },
});

This will allow the script to be loaded on the page/view where you want to add it, as well as allowing the initial configuration of the widget to identify the client and obtain the information of the user to authenticate.

Name	Type	Optional	Description
p	string	No	Phone number of the client to consult
a	string	No	Account that the client signed up with
s	string	No	Shield ID with which it was created
i	string	Yes	Number that refers to the OTP generated by the client, it is required if the client configures its OTP.
m	object	Yes	Detailed information of the transaction added by the client, as long as you configure

The following code is an example of implementing the widget script within a static HTML page, where it will be added within the <script> tags of the body:

Example:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shield Implementation Example</title>
    <style>
			...
    </style>
</head>
<body>
  ...
  <script>
    !function (t, e, n, s) {
      t[s] = function (){t[s].q=[...(t[s].q||[]),arguments]};t[s].e=e.getElementsByTagName('w-shield')[0];
      var c=e.createElement("script"),o= e.getElementsByTagName("script")[0];!e.getElementById(s)
      ?(o=e.getElementsByTagName("script")[0],c.async=1,c.src=n,c.id=s,o.parentNode.insertBefore(c, o)):null;
    }(window, document, "<https://shield-authentication.masivapp.com/js/shield.js>", "wmavshield");
    wmavshield('configuration', {
      p: "12345678",
      s: "abcde-shield-id",
      a: "account-id",
      i: "",
      m: { ... },
    });
  </script>
</body>
</html>

With the above, you will be able to make use of the functionalities and events that the widget has. It is important to take into account that the implementation of the previous code is used only within the pages/views where you want to use the widget, in the same way, it is suggested that the instruction be implemented from the moment the widget is used, the functions and events that will be described later within the page/view.

The information that is used within this function can be consulted from masivapp, from the shield edition view in the implementation tab, where you will find the previously parameterized information of the i and a values; the values that correspond to the variables m and p must be configured according to the descriptions given above, as well as the value of i, which will depend on the configuration of the OTP of the shield (it must be configured in the case of an external OTP shield).

Untitled

Widget component

Shield provides a component that you will need to implement in the html of the page/view where you will use the widget.

It must be taken into account that despite including the component that corresponds to the widget, it will be hidden until the wmavshield.show(true) function is executed, which will be described later.

TAG
<w-shield></w-shield>

Example:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shield Implementation Example</title>
</head>
<body>
		<w-shield></w-shield>
		...
    <script>
        !function (t, e, n, s) {
		      t[s] = function (){t[s].q=[...(t[s].q||[]),arguments]};t[s].e=e.getElementsByTagName('w-shield')[0];
		      var c=e.createElement("script"),o= e.getElementsByTagName("script")[0];!e.getElementById(s)
		      ?(o=e.getElementsByTagName("script")[0],c.async=1,c.src=n,c.id=s,o.parentNode.insertBefore(c, o)):null;
		    }(window, document, "<https://shield-authentication.masivapp.com/js/shield.js>", "wmavshield");
		    wmavshield('configuration', {
		      p: "12345678",
		      s: "abcde-shield-id",
		      a: "account-id",
		      i: "",
		      m: { ... },
		    });

        wmavshield.e.addEventListener("wmavshield:load", (e) => { // listen script load
          wmavshield.init(); // initialize widget
          wmavshield.registerCallback(function(e) { ... });
        });

				wmavshield.e.addEventListener("wmavshield:result", (e) => { // listen validation result
					console.log(e.detail); // print { expired: true|false, authenticationResult: true|false }
        });
    </script>
</body>
</html>

Script events data

Shield allows you to keep track of the basic actions of the widget. You can query when the widget has loaded successfully within the page/view where you want to deploy it (after you've added the initial script), allowing you to start basic widget functions, such as setting up or loading a callback function, and you will also know when the widget returns a response from the transaction, all from the variable window.wmavshield.e.

wmavshield:load

Allows you to track the successful loading of the Shield widget after the initial script has been deployed. It is suggested to implement the init and registerCallback functions after the script has been loaded into the page/view where the widget will be implemented.

Example: