> ## 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.

# Web-SDKs für Identitätsprüfung: JS & Iframe

> Didit Web-SDKs für KYC, KYB, AML und Liveness: JS, Iframe, Redirect oder WebView. Ab $0.33 pro vollem KYC-Check, $10 gratis/Monat, ohne Vertrag.

> [!NOTE]
>
> Diese Anleitungen behandeln die Identitätsverifizierung. Für die Anmeldung von Endbenutzern nutzen Sie die [Anleitungen zur Authentifizierungsplattform](https://docs.didit.me/de/authentication/overview.md); die neuen Authentifizierungspakete sind von der jeweiligen Version abhängig.

Integrieren Sie die Didit-Verifizierung in Ihre Webanwendung. Wir bieten sieben Integrationsmethoden passend zu Ihrer Architektur und Ihren Anforderungen an das Benutzererlebnis – wählen Sie die Methode, die zu Ihrem Stack passt.

> [!NOTE]
>
> **Wählen Sie Ihre Integrationsmethode**: Von schnellen No-Code-Iframes über die vollständige programmatische Kontrolle mit unserem JavaScript SDK bis hin zu Drop-in-Plugins für WordPress, Shopify und Salesforce.

***

## Integrationsmethoden

| Methode | Setup-Zeit | Backend? | Ideal für |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/de/integration/web-sdks/javascript-sdk.md) | 3 Minuten | Optional | Volle Kontrolle – React/Vue/Angular/Next.js/Nuxt/Svelte/Vanilla |
| [InContext (Iframe)](https://docs.didit.me/de/integration/web-sdks/incontext-iframe.md) | \< 1 Minute | Optional | Eingebettetes Erlebnis ohne Weiterleitung |
| [Weiterleitung](https://docs.didit.me/de/integration/web-sdks/web-redirect.md) | 5 Minuten | Ja | Maximale Kompatibilität, geräteübergreifende Abläufe |
| [WebView (iOS/Android)](https://docs.didit.me/de/integration/web-sdks/webview-in-ios-android.md) | 15 Minuten | Ja | Mobiler Fallback, wenn kein natives SDK verfügbar ist |
| [WordPress + WooCommerce](https://docs.didit.me/de/integration/web-sdks/wordpress-woocommerce.md) | 5 Minuten | No-Code | WordPress-Websites, WooCommerce-Shops |
| [Shopify](https://docs.didit.me/de/integration/web-sdks/shopify.md) | 5 Minuten | No-Code | Shopify-Shops – Verifizierung beim Checkout oder für Konten |
| [Salesforce](https://docs.didit.me/de/integration/web-sdks/salesforce.md) | 10 Minuten | No-Code | Salesforce CRM – Verifizierung von Kontakt-/Lead-Datensätzen |

> [!NOTE]
>
> **Empfehlung**: Für Produktions-Webanwendungen sollten Sie das **JavaScript SDK** nutzen, um das beste Nutzungserlebnis und die volle programmatische Kontrolle zu erhalten. Nutzen Sie das **InContext-Iframe** für die schnellste Einrichtung, die **Weiterleitung**, wenn eine geräteübergreifende Verifizierung erforderlich ist, und die dedizierten **WordPress- / Shopify- / Salesforce**-Integrationen, wenn Sie auf diesen Plattformen arbeiten.

***

## JavaScript SDK

Das Didit JavaScript SDK bietet eine programmatische Möglichkeit, die Verifizierung mit voller Kontrolle über das Benutzererlebnis zu integrieren.

**Hauptfunktionen:**

* Sitzungsverwaltung und Event-Callbacks
* Unterstützung für React, Vue, Angular, NextJS, Nuxt, Svelte und Vanilla JS
* Vollständige TypeScript-Unterstützung
* Modal- und Inline-Modi

**Schnellstart:**

```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'
});
```

→ [**Vollständige Dokumentation zum JavaScript SDK**](https://docs.didit.me/de/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

Binden Sie den Verifizierungs-Workflow über einen Iframe direkt in Ihre Anwendung ein. Ein nahtloses Erlebnis, ohne dass Benutzer Ihre Website verlassen müssen.

**Hauptfunktionen:**

* UniLink (kein Backend erforderlich) – Einrichtung in \< 1 Minute
* API-Sitzung (mit Backend) – vollständige Anpassung
* Modal- und Inline-Implementierungen
* React-Komponentenbeispiele

**Schnellstart:**

```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>
```

→ [**Vollständige InContext-Dokumentation**](https://docs.didit.me/de/integration/web-sdks/incontext-iframe.md)

***

## Weiterleitung

Leiten Sie Benutzer auf die von Didit gehostete Verifizierungsseite weiter. Nach Abschluss kehren die Benutzer zu Ihrer Callback-URL zurück.

**Hauptfunktionen:**

* Maximale Browser-Kompatibilität
* Unterstützung für geräteübergreifende Verifizierung
* Einfache Integration
* Funktioniert auch dann, wenn der Kamerazugriff im Iframe problematisch ist

**Schnellstart:**

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

→ [**Vollständige Weiterleitungs-Dokumentation**](https://docs.didit.me/de/integration/web-sdks/web-redirect.md)

***

## Vergleich

| Funktion | JavaScript SDK | InContext (Iframe) | Weiterleitung |
| - | - | - | - |
| Setup-Zeit | 3 Min. | \< 1 Min. | 5 Min. |
| Backend erforderlich | Optional | Optional | Ja |
| Bleibt auf Ihrer Domain | Ja | Ja | Nein |
| Geräteübergreifende Unterstützung | Ja | Ja | Ja |
| Volle programmatische Kontrolle | Ja | Eingeschränkt | Nur Callback |
| Event-Callbacks | Echtzeit | `postMessage` | Nur Callback |
| White-Label | Ja | Ja | Ja |
| Browser-Kompatibilität | Alle | Alle | Alle |

> [!NOTE]
>
> Alle drei Methoden liefern die endgültigen, signierten Ergebnisse über [Webhooks](https://docs.didit.me/de/integration/webhooks.md) – der obige Vergleich beschreibt das Nutzungserlebnis im Browser, nicht den Empfang der Verifizierungsentscheidung.

***

## Konfiguration

### Erforderliche Iframe-Berechtigungen

Geben Sie bei InContext-Iframe-Integrationen immer die folgenden Berechtigungen an:

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

***

## Beispiel-Repositories

> [card] [SDK-Web-Beispiele](https://github.com/didit-protocol/sdk-web-examples)
>
> Beispiele für React, Vue, Angular, Next.js, Nuxt, Svelte und Vanilla JS

> [card] [Iframe-Beispiel](https://github.com/didit-protocol/iframe-example)
>
> Iframe-Beispiele für UniLink und API-Sitzungen

> [card] [Vollständige Next.js-Demo](https://github.com/didit-protocol/didit-full-demo)
>
> Durchgängige Next.js-Integration

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

## Verwandte Themen

* [Webhooks](https://docs.didit.me/de/integration/webhooks.md) – signierte Verifizierungsergebnisse auf Ihrem Backend empfangen
* [API zum Erstellen einer Sitzung](https://docs.didit.me/de/sessions-api/create-session.md) – der Endpoint, der jedem Web-SDK zugrunde liegt
* [Native SDKs](https://docs.didit.me/de/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.