Ionic-Capture

Öffnen Sie die Erfassung aus einer Ionic-App mit einem lokalen Capacitor-Plugin.

Markdown

Ihr Backend erstellt den Prozess in Human Plugin mit einem Journey-Flow und einer callbackUri, die das URL-Schema Ihrer App verwendet. Ein lokales Capacitor-Plugin öffnet den link aus der Antwort in Custom Tabs unter Android und in ASWebAuthenticationSession unter iOS. Wenn die Erfassung endet, wird das Plugin aufgelöst und die App übernimmt.

Behalten Sie die Human-Plugin-id aus der Create-Antwort. Ihr Backend liest damit das Ergebnis.

Voraussetzungen

• Ionic mit Capacitor 4 oder höher
• Xcode 14 oder höher sowie Android Studio
• Ein für Ihre App eindeutiges URL-Schema, etwa myapp

1. Den Prozess mit Ihrem Schema erstellen

Ihr Backend sendet das Schema als callbackUri:

{
  "flow": "humantoken",
  "clientId": "client-a",
  "correlationId": "order-1001",
  "credential": { "type": "DUI_TYPE_NG_BVN", "value": "<document number>" },
  "callbackUri": "myapp://callback"
}

und gibt id und link an die App zurück.

2. Die Plugin-Schnittstelle definieren

// src/plugins/capture-plugin.ts
import { registerPlugin } from '@capacitor/core';

export interface CapturePlugin {
  openSession(options: { url: string }): Promise<{ callbackUrl: string }>;
}

const Capture = registerPlugin<CapturePlugin>('CapturePlugin');
export default Capture;

3. Das iOS-Plugin implementieren

import Capacitor
import AuthenticationServices

@objc(CapturePlugin)
public class CapturePlugin: CAPPlugin, ASWebAuthenticationPresentationContextProviding {
    private var session: ASWebAuthenticationSession?

    @objc func openSession(_ call: CAPPluginCall) {
        guard let urlString = call.getString("url"),
              let url = URL(string: urlString) else {
            call.reject("Invalid URL")
            return
        }

        DispatchQueue.main.async {
            let newSession = ASWebAuthenticationSession(
                url: url,
                callbackURLScheme: "myapp"
            ) { callbackURL, error in
                self.session = nil
                if let callbackURL = callbackURL {
                    call.resolve(["callbackUrl": callbackURL.absoluteString])
                } else {
                    call.reject(error?.localizedDescription ?? "Session cancelled")
                }
            }
            newSession.presentationContextProvider = self
            newSession.prefersEphemeralWebBrowserSession = true
            newSession.start()
            self.session = newSession
        }
    }

    public func presentationAnchor(for session: ASWebAuthenticationSession) -> ASPresentationAnchor {
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
              let window = windowScene.windows.first else {
            return ASPresentationAnchor()
        }
        return window
    }
}

4. Das Android-Plugin implementieren

import android.content.Intent
import android.net.Uri
import androidx.browser.customtabs.CustomTabsIntent
import com.getcapacitor.JSObject
import com.getcapacitor.Plugin
import com.getcapacitor.PluginCall
import com.getcapacitor.PluginMethod
import com.getcapacitor.annotation.CapacitorPlugin

@CapacitorPlugin(name = "CapturePlugin")
class CapturePlugin : Plugin() {

    private var pendingCall: PluginCall? = null

    @PluginMethod
    fun openSession(call: PluginCall) {
        val url = call.getString("url") ?: return call.reject("Missing URL")
        pendingCall = call

        activity.runOnUiThread {
            CustomTabsIntent.Builder().build()
                .launchUrl(activity, Uri.parse(url))
        }
    }

    override fun handleOnNewIntent(intent: Intent) {
        super.handleOnNewIntent(intent)
        intent.data?.let { uri ->
            if (uri.scheme == "myapp") {
                pendingCall?.resolve(JSObject().put("callbackUrl", uri.toString()))
                pendingCall = null
            }
        }
    }
}

5. Ihr Schema registrieren

iOS

In Info.plist:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

Android

In AndroidManifest.xml, innerhalb Ihrer Haupt-<activity>:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="callback" />
</intent-filter>

In build.gradle:

implementation("androidx.browser:browser:1.5.0")

6. Die Erfassung starten

Ein Angular-Service rund um das Plugin:

import { Injectable } from '@angular/core';
import Capture from '../plugins/capture-plugin';

@Injectable({ providedIn: 'root' })
export class CaptureService {
  /** Wird mit true aufgelöst, wenn die Erfassung beendet wurde, und mit false, wenn die Person sie geschlossen hat. */
  async open(link: string): Promise<boolean> {
    try {
      await Capture.openSession({ url: link });
      return true;
    } catch {
      return false;
    }
  }
}

const ended = await this.captureService.open(link);
if (ended) {
  // Die Erfassung ist beendet. Bitten Sie Ihr Backend, das Ergebnis
  // mit GET /v1/processes/{id} über die Human-Plugin-id zu lesen.
}

Zusammenfassung

Datei	Zweck
capture-plugin.ts	Capacitor-Plugin-Schnittstelle
CapturePlugin.swift	iOS: ASWebAuthenticationSession
CapturePlugin.kt	Android: Custom Tabs
Info.plist	iOS-URL-Schema
AndroidManifest.xml	Android-Intent-Filter
capture.service.ts	Angular-Service