> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bridge.com.do/llms.txt
> Use this file to discover all available pages before exploring further.

# Bridge Connect

> Cómo integrar Bridge Connect a tu aplicación

<video src="https://framerusercontent.com/assets/Ztw3AB4k277L3CJztzk8N2w6k.mp4" autoPlay muted loop playsInline className="w-full aspect-video" />

## Introducción

Bridge Connect facilita la integración de Bridge a tu aplicación. En cuestión de minutos podrás agregarle a tu aplicación la habilidad de que tus usuarios conecten sus cuentas bancarias.

Implementando Bridge Connect obtienes validación de credenciales, autenticación de multi-factor, y selección de cuentas bancarias.

## Web

Para integrar Bridge Connect en tu aplicación web, simplemente agrega el siguiente script en tu página:

```html theme={null}
<script src="https://static.bridge.com.do/connect/bridge-connect.js"></script>
```

Recomendamos colocar el script al final del `body` de tu página web para que la carga de tu página no se vea afectada.

Luego, inicializa Bridge Connect con el ID de tu aplicación:

```javascript theme={null}
const bridgeConnect = BridgeConnect.init({
  applicationId: "<app_id>",
  externalUserId: "user_123", // Opcional: ID de usuario de tu sistema
});
```

El ID de tu aplicación lo puedes encontrar en la sección de configuración de tu aplicación en el [dashboard](https://dash.bridge.com.do/apps).

Cuando estés listo para abrir Bridge Connect, simplemente llama al método `open`:

```javascript theme={null}
bridgeConnect.open();
```

### Identificación de Usuarios

Puedes pasar un `externalUserId` (opcional) para asociar múltiples conexiones al mismo usuario. Esto permite:

* Acceder a todas las conexiones de un usuario final con un único token
* Listar todas las conexiones de un usuario mediante la API

Si no proporcionas un `externalUserId`, se creará un usuario anónimo y cada conexión requerirá su propio token.

### Eventos

Bridge Connect emite eventos que puedes escuchar para saber cuándo el usuario ha completado la conexión, o si ha cerrado Bridge Connect. Puedes escuchar estos eventos pasando funciones para `onInit`, `onSuccess`, y `onExit` al configurar Bridge Connect.

* `onSuccess`: Se ejecuta cuando el usuario ha completado la conexión, y recibe un objeto con:
  * `connectionId`: ID de la conexión creada
  * `accounts`: Arreglo de cuentas conectadas
  * `institution`: Información del banco
  * `user`: (Opcional) Información del usuario si proporcionaste `externalUserId`
  * `scopedToken`: (Opcional) **Solo se retorna en la primera conexión del usuario**. Este es el [Token de Acceso Limitado](/guides/authentication#token-de-acceso-limitado-scoped-token), necesario para descifrar y acceder a los datos sensibles de las cuentas conectadas. En conexiones subsecuentes del mismo usuario, debes usar el token original.
* `onInit`: Se ejecuta cuando Bridge Connect ha sido inicializado.
* `onExit`: Se ejecuta cuando el usuario ha cerrado Bridge Connect, abandonando el flujo de conexión.

Todas las funciones son opcionales.

<Warning>
  **Importante**: El [Token de Acceso Limitado](/guides/authentication#token-de-acceso-limitado-scoped-token) (`scopedToken`) solo se retorna la primera vez que un usuario (identificado por `externalUserId`) conecta una cuenta. En conexiones adicionales del mismo usuario, no se retorna un nuevo token. Debes almacenar el token de forma segura en la primera conexión.

  Para usuarios anónimos (sin `externalUserId`), cada conexión es tratada como un nuevo usuario y siempre recibirás un `scopedToken`.
</Warning>

### Reconectar una cuenta

Si las credenciales de una conexión expiran o se vuelven inválidas, puedes usar Bridge Connect para reconectar la cuenta sin crear una nueva conexión. Simplemente pasa el `connectionId` junto con el `applicationId`:

```javascript theme={null}
const bridgeConnect = BridgeConnect.init({
  applicationId: "app_*****",
  connectionId: "con_*****", // ID de la conexión a reconectar
  onSuccess: function ({ connectionId }) {
    console.log("Conexión restaurada:", connectionId);
    // Nota: No se retorna un scopedToken en reconexiones
  },
});

bridgeConnect.open();
```

Al reconectar:

* El usuario solo necesita ingresar sus credenciales bancarias
* Se omiten los pasos de selección de banco y cuentas
* El `scopedToken` original sigue siendo válido (no se retorna uno nuevo)
* Se verifican las cuentas para asegurar que corresponden a la conexión original

### Ejemplo completo

```html theme={null}
<!doctype html>
<html>
  <head>
    <title>Bridge Connect</title>
  </head>
  <body>
    <h1>Bridge Connect Demo</h1>
    <!-- Botón para abrir Bridge Connect -->
    <button id="connect">Conectar cuentas</button>

    <!-- [ Contenido de tu página ] -->

    <!-- Script de Bridge Connect -->
    <script src="https://static.bridge.com.do/connect/bridge-connect.js"></script>

    <!-- Inicializar y configurar Bridge Connect -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var bridgeConnect = BridgeConnect.init({
          applicationId: "app_*****",
          externalUserId: "user_123", // ID del usuario en tu sistema
          onInit: function () {
            console.log("Bridge Connect ha sido inicializado");
          },
          onSuccess: function ({
            connectionId,
            accounts,
            institution,
            user,
            scopedToken,
          }) {
            console.log("Conexión creada:", connectionId);
            console.log("Banco:", institution.name);
            console.log("Cuentas conectadas:", accounts.length);

            // Solo se recibe scopedToken en la primera conexión del usuario
            if (scopedToken) {
              console.log("Scoped token (primera conexión):", scopedToken);
            } else {
              console.log("Conexión adicional - usa el token existente");
            }

            if (user) {
              console.log("Usuario:", user.id, user.externalUserId);
            }
          },
          onExit: function () {
            console.log("El usuario ha cerrado Bridge Connect");
          },
        });

        // Agregar evento al botón para abrir Bridge Connect
        document
          .getElementById("connect")
          .addEventListener("click", function () {
            bridgeConnect.open();
          });
      });
    </script>
  </body>
</html>
```

## Otras plataformas

Tenemos SDKs para React y React Native disponibles, y estamos trabajando en SDKs nativos para iOS y Android. Si estás interesado, contáctanos para ayudar a priorizar compatiblidad para tu caso de uso.