Iframe-Identitätsverifizierung: Eingebettetes Web-KYC

Binden Sie den Didit-Verifizierungsablauf mit einem iframe direkt in Ihre Anwendung ein. So erhalten Ihre Nutzer ein nahtloses Erlebnis, ohne dass sie Ihre Website verlassen müssen.

Übersicht

Funktion	UniLink (ohne Backend)	API-Sitzung (mit Backend)
Einrichtungszeit	< 1 Minute	5-10 Minuten
Backend erforderlich	❌ Nein	✅ Ja
Eigenes `vendor_data`	❌ Nein	✅ Ja
Eigenes `metadata`	❌ Nein	✅ Ja
Callback pro Sitzung	❌ Nein	✅ Ja
Sitzungsverfolgung	❌ Nein	✅ Ja

UniLink-Iframe (kein Backend erforderlich)

Der schnellste Einstieg: Kopieren Sie einfach Ihre UniLink-URL und fügen Sie sie ein.

Was Sie benötigen

Ein Didit-Workflow (erstellt in der Didit Console)
Ihre UniLink-URL (klicken Sie im Workflow auf Copy Link)

Implementierung

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

⚠️ Erforderlich: Das Attribut allow ist für den Kamerazugriff bei der Liveness-Erkennung zwingend erforderlich.

Wichtige Vorteile

Weniger als 1 Minute Einrichtung: Kein Backend, keine API-Schlüssel
Keine Konfiguration nötig: Die Callback-URL wird in den Workflow-Einstellungen festgelegt
Ideal für MVPs: Sofort loslegen

API-Sitzungs-iframe (mit Backend)

Für fortgeschrittene Integrationen, die eine Anpassung pro Sitzung benötigen.

Wann verwenden

Übergeben Sie pro Sitzung eigene vendor_data oder metadata
Legen Sie pro Sitzung unterschiedliche Callback-URLs fest
Verfolgen Sie Sitzungen serverseitig, bevor die Verifizierung beginnt
Ordnen Sie Sitzungen Ihren Benutzer-IDs zu

Implementierung

Schritt 1: Sitzung erstellen (Backend) Die Antwort beim Erstellen der Sitzung enthält ein Feld namens url. Verwenden Sie diesen Wert als src des iframes.

// Node.js / Express
app.post('/api/create-verification', async (req, res) => {
  const { userId } = req.body;

  const response = await fetch('https://verification.didit.me/v3/session/', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.DIDIT_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      workflow_id: process.env.DIDIT_WORKFLOW_ID,
      vendor_data: userId,
      callback: 'https://yourapp.com/verification-callback',
      metadata: { source: 'web-app', timestamp: Date.now() },
    }),
  });

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data,
  //                    metadata, status, workflow_id, workflow_version, callback }
  const session = await response.json();
  res.json({ sessionId: session.session_id, verificationUrl: session.url });
});

Schritt 2: Im iframe einbetten (Frontend)

<iframe 
  id="didit-verification"
  src="" <!-- Set dynamically from API response -->
  style="width: 100%; height: 650px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>

<script>
  async function startVerification() {
    const response = await fetch('/api/create-verification', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: 'user-123' })
    });
    
    const { verificationUrl } = await response.json();
    document.getElementById('didit-verification').src = verificationUrl;
  }
</script>

Auf Ereignisse lauschen (postMessage)

Die Verifizierungsseite sendet Ereignisse an das übergeordnete Fenster. Jede Nachricht hat diese Struktur:

{
  type: 'didit:<event>',   // e.g. 'didit:completed'
  data: { /* payload */ }, // event-specific; may be undefined
  timestamp: 1718000000000 // ms epoch
}

Der Payload ist verschachtelt: Lesen Sie event.data.data.sessionId, nicht event.data.sessionId:

window.addEventListener('message', (event) => {
  // Use your white-label domain here if you have one configured
  if (event.origin !== 'https://verify.didit.me') return;

  const { type, data } = event.data || {};

  if (type === 'didit:ready') {
    console.log('Session ID:', data.sessionId); // available as soon as the page loads
  }
  if (type === 'didit:completed') {
    console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review"
    // UI hint only — the canonical decision arrives on your backend via webhook
  }
});

Wichtige Ereignisse: didit:ready ({ sessionId }), didit:started, didit:step_started / didit:step_completed / didit:step_changed ({ step, ... }), didit:status_updated ({ status }), didit:completed ({ sessionId, status }), didit:cancelled, didit:error ({ error, step? }), didit:close_request sowie didit:layout ({ contentHeight, colorScheme, dir }, siehe unten). Die Referenz der Ereignisse im JavaScript-SDK listet die Verifizierungsereignisse auf, die als typisierte Callbacks verfügbar sind. Ab Version 0.5.0 verarbeitet das SDK Layout-Nachrichten intern, anstatt sie an onEvent weiterzugeben.

Iframe-Größe anhand von `didit:layout` festlegen

Die Verifizierungsseite teilt Ihnen mit einer didit:layout-Nachricht mit, wie viel Platz sie benötigt. Sie sendet eine Nachricht beim Laden und eine weitere, sobald sich Inhaltshöhe, Design oder Textrichtung ändern:

{
  type: 'didit:layout',
  data: {
    contentHeight: 612,    // CSS px
    colorScheme: 'light',  // 'light' | 'dark'
    dir: 'ltr'             // 'ltr' | 'rtl'
  },
  timestamp: 1718000000000
}

Feld	Typ	Beschreibung
`contentHeight`	`number`	Die natürliche Höhe des Seiteninhalts in CSS-Pixeln, einschließlich der oberen Leiste
`colorScheme`	`'light' \| 'dark'`	Das Design, in dem die Seite angezeigt wird. Bei White-Label-Farben entscheidet Ihre Hintergrundfarbe darüber und nicht die Geräteeinstellung
`dir`	`'ltr' \| 'rtl'`	Die Textrichtung der Sprache der Seite

Um didit:layout in Ihrem eigenen iframe zu empfangen, fügen Sie sdk_presentation=embedded zur Verifizierungs-URL hinzu. Ab Version 0.5.0 legt das JavaScript-SDK die Präsentationsart für Sie fest. Ohne Präsentationsparameter verwendet die Seite ihr Standalone-Layout und sendet keine Layout-Nachrichten.

Dieser Host folgt den empfohlenen Größen: eine feste Karte ab 1024px Breite, Vollbild bei 540px und darunter, und dazwischen ein iframe mit 500px Breite, das die von der Seite gemeldete Höhe einnimmt:

<iframe
  id="didit-verification"
  class="didit-iframe"
  title="Didit verification"
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>

<style>
  /* 541px to 1023px wide: 500px wide and as tall as the content */
  .didit-iframe {
    display: block;
    width: 500px;
    max-width: 100%;
    height: var(--didit-content-height, 700px); /* 700px until the first didit:layout */
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0 auto;
    border: none;
    border-radius: 16px;
  }

  /* 1024px and wider: the computer card */
  @media (min-width: 1024px) {
    .didit-iframe {
      width: 960px;
      max-width: 90vw;
      height: 660px;
    }
  }

  /* 540px and below: full screen */
  @media (max-width: 540px) {
    .didit-iframe {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      border-radius: 0;
    }
  }
</style>

<script>
  const DIDIT_ORIGIN = 'https://verify.didit.me'; // or your white-label domain
  const iframe = document.getElementById('didit-verification');

  // verificationUrl: the session `url` from your backend, or your UniLink
  const src = new URL(verificationUrl);
  src.searchParams.set('sdk_presentation', 'embedded');
  window.addEventListener('message', (event) => {
    if (event.origin !== DIDIT_ORIGIN || event.source !== iframe.contentWindow) return;
    const { type, data } = event.data || {};
    if (type !== 'didit:layout') return;
    const height = data?.contentHeight;
    if (typeof height !== 'number' || !Number.isFinite(height) || height <= 0) return;

    // Only the 541px to 1023px size reads it; the other two sizes are fixed
    iframe.style.setProperty('--didit-content-height', `${height}px`);
  });
  iframe.src = src.toString();
</script>

Zwischen 541px und 1023px verwendet dieses Beispiel eine Starthöhe von 700px, bis eine Layout-Nachricht eintrifft, begrenzt auf 90% der sichtbaren Fensterhöhe. Die Größen für Desktop und Mobilgeräte gelten sofort. Auf Mobilgeräten deckt das Iframe das Fenster ab, daher sollten Sie in Ihrer Anwendung eine Möglichkeit bereitstellen, die Verifizierung zu verlassen. Verwenden Sie colorScheme und dir, um Steuerelemente, die Sie um das iframe herum platzieren, an das Design und die Textrichtung der Seite anzupassen. Wenn die Verbindung des Benutzers abbricht, zeigt die Seite einen Bildschirm „Keine Internetverbindung“, der sich von selbst schließt, sobald die Verbindung wieder besteht. Wählt der Benutzer dort Exit Verification, sendet die Seite didit:error mit error: "network_error" und danach didit:cancelled. Schließen Sie das iframe bei didit:cancelled.

Für ein ausgereiftes Modal-Erlebnis, das sich über Ihre Seite legt:

HTML/CSS/JS

<!DOCTYPE html>
<html>
<head>
  <style>
    .didit-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9999;
      backdrop-filter: blur(4px);
    }
    
    .didit-modal-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 480px;
      height: 85vh;
      max-height: 750px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .didit-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 10;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .didit-modal-close:hover {
      background: rgba(0, 0, 0, 0.2);
    }
    
    .didit-iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <button onclick="openVerification()">Verify Identity</button>

  <div id="didit-modal" class="didit-modal-overlay">
    <div class="didit-modal-container">
      <button class="didit-modal-close" onclick="closeVerification()">✕</button>
      <iframe 
        id="didit-iframe"
        class="didit-iframe"
        allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
      ></iframe>
    </div>
  </div>

  <script>
    const UNILINK_URL = 'https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64';
    
    function openVerification() {
      document.getElementById('didit-iframe').src = UNILINK_URL;
      document.getElementById('didit-modal').style.display = 'block';
      document.body.style.overflow = 'hidden';
    }
    
    function closeVerification() {
      document.getElementById('didit-iframe').src = '';
      document.getElementById('didit-modal').style.display = 'none';
      document.body.style.overflow = '';
    }
    
    // Close on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') closeVerification();
    });
    
    // Close on overlay click
    document.getElementById('didit-modal').addEventListener('click', (e) => {
      if (e.target.id === 'didit-modal') closeVerification();
    });
  </script>
</body>
</html>

React-Komponente

Eine wiederverwendbare React-Komponente für die Verifizierung im Modal:

import { useState, useEffect } from 'react';

interface DiditInContextProps {
  /**
   * Either the `url` returned by POST /v3/session/ (API session)
   * or your UniLink URL copied from the Console (Workflows → Copy Link).
   * Don't derive the UniLink yourself — the path segment is a 22-character
   * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId).
   */
  verificationUrl: string;
  isOpen: boolean;
  onClose: () => void;
  onComplete?: (sessionId: string, status: string) => void;
}

