React Native

एक नेटिव मॉड्यूल के माध्यम से अपने React Native ऐप में Human Token Journey को एकीकृत करें।

Markdown

एकीकरण एक नेटिव मॉड्यूल का उपयोग करता है जो iOS पर ASWebAuthenticationSession और Android पर Custom Tabs को डेलीगेट करता है। जब यात्रा पूरी होती है, तो नेटिव मॉड्यूल कॉलबैक URL के साथ प्रॉमिस को रिज़ॉल्व करता है।

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

• React Native 0.71 या बाद का
• iOS के लिए Xcode 14+
• Android के लिए Android Studio
• आपके ऐप के लिए एक अद्वितीय URL स्कीम (जैसे myapp)

चरण 1: अपना URL स्कीम परिभाषित करें

एक अद्वितीय स्कीम चुनें (जैसे myapp)। प्रोसेस बनाते समय इसे callbackUri के रूप में उपयोग किया जाता है:

callbackUri: myapp://callback

चरण 2: TypeScript ब्रिज बनाएँ

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

const { UnicoModule } = NativeModules;

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

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

चरण 3: iOS नेटिव मॉड्यूल लागू करें

Objective-C bridge

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

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

Swift implementation

// ios/UnicoModule.swift
import AuthenticationServices

@objc(UnicoModule)
class UnicoModule: 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 नेटिव मॉड्यूल लागू करें

android/app/build.gradle में डिपेंडेंसी जोड़ें:

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

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

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

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

    private var pendingPromise: Promise? = null

    override fun getName() = "UnicoModule"

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

// UnicoPackage.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 UnicoPackage : ReactPackage {
    override fun createNativeModules(ctx: ReactApplicationContext): List<NativeModule> =
        listOf(UnicoModule(ctx))
    override fun createViewManagers(ctx: ReactApplicationContext): List<ViewManager<*, *>> =
        emptyList()
}

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

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

MainActivity.kt में रीडायरेक्ट हैंडल करें:

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

चरण 5: 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 { Unico } from './modules/UnicoModule';

const resultUrl = await Unico.openSession(processLink);
// resultUrl = myapp://callback?id=...

फ़ाइल सारांश

फ़ाइल	उद्देश्य
src/modules/UnicoModule.ts	TypeScript ब्रिज
ios/UnicoModule.m	Objective-C डिक्लेरेशन
ios/UnicoModule.swift	iOS — ASWebAuthenticationSession
android/.../UnicoModule.kt	Android — Custom Tabs
android/.../UnicoPackage.kt	पैकेज रजिस्ट्रेशन
android/.../MainApplication.kt	पैकेज एकीकरण
android/.../MainActivity.kt	रीडायरेक्ट URL हैंडलिंग
AndroidManifest.xml	Intent फ़िल्टर