الالتقاط على Ionic

افتح الالتقاط من تطبيق Ionic باستخدام إضافة Capacitor محلية.

Markdown

تنشئ الواجهة الخلفية لديك العملية في Human Plugin بتدفق Journey وcallbackUri يستخدم مخطط URL الخاص بتطبيقك. تفتح إضافة Capacitor محلية الرابط link من الاستجابة في Custom Tabs على Android وفي ASWebAuthenticationSession على iOS. عند انتهاء الالتقاط، تُنهي الإضافة الوعد ويستأنف التطبيق عمله.

احتفظ بـ id الخاص بـ Human Plugin من استجابة الإنشاء. ستقرأ الواجهة الخلفية لديك النتيجة به.

المتطلبات الأساسية

• Ionic مع Capacitor 4 أو أحدث
• Xcode 14 أو أحدث، وAndroid Studio
• مخطط URL فريد لتطبيقك، مثل myapp

1. أنشئ العملية بمخططك

ترسل الواجهة الخلفية لديك المخطط بوصفه callbackUri:

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

وتعيد id وlink إلى التطبيق.

2. عرّف واجهة الإضافة

// 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. نفّذ إضافة iOS

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. نفّذ إضافة Android

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. سجّل مخططك

iOS

في Info.plist:

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

Android

في AndroidManifest.xml، داخل <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>

في build.gradle:

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

6. ابدأ الالتقاط

خدمة Angular تحيط بالإضافة:

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

@Injectable({ providedIn: 'root' })
export class CaptureService {
  /** يُنهي الوعد بالقيمة true عند انتهاء الالتقاط، وfalse عند إغلاق الشخص له. */
  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) {
  // انتهى الالتقاط. اطلب من الواجهة الخلفية لديك قراءة النتيجة
  // عبر GET /v1/processes/{id}، باستخدام id الخاص بـ Human Plugin.
}

الملخص

الملف	الغرض
capture-plugin.ts	واجهة إضافة Capacitor
CapturePlugin.swift	iOS: ASWebAuthenticationSession
CapturePlugin.kt	Android: Custom Tabs
Info.plist	مخطط URL على iOS
AndroidManifest.xml	مرشّح intent على Android
capture.service.ts	خدمة Angular