# SDK para web

> Integrar el SDK web de detección de fraude de Ironchip: navegadores compatibles, paquete npm, inicialización con la API key, envío de transacciones y ejemplo.

URL: https://docs.ironchip.com/fraude/sdk/web/

El SDK web de Ironchip LBFraud permite evaluar si el dispositivo y el entorno desde el que se usa tu web son seguros para operar. Se añade a la web en unos pocos pasos: instalar el paquete, inicializar el cliente con tu API key y enviar una transacción en cada operación sensible.

## Navegadores compatibles

| Navegador               | Versión mínima probada |
| ----------------------- | ---------------------- |
| Chrome                  | 68.0.3440.91           |
| Firefox                 | 60.0                   |
| Mobile Safari           | 12.1.2                 |
| Brave                   | 119.0.0.0              |
| Edge                    | 97.0.1072.62           |
| Opera                   | 95.0.0.0               |
| Chromium                | 76.0.3809.100          |
| Chrome WebView          | 84.0.4147.89           |
| GSA (Google Search App) | 130.0.337455237        |
| DuckDuckGo              | 5                      |
| Silk                    | 108.7.2                |
| Samsung Browser         | 17.0                   |
| PaleMoon                | 32.2.0                 |
| Avast Secure Browser    | 109.0.24252.121        |
| Huawei Browser          | 12.1.3.304             |
| MIUI Browser            | 10.9.8                 |
| Yandex                  | 24.9.1.56.00           |
| Whale                   | 3.4.5.2                |

## Instalación

Puedes integrar el SDK en un fichero JavaScript o directamente en el HTML entre etiquetas `script`. Recomendamos usar un fichero JavaScript y ofuscarlo siempre.

1. Añade el paquete de Node.js. Sustituye `<VERSION>` por la versión del SDK que quieras instalar:

   ```bash
   npm i https://github.com/Ironchip-Security/Ironchip-Fraud-Detection-Web-SDK/releases/download/<VERSION>/ironchip-fraud-detection-web-sdk-<VERSION>.tgz
   ```

   Por ejemplo, para la versión `1.0.0`:

   ```bash
   npm i https://github.com/Ironchip-Security/Ironchip-Fraud-Detection-Web-SDK/releases/download/1.0.0/ironchip-fraud-detection-web-sdk-1.0.0.tgz
   ```

2. Importa el paquete:

   ```js
   import { LBFraudSDK, LBFraudSDKEnvironment } from 'ironchip-fraud-detection-web-sdk';
   ```

3. Inicializa el cliente con tu API key y el entorno de producción:

   ```js
   const client = new LBFraudSDK({
     apiKey: '<API_KEY>',
     environment: LBFraudSDKEnvironment.Production,
   });
   ```

:::caution[Ofusca el código]
Esta parte del código contiene la API key. Recomendamos que vaya siempre ofuscada.
:::

## Uso

Con el cliente inicializado, llama al método `sendTransaction` con el ID de la transacción y el ID del usuario:

```js
client.sendTransaction(transactionID, userID);
```

- `transactionID` (obligatorio, único): identificador con el que después pedirás el informe.
- `userID` (obligatorio): identificador del usuario.
- `extraData` (opcional): tercer parámetro, un `Map` con información adicional para el análisis.

```js
const extraData = new Map();
extraData.set('operation', { type: 'booking', amount: 60 });

client.sendTransaction(transactionID, userID, extraData);
```

Cada vez que se llama al método, se envía una transacción. El método devuelve una promesa: se resuelve cuando el motor acepta la transacción (respuesta HTTP 202) y se rechaza con un objeto con los campos `error`, `error_code`, `traceability_id` y `http_status_code` si la respuesta es un error. Si el navegador no tiene conexión, la promesa se rechaza con el error `no internet connection`.

## Ejemplo

