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

# Didit 网页身份验证 SDK：JavaScript 与 iframe 集成

> Didit 提供网页 KYC、KYB、AML 与活体检测 SDK，支持 JavaScript、iframe、重定向或 WebView。完整 KYC 每次 $0.33 起，每月免费 $10，无需合同。

> [!NOTE]
>
> Estas guías cubren la verificación de identidad. Para el inicio de sesión de usuarios finales, usa las [guías de la plataforma de autenticación](https://docs.didit.me/zh/authentication/overview.md); los nuevos paquetes de autenticación dependen de la versión de lanzamiento.

Integra la verificación de Didit en tu aplicación web. Ofrecemos siete métodos de integración para adaptarnos a tu arquitectura y a los requisitos de experiencia de usuario: elige el que coincida con tu stack.

> [!NOTE]
>
> **Elige tu método de integración**: desde iframes rápidos y sin código hasta control programático completo con nuestro SDK de JavaScript, o plugins listos para usar en WordPress, Shopify y Salesforce.

***

## Métodos de integración

| Método | Tiempo de configuración | Backend | Ideal para |
| - | - | - | - |
| [SDK de JavaScript](https://docs.didit.me/zh/integration/web-sdks/javascript-sdk.md) | 3 minutos | Opcional | Control total: React/Vue/Angular/Next.js/Nuxt/Svelte/JS puro |
| [InContext (iframe)](https://docs.didit.me/zh/integration/web-sdks/incontext-iframe.md) | \< 1 minuto | Opcional | Experiencia integrada sin redirección |
| [Redirección](https://docs.didit.me/zh/integration/web-sdks/web-redirect.md) | 5 minutos | Sí | Máxima compatibilidad, flujos entre dispositivos |
| [WebView (iOS/Android)](https://docs.didit.me/zh/integration/web-sdks/webview-in-ios-android.md) | 15 minutos | Sí | Alternativa móvil cuando no hay SDK nativo disponible |
| [WordPress + WooCommerce](https://docs.didit.me/zh/integration/web-sdks/wordpress-woocommerce.md) | 5 minutos | Sin código | Sitios de WordPress, tiendas de WooCommerce |
| [Shopify](https://docs.didit.me/zh/integration/web-sdks/shopify.md) | 5 minutos | Sin código | Tiendas de Shopify: verificación durante el pago o verificación de la cuenta |
| [Salesforce](https://docs.didit.me/zh/integration/web-sdks/salesforce.md) | 10 minutos | Sin código | CRM de Salesforce: verificación de registros de contacto o cliente potencial |

> [!NOTE]
>
> **Recomendación**: para aplicaciones web en producción, usa el **SDK de JavaScript** para la mejor experiencia de usuario y el control programático completo. Usa el **iframe InContext** para la configuración más rápida, **Redirección** cuando se necesite verificación entre dispositivos, y las integraciones específicas de **WordPress / Shopify / Salesforce** si trabajas en esas plataformas.

***

## SDK de JavaScript

El SDK de JavaScript de Didit ofrece una forma programática de integrar la verificación, con control total sobre la experiencia de usuario.

**Características principales:**

* Gestión de sesiones y callbacks de eventos
* Compatibilidad con React, Vue, Angular, NextJS, Nuxt, Svelte y JavaScript puro
* Soporte completo de TypeScript
* Modos modal y en línea

**Inicio rápido:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```

→ [**Documentación completa del SDK de JavaScript**](https://docs.didit.me/zh/integration/web-sdks/javascript-sdk.md)

***

## InContext (iframe)

Integra el flujo de verificación directamente en tu aplicación mediante un iframe. Experiencia fluida, sin redirigir a los usuarios fuera de tu sitio.

**Características principales:**

* UniLink (sin backend necesario): configuración en \< 1 minuto
* Sesión de API (con backend): personalización completa
* Implementaciones modal y en línea
* Ejemplos de componentes para React

**Inicio rápido:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>
```

→ [**Documentación completa de InContext**](https://docs.didit.me/zh/integration/web-sdks/incontext-iframe.md)

***

## Redirección

Redirige a los usuarios a la página de verificación alojada por Didit. Al terminar, los usuarios regresan a tu URL de callback.

**Características principales:**

* Máxima compatibilidad con navegadores
* Soporte de verificación entre dispositivos
* Integración sencilla
* Funciona cuando el acceso a la cámara en el iframe presenta problemas

**Inicio rápido:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**Documentación completa de Redirección**](https://docs.didit.me/zh/integration/web-sdks/web-redirect.md)

***

## Comparación

| Característica | SDK de JavaScript | InContext (iframe) | Redirección |
| - | - | - | - |
| Tiempo de configuración | 3 min | \< 1 min | 5 min |
| Backend requerido | Opcional | Opcional | Sí |
| Permanece en tu dominio | Sí | Sí | No |
| Soporte entre dispositivos | Sí | Sí | Sí |
| Control programático completo | Sí | Limitado | Solo callback |
| Callbacks de eventos | En tiempo real | `postMessage` | Solo callback |
| Marca blanca | Sí | Sí | Sí |
| Compatibilidad con navegadores | Todos | Todos | Todos |

> [!NOTE]
>
> Los tres métodos entregan resultados finales firmados mediante [webhooks](https://docs.didit.me/zh/integration/webhooks.md). La comparación anterior describe la experiencia de uso en el navegador, no cómo recibes la decisión de verificación.

***

## Configuración

### Permisos necesarios del iframe

En las integraciones con iframe InContext, incluye siempre estos permisos:

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
```

***

## Repositorios de ejemplo

> [card] [Ejemplos web del SDK](https://github.com/didit-protocol/sdk-web-examples)
>
> Ejemplos en React, Vue, Angular, Next.js, Nuxt, Svelte y JavaScript puro

> [card] [Ejemplo de iframe](https://github.com/didit-protocol/iframe-example)
>
> Ejemplos de iframe con UniLink y con sesión de API

> [card] [Demo completa de Next.js](https://github.com/didit-protocol/didit-full-demo)
>
> Integración de extremo a extremo con Next.js

> [card] [Paquete NPM](https://www.npmjs.com/package/@didit-protocol/sdk-web)
>
> `@didit-protocol/sdk-web` en npm

## Relacionado

* [Webhooks](https://docs.didit.me/zh/integration/webhooks.md): recibe en tu backend los resultados de verificación firmados
* [API de creación de sesiones](https://docs.didit.me/zh/sessions-api/create-session.md): el endpoint en el que se basa cada SDK web
* [SDK nativos](https://docs.didit.me/zh/integration/native-sdks/overview.md): iOS, Android, React Native, Flutter


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.