React Native कैप्चर

native module के साथ React Native ऐप से कैप्चर खोलें।

Markdown

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

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

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

• React Native 0.71 या बाद का
• iOS के लिए Xcode 14 या बाद का
• Android के लिए 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. TypeScript ब्रिज बनाएं

// src/modules/CaptureModule.ts
import { NativeModules } from 'react-native';

const { CaptureModule } = NativeModules;

if (!CaptureModule) {
  throw new Error('CaptureModule not found. Make sure the native module is linked correctly.');
}

export const Capture = {
  openSession: (url: string): Promise<string> => CaptureModule.openSession(url),
};

3. iOS module इम्प्लीमेंट करें

Objective-C ब्रिज

// ios/CaptureModule.m
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(CaptureModule, NSObject)
RCT_EXTERN_METHOD(openSession:(NSString *)url
                  resolve:(RCTPromiseResolveBlock)resolve
                  reject:(RCTPromiseRejectBlock)reject)
@end

Swift इम्प्लीमेंटेशन

// ios/CaptureModule.swift
import AuthenticationServices

@objc(CaptureModule)
class CaptureModule: NSObject, ASWebAuthenticationPresentationContextProviding {

    private var session: ASWebAuthenticationSession?

    @objc func openSession(_ url: String,
                           resolve: @escaping RCTPromiseResolveBlock,
                           reject: @escaping RCTPromiseRejectBlock) {
        guard let sessionURL = URL(string: url) else {
            reject("INVALID_URL", "Invalid URL", nil)
            return
        }
        DispatchQueue.main.async {
            let newSession = ASWebAuthenticationSession(
                url: sessionURL,
                callbackURLScheme: "myapp"
            ) { callbackURL, error in
                self.session = nil
                if let callbackURL = callbackURL {
                    resolve(callbackURL.absoluteString)
                } else {
                    reject("SESSION_ERROR", error?.localizedDescription ?? "Session cancelled", error)
                }
            }
            newSession.presentationContextProvider = self
            newSession.prefersEphemeralWebBrowserSession = true
            newSession.start()
            self.session = newSession
        }
    }

    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
    }

    @objc static func requiresMainQueueSetup() -> Bool { return true }
}

4. Android module इम्प्लीमेंट करें

android/app/build.gradle में dependency जोड़ें:

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

// android/app/src/main/java/<your.package>/CaptureModule.kt
package com.yourapp

import android.net.Uri
import androidx.browser.customtabs.CustomTabsIntent
import com.facebook.react.bridge.*

class CaptureModule(private val reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    private var pendingPromise: Promise? = null

    override fun getName() = "CaptureModule"

    @ReactMethod
    fun openSession(url: String, promise: Promise) {
        pendingPromise = promise
        currentActivity?.runOnUiThread {
            CustomTabsIntent.Builder().build()
                .launchUrl(currentActivity!!, Uri.parse(url))
        } ?: promise.reject("NO_ACTIVITY", "No current activity")
    }

    fun handleRedirectUrl(uri: Uri) {
        if (uri.scheme == "myapp") {
            pendingPromise?.resolve(uri.toString())
            pendingPromise = null
        }
    }
}

// CapturePackage.kt
package com.yourapp

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class CapturePackage : ReactPackage {
    override fun createNativeModules(ctx: ReactApplicationContext): List<NativeModule> =
        listOf(CaptureModule(ctx))
    override fun createViewManagers(ctx: ReactApplicationContext): List<ViewManager<*, *>> =
        emptyList()
}

इसे MainApplication.kt में रजिस्टर करें:

override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        add(CapturePackage())
    }

वापसी को MainActivity.kt में संभालें:

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    intent.data?.let { uri ->
        if (uri.scheme == "myapp") {
            val module = reactInstanceManager
                .currentReactContext
                ?.getNativeModule(CaptureModule::class.java)
            module?.handleRedirectUrl(uri)
        }
    }
}

5. Android पर अपनी scheme रजिस्टर करें

AndroidManifest.xml में:

<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-permission android:name="android.permission.CAMERA" />

<activity android:name=".MainActivity" ...>
    <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>
</activity>

6. कैप्चर शुरू करें

import { Capture } from './modules/CaptureModule';

try {
  await Capture.openSession(link);
  // The capture ended. Ask your back-end to read the outcome
  // with GET /v1/processes/{id}, using the Human Plugin id.
} catch {
  // The person closed the session.
}

सारांश

फ़ाइल	उद्देश्य
src/modules/CaptureModule.ts	TypeScript ब्रिज
ios/CaptureModule.m	Objective-C डिक्लेरेशन
ios/CaptureModule.swift	iOS: ASWebAuthenticationSession
android/.../CaptureModule.kt	Android: Custom Tabs
android/.../CapturePackage.kt	Package रजिस्ट्रेशन
android/.../MainApplication.kt	Package जोड़ता है
android/.../MainActivity.kt	वापसी को संभालता है
AndroidManifest.xml	Intent filter