El siguiente ejemplo completo sirve para probar el SDK. Incluye el anonimizado del ID de usuario (recorte, minúsculas y SHA-256) antes de enviar la transacción.

```js title="test.js"

const client = new LBFraudSDK({
  apiKey: '<API_KEY>', // Sustituye <API_KEY> por tu API key real
  environment: LBFraudSDKEnvironment.Production,
});

const myButton = document.getElementById('myButton');

// Recorta, convierte a minúsculas y calcula el hash del userID
async function anonymizeUserID(userID) {
  const trimmedLowercaseUserID = userID.trim().toLowerCase();
  const hashedUserID = await sha256Hash(trimmedLowercaseUserID);
  return hashedUserID;
}

// Calcula el hash con SHA-256
async function sha256Hash(text) {
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  const hash = await crypto.subtle.digest('SHA-256', data);
  return Array.from(new Uint8Array(hash))
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');
}

// Inicio de sesión simulado
async function performLogin(username, password) {
  // Simula un retraso de 2 segundos para la autenticación
  await new Promise((resolve) => setTimeout(resolve, 2000));

  // Devuelve siempre true: sustitúyelo por tu lógica de inicio de sesión real
  return true;
}

function setListener() {
  myButton.onclick = async function () {
    const transactionID = document.getElementById('transactionId').value;
    const userID = document.getElementById('userId').value;

    // Simula la entrada del usuario para el inicio de sesión
    const username = 'testuser'; // Sustituye por el valor real
    const password = 'testpassword'; // Sustituye por el valor real

    const loginSuccessful = await performLogin(username, password);

    if (loginSuccessful) {
      // Si el inicio de sesión es correcto, anonimiza el userID antes de enviar la transacción
      const anonymizedUserID = await anonymizeUserID(userID);

      // Envía la transacción
      client
        .sendTransaction(transactionID, anonymizedUserID)
        .then((success) => {
          console.log('Transacción enviada:', success);
        })
        .catch((errorMsg) => {
          console.log('Error durante la transacción:', errorMsg);
        });
    } else {
      // Código a ejecutar si el inicio de sesión falla.
    }
  };
}

window.onload = function () {
  setListener();
};
```

```html title="index.html"
<!DOCTYPE html>
<html>
  <head>
    <title>Web SDK test</title>
  </head>
  <body>
    <label for="transactionId">Transaction ID:</label>
    <input type="text" id="transactionId" name="transactionId" />

    <label for="userId">User ID:</label>
    <input type="text" id="userId" name="userId" />

    <button id="myButton">Enviar transacción</button>

    <script type="module" src="test.js"></script>
  </body>
</html>
```

## Permiso de ubicación

Para usar correctamente el SDK, es necesario activar el permiso de ubicación.

En **Safari**, si el navegador no muestra el cuadro para permitirlo, actívalo a mano:

1. En tu Mac, elige el menú Apple > **Ajustes del Sistema**, haz clic en **Privacidad y seguridad** en la barra lateral y, a la derecha, en **Localización**.

   [Imagen: Ajustes del Sistema de macOS en Privacidad y seguridad, con la opción Localización]

2. En la lista de la derecha, activa el interruptor de **Safari**.

   [Imagen: Pantalla Localización de macOS con el interruptor de Safari activado]

## Registro de cambios

### 0.1.4 (2024-02-19)

**Añadido**

- Nuevo método para determinar si el navegador se está ejecutando en modo incógnito.

### 0.1.3 (2023-12-18)

**Añadido**

- Cookies para identificar mejor el dispositivo.

**Cambiado**

- Mejor detección de navegador (Opera y Brave).

### 0.1.2 (2023-10-26)

**Cambiado**

- Mejora de la gestión de errores.
- Mejor detección de las versiones de Windows.

### 0.1.1 (2023-07-21)

**Cambiado**

- SDK ofuscado.

### 0.1.0 (2023-02-22)

**Añadido**

- Primera versión del SDK web.