export function DiditInContext({ 
  verificationUrl, 
  isOpen, 
  onClose,
  onComplete 
}: DiditInContextProps) {
  const [iframeSrc, setIframeSrc] = useState<string>('');

  useEffect(() => {
    if (isOpen) {
      setIframeSrc(verificationUrl);
      document.body.style.overflow = 'hidden';
    } else {
      setIframeSrc('');
      document.body.style.overflow = '';
    }
  }, [isOpen, verificationUrl]);

  // Listen for postMessage from iframe
  // Messages look like: { type: 'didit:<event>', data: {...}, timestamp }
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // Use your white-label domain here if you have one configured
      if (event.origin !== 'https://verify.didit.me') return;

      if (event.data?.type === 'didit:completed' && onComplete) {
        onComplete(event.data.data?.sessionId, event.data.data?.status);
        onClose();
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [onComplete, onClose]);

  // Handle escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) onClose();
    };
    
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center"
      onClick={(e) => e.target === e.currentTarget && onClose()}
    >
      <div className="relative w-[90%] max-w-[480px] h-[85vh] max-h-[750px] bg-white rounded-2xl overflow-hidden shadow-2xl">
        <button 
          onClick={onClose}
          className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full bg-black/10 hover:bg-black/20 flex items-center justify-center"
          aria-label="Close"
        >
          ✕
        </button>
        <iframe 
          src={iframeSrc}
          className="w-full h-full border-0"
          allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
          title="Didit Verification"
        />
      </div>
    </div>
  );
}

Verwendung

import { useState } from 'react';
import { DiditInContext } from './DiditInContext';

function App() {
  const [isVerificationOpen, setIsVerificationOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsVerificationOpen(true)}>
        Verify Identity
      </button>
      
      <DiditInContext
        verificationUrl="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64" // UniLink from Console, or the API session `url`
        isOpen={isVerificationOpen}
        onClose={() => setIsVerificationOpen(false)}
        onComplete={(sessionId, status) => {
          console.log(`Verification ${status}: ${sessionId}`);
          if (status === 'Approved') {
            // Navigate to success page
          }
        }}
      />
    </>
  );
}

Vue-Komponente

<template>
  <Teleport to="body">
    <div 
      v-if="isOpen"
      class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center"
      @click.self="$emit('close')"
    >
      <div class="relative w-[90%] max-w-[480px] h-[85vh] max-h-[750px] bg-white rounded-2xl overflow-hidden shadow-2xl">
        <button 
          @click="$emit('close')"
          class="absolute top-3 right-3 z-10 w-8 h-8 rounded-full bg-black/10 hover:bg-black/20 flex items-center justify-center"
        >
          ✕
        </button>
        <iframe 
          :src="iframeSrc"
          class="w-full h-full border-0"
          allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
        />
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps<{
  isOpen: boolean;
  // The `url` from POST /v3/session/, or your UniLink URL copied from the
  // Console (Workflows → Copy Link). Don't derive the UniLink with btoa() —
  // its path segment is base64url of the workflow UUID's raw bytes.
  verificationUrl: string;
}>();

const emit = defineEmits<{
  close: [];
  complete: [sessionId: string, status: string];
}>();

const iframeSrc = computed(() => (props.isOpen ? props.verificationUrl : ''));

// Handle escape key
const handleEscape = (e: KeyboardEvent) => {
  if (e.key === 'Escape' && props.isOpen) emit('close');
};

// Handle postMessage — messages look like { type: 'didit:<event>', data: {...}, timestamp }
const handleMessage = (event: MessageEvent) => {
  // Use your white-label domain here if you have one configured
  if (event.origin !== 'https://verify.didit.me') return;
  if (event.data?.type === 'didit:completed') {
    emit('complete', event.data.data?.sessionId, event.data.data?.status);
  }
};

onMounted(() => {
  document.addEventListener('keydown', handleEscape);
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleEscape);
  window.removeEventListener('message', handleMessage);
});

// Lock body scroll when open
watch(() => props.isOpen, (isOpen) => {
  document.body.style.overflow = isOpen ? 'hidden' : '';
});
</script>

Konfiguration

Erforderliche Berechtigungen

Verwenden Sie diese vollständige Berechtigungsliste für Aufnahmen, Standortzugriff, Kopiervorgänge und Medienkompatibilität:

allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"

Berechtigung	Verwendung und Verhalten ohne diese Berechtigung
`camera`	Dokumentenscan und Gesichtsaufnahme. Ohne sie kann die Kamera nicht starten, und der Benutzer sieht Hinweise zum Kamerazugriff
`microphone`	Optionaler Ton während der Videoaufnahme von Dokument und Gesicht. Ohne sie läuft die Aufnahme ohne Ton weiter
`geolocation`	Der Standortschritt liest die Position des Geräts aus. Ohne sie sieht der Benutzer Standortzugriff ist deaktiviert, auch wenn er den Standort im Browser erlaubt hat
`clipboard-write`	Kopieren der Sitzungsreferenz oder des Verifizierungslinks, auch auf dem Bildschirm des In-App-Browsers. Ohne sie kann die Kopierfunktion fehlschlagen, und der Benutzer muss den sichtbaren Text oder die Browser-Adresse manuell kopieren
`fullscreen`	Ermöglicht den Mediensteuerelementen, den Vollbildmodus anzufordern. Ohne sie bleiben diese Steuerelemente innerhalb des Iframes
`autoplay`	Ermöglicht, dass Anleitungsvideos und Kamera-Vorschauen automatisch abgespielt werden, abhängig von den Browserregeln. Ohne sie kann die Wiedergabe auf eine Aktion des Benutzers warten
`encrypted-media`	Wird aus Gründen der Kompatibilität mit geschützten Medien beibehalten. Die aktuellen Aufnahmeschritte benötigen sie nicht; ohne sie würde die Wiedergabe geschützter Medien blockiert
`digital-credentials-get`	Teilen eines digitalen Ausweises aus einer Wallet, etwa Google Wallet, über die Digital Credentials API des Browsers. Ohne sie verweigert der Browser die Wallet-Anfrage innerhalb Ihres Iframes, sodass der Benutzer dort keinen Ausweis aus der Wallet teilen kann

Das allow-Attribut delegiert Berechtigungen; es überschreibt weder die Entscheidung des Benutzers noch einen strengeren Permissions-Policy-Header auf Ihrer Host-Seite.

Iframe-Größe

Der Verifizierungsablauf passt sein Layout an die Größe seines Iframes an. Dimensionieren Sie den Iframe für das Fenster, in dem er angezeigt wird:

Fensterbreite	Empfohlene Iframe-Größe
1024px und breiter (Computer)	960px mal 660px, höchstens 90% der Breite und Höhe des Fensters. Behalten Sie diese Größe in jedem Schritt bei
541px bis 1023px	500px breit und so hoch wie der Inhalt: Übernehmen Sie die Höhe aus dem `contentHeight` der `didit:layout`-Nachricht, höchstens 90% der Fensterhöhe
540px und darunter (Smartphone)	Vollbild: die volle Breite und die volle sichtbare Höhe des Fensters, ohne abgerundete Ecken

Für den mittleren Bereich beginnen Sie mit 500px mal 700px, bis die erste didit:layout-Nachricht eintrifft, mit derselben Höhenbegrenzung. Das Beispiel zu didit:layout wendet alle drei Größen an, einschließlich der Größen für Computer und Smartphone, bevor eine Nachricht eintrifft.

Content Security Policy (CSP)

Wenn Sie CSP verwenden, fügen Sie Didit Ihrer frame-src-Direktive hinzu:

Content-Security-Policy: frame-src https://verify.didit.me;

Geräteübergreifende Verifizierung

Das InContext-Iframe unterstützt geräteübergreifende Verifizierung automatisch:

Der Benutzer startet die Verifizierung am Desktop
Ist die Kamera nicht verfügbar, wird ein QR-Code angezeigt
Der Benutzer scannt den QR-Code mit dem Smartphone
Der Benutzer schließt die Verifizierung auf dem Smartphone ab
Das Desktop-Iframe aktualisiert sich automatisch mit dem Ergebnis

Dies geschieht automatisch, ohne zusätzliche Konfiguration.

Fehlerbehebung

Kamera funktioniert nicht

Stellen Sie sicher, dass das Iframe die vollständige Berechtigungsliste enthält
Prüfen Sie, ob Ihre Website über HTTPS ausgeliefert wird
Vergewissern Sie sich, dass der Benutzer Kameraberechtigungen für Ihre Domain erteilt hat
Versuchen Sie die Redirect-Methode, wenn der Kamerazugriff im Iframe fehlschlägt

Iframe wird nicht geladen

Prüfen Sie auf Probleme mit der Content Security Policy (CSP)
Fügen Sie https://verify.didit.me Ihrer frame-src-Direktive hinzu
Prüfen Sie die Browser-Konsole auf Fehler

postMessage wird nicht empfangen

Prüfen Sie, ob Sie auf den richtigen Origin hören (https://verify.didit.me oder Ihre White-Label-Domain)
Prüfen Sie, ob der Event-Listener hinzugefügt wird, bevor Sie das Iframe öffnen
Prüfen Sie Ereignisname und Struktur: Typen haben das Präfix (didit:completed, nicht verification_complete), und die Payload ist unter event.data.data verschachtelt

Beispiel-Repository

GitHub-Repository

Quellcode und Beispiele auf GitHub ansehen

Leitfäden

Authentifizierung

Model Context Protocol (MCP)

Web-SDKs

Native SDKs

Server-SDKs

Integrationen

Iframe-Identitätsverifizierung: Eingebettetes Web-KYC

Übersicht

UniLink-Iframe (kein Backend erforderlich)

Was Sie benötigen

Implementierung

Wichtige Vorteile

API-Sitzungs-iframe (mit Backend)

Wann verwenden

Implementierung

Auf Ereignisse lauschen (postMessage)

Iframe-Größe anhand von `didit:layout` festlegen

HTML/CSS/JS

React-Komponente

Verwendung

Vue-Komponente

Konfiguration

Erforderliche Berechtigungen

Iframe-Größe

Content Security Policy (CSP)

Geräteübergreifende Verifizierung

Fehlerbehebung

Kamera funktioniert nicht

Iframe wird nicht geladen

postMessage wird nicht empfangen

Beispiel-Repository

GitHub-Repository

​Übersicht

​UniLink-Iframe (kein Backend erforderlich)

​Was Sie benötigen

​Implementierung

​Wichtige Vorteile

​API-Sitzungs-iframe (mit Backend)

​Wann verwenden

​Implementierung

​Auf Ereignisse lauschen (postMessage)

​Iframe-Größe anhand von didit:layout festlegen

​Modal-Implementierung

​HTML/CSS/JS

​React-Komponente

​Verwendung

​Vue-Komponente

​Konfiguration

​Erforderliche Berechtigungen

​Iframe-Größe

​Content Security Policy (CSP)

​Geräteübergreifende Verifizierung

​Fehlerbehebung

​Kamera funktioniert nicht

​Iframe wird nicht geladen

​postMessage wird nicht empfangen

​Beispiel-Repository

GitHub-Repository

Übersicht

UniLink-Iframe (kein Backend erforderlich)

Was Sie benötigen

Implementierung

Wichtige Vorteile

API-Sitzungs-iframe (mit Backend)

Wann verwenden

Implementierung

Auf Ereignisse lauschen (postMessage)

Iframe-Größe anhand von `didit:layout` festlegen

Modal-Implementierung

HTML/CSS/JS

React-Komponente

Verwendung

Vue-Komponente

Konfiguration

Erforderliche Berechtigungen

Iframe-Größe

Content Security Policy (CSP)

Geräteübergreifende Verifizierung

Fehlerbehebung

Kamera funktioniert nicht

Iframe wird nicht geladen

postMessage wird nicht empfangen

Beispiel-Repository