Ionic कैप्चर

लोकल Capacitor plugin के साथ Ionic ऐप से कैप्चर खोलें।

Markdown

आपका बैक-एंड Human Plugin में Journey flow और ऐसे callbackUri के साथ process बनाता है जो आपके ऐप की URL scheme का उपयोग करता है। एक लोकल Capacitor plugin जवाब के link को Android पर Custom Tabs में और iOS पर ASWebAuthenticationSession में खोलता है। कैप्चर समाप्त होने पर plugin resolve होता है और ऐप आगे का काम संभाल लेता है।

create के जवाब से Human Plugin का id रखें। आपका बैक-एंड उसी से नतीजा पढ़ता है।

पूर्वापेक्षाएं

• Capacitor 4 या बाद के साथ Ionic
• Xcode 14 या बाद का, और Android Studio
• आपके ऐप की अपनी यूनीक URL scheme, जैसे myapp

1. अपनी scheme के साथ process बनाएं

आपका बैक-एंड scheme को callbackUri के रूप में भेजता है:

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

और id तथा link ऐप को लौटाता है।

2. plugin इंटरफ़ेस परिभाषित करें

// 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 plugin इम्प्लीमेंट करें

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 plugin इम्प्लीमेंट करें

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. अपनी scheme रजिस्टर करें

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. कैप्चर शुरू करें

plugin के चारों ओर एक Angular सर्विस:

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

@Injectable({ providedIn: 'root' })
export class CaptureService {
  /** Resolves true when the capture ended, false when the person closed it. */
  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) {
  // The capture ended. Ask your back-end to read the outcome
  // with GET /v1/processes/{id}, using the Human Plugin id.
}

सारांश

फ़ाइल	उद्देश्य
capture-plugin.ts	Capacitor plugin इंटरफ़ेस
CapturePlugin.swift	iOS: ASWebAuthenticationSession
CapturePlugin.kt	Android: Custom Tabs
Info.plist	iOS URL scheme
AndroidManifest.xml	Android intent filter
capture.service.ts	Angular सर्विस