Este script está diseñado para implementarse dentro de la página/vista html del proyecto del cliente cuando sea necesario. Inicialmente, se debe agregar el siguiente código dentro de las etiquetas <script> o el archivo javascript de la página/vista donde desea implementar el 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: { ... },
});
Contenido
Esto permitirá que el script se cargue en la página/vista donde desea agregar, ademas de permitir la parametrización inicial del widget para identificar al cliente y obtener la información del usuario a autenticar.
| Nombre | Tipo | Opcional | Descripción |
|---|---|---|---|
| p | string | No | El numero del cliente a consultar |
| a | string | No | La cuenta con la que el cliente se registró |
| s | string | No | El id del escudo con el que fue creado |
| i | string | Si | Número que hace referencia a la OTP generada por el cliente, es requerido si el cliente configura su OTP. |
| m | string | Si | Información detallada de la transacción agregada por el cliente, siempre y cuando se configure |
El siguiente código es un ejemplo de la implementación del script del widget dentro de una página HTML estática, donde se agregará dentro de las etiquetas <script> del body:
Ejemplo:
<!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>
Con lo anterior podrás hacer uso de las funcionalidades y eventos que tiene el widget. Es importante tomar en cuenta que la implementación del código anterior se usa solo dentro de las páginas/vistas donde se quiere usar el widget, de igual forma se sugiere implementar la instrucción desde el momento en que se usa el widget , las funciones y eventos que se describirán más adelante dentro de la página/vista.
La información que se utiliza dentro de esta función puede ser consultada desde masivapp, desde la vista de edición del escudo en la pestaña de implementación, donde encontrará la información previamente parametrizada de los valores i y a; se deben configurar los valores que corresponden a las variables m y p de acuerdo a las descripciones dadas anteriormente, así como el valor de i, que dependerá de la configuración de la OTP del shield (se debe configurar en el caso de un escudo con OTP externa).
Shield proporciona un componente que deberá implementar en el html de la página/vista donde utilizará el widget.
Hay que tener en cuenta que a pesar de incluir el componente que corresponde al widget, este permanecerá oculto hasta que se ejecute la función wmavshield.show(true), que se describirá más adelante.
| TAG |
|---|
| <w-shield></w-shield> |
Ejemplo:
<!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>
...
<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: { ... },
});
</script>
</body>
</html>
Shield le permite realizar un seguimiento de las acciones básicas del widget. Puede consultar cuándo el widget se ha cargado correctamente dentro de la página/vista donde desea implementarlo (después de haber agregado la secuencia de comandos inicial), lo que le permite iniciar las funciones básicas del widget, como configurar o cargar una función de devolución de llamada, y también sabrá cuándo el widget devuelve una respuesta de la transacción, todo desde la variable window.wmavshield.e.
Le permite realizar un seguimiento de la carga exitosa del widget Shield después de que se implementó el script inicial. Se sugiere implementar las funciones init y registerCallback después de que el script se haya cargado en la página/vista donde se implementará el widget.
Ejemplo: