Zum Hauptinhalt springen

Schnellstart

Gesichtsverifikation in unter 5 Minuten in Ihre Anwendung integrieren.

1
Zugangsdaten holen
API-Schlüssel aus Ihrem Dashboard
2
Token generieren
Serverseitiger API-Aufruf
3
FaceGuard einbetten
SDK oder iframe einbinden

1. Zugangsdaten holen​

Nachdem Surt Ihnen Login-Zugangsdaten bereitgestellt hat:

  • Ein API-Schlüssel wird für Ihre Organisation erstellt
  • Erstellen Sie einen Workflow in Ihrem Dashboard, um eine workflow_id zu erhalten

Ihr API-Schlüssel kommt in den Authorization-Header jeder Backend-Anfrage. Geben Sie ihn niemals in clientseitigem Code preis. Siehe Authentifizierung für Details.

2. Portal-Token generieren​

Rufen Sie die Surt-API von Ihrem Backend aus auf, um einen Portal-Token zu erstellen:

cURL
curl --location 'https://api.surt.com/faceguard/session/portal' \
--header 'Authorization: Bearer YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "workflow_id": "YOUR_WORKFLOW_ID",
    "customer": {
        "customer_id": "your_user_id",
        "email": "user@example.com",
        "first_name": "John",
        "last_name": "Doe"
    }
}'

Die Antwort enthält einen JWT-Portal-Token. Übergeben Sie diesen Token an Ihr Frontend.

Ablauf des Portal-Tokens

Portal-Tokens laufen nach 30 Minuten ab. Generieren Sie für jeden Verifizierungsversuch einen neuen Token.

3. FaceGuard einbetten​

Option A: NPM-Paket (empfohlen)​

npm install @surtai/faceguard
TypeScript
import { FaceGuard } from '@surtai/faceguard';

const result = await FaceGuard.verify({ token: 'YOUR_PORTAL_TOKEN' });

if (result.status === 'approved') {
  // Zugriff gewähren
} else if (result.status === 'rejected') {
  // Zugriff verweigern oder mit neuem Token erneut versuchen
}

Das SDK erkennt das Gerät automatisch: Vollbild-Kamera auf Mobilgeräten, QR-Code-Modal auf dem Desktop.

Option B: iframe​

HTML
<div style="position: fixed; inset: 0; z-index: 9999; background: #0D141A;">
  <iframe
    src="https://faceguard.surt.com/intro?token=YOUR_PORTAL_TOKEN"
    allow="camera"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Option C: React Native WebView​

React Native
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';

<SafeAreaView style={{ flex: 1, backgroundColor: '#0D141A' }}>
  <WebView
    source={{ uri: `https://faceguard.surt.com/intro?token=${token}` }}
    onMessage={(event) => {
      const data = JSON.parse(event.nativeEvent.data);
      if (data.action === 'close') {
        console.log('Ergebnis:', data.reason, data.confidence);
      }
    }}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback={true}
    mediaCapturePermissionGrantType="grant"
    style={{ flex: 1 }}
  />
</SafeAreaView>

4. Ergebnis verarbeiten​

SDK-Callbacks​

TypeScript
const fg = FaceGuard.init({
  token: 'YOUR_PORTAL_TOKEN',
  onSuccess: (result) => console.log('Genehmigt', result.confidence),
  onFailed: (result) => console.log('Abgelehnt', result.confidence),
  onCancel: () => console.log('Nutzer hat abgebrochen'),
  onError: (error) => console.log('Fehler', error.message),
});

postMessage-Events (iframe / WebView)​

JavaScript
window.addEventListener('message', (e) => {
  if (e.data?.action === 'close') {
    switch (e.data.reason) {
      case 'approved':   // Gesicht verifiziert - confidence: 0-100
      case 'rejected':   // Gesicht stimmte nicht überein - confidence: 0-100
      case 'canceled':   // Nutzer hat FaceGuard geschlossen
      case 'error':      // Etwas ist schiefgelaufen - Fehlermeldung
    }
  }
});
tipp

Verwenden Sie den Sandbox-Modus während der Entwicklung. Kontaktieren Sie Surt, um Sandbox-Zugangsdaten zu erhalten.

Nächste Schritte​