Pengambilan di Ionic

Buka pengambilan dari aplikasi Ionic dengan plugin Capacitor lokal.

Markdown

Back-end Anda membuat proses di Human Plugin dengan alur Journey dan callbackUri yang menggunakan URL scheme aplikasi Anda. Plugin Capacitor lokal membuka link dari respons di Custom Tabs pada Android dan di ASWebAuthenticationSession pada iOS. Saat pengambilan berakhir, plugin menyelesaikan (resolve) dan aplikasi mengambil alih.

Simpan id Human Plugin dari respons pembuatan. Back-end Anda membaca hasilnya dengannya.

Prasyarat

• Ionic dengan Capacitor 4 atau lebih baru
• Xcode 14 atau lebih baru, dan Android Studio
• URL scheme yang unik untuk aplikasi Anda, seperti myapp

1. Buat proses dengan scheme Anda

Back-end Anda mengirim scheme sebagai callbackUri:

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

dan mengembalikan id serta link ke aplikasi.

2. Definisikan antarmuka 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. Implementasikan plugin 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. Implementasikan plugin 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. Daftarkan scheme Anda

iOS

Di Info.plist:

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

Android

Di AndroidManifest.xml, di dalam <activity> utama Anda:

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

Di build.gradle:

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

6. Mulai pengambilan

Service Angular yang membungkus plugin:

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

@Injectable({ providedIn: 'root' })
export class CaptureService {
  /** Menghasilkan true saat pengambilan berakhir, false saat orang tersebut menutupnya. */
  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) {
  // Pengambilan berakhir. Minta back-end Anda membaca hasilnya
  // dengan GET /v1/processes/{id}, menggunakan id Human Plugin.
}

Ringkasan

File	Tujuan
capture-plugin.ts	Antarmuka plugin Capacitor
CapturePlugin.swift	iOS: ASWebAuthenticationSession
CapturePlugin.kt	Android: Custom Tabs
Info.plist	URL scheme iOS
AndroidManifest.xml	Intent filter Android
capture.service.ts	Service Angular