Ionic

Capacitor प्लगइन का उपयोग करके अपने Ionic ऐप में Human Token Journey को एकीकृत करें।

Markdown

एकीकरण एक स्थानीय Capacitor प्लगइन का उपयोग करता है जो Android पर Custom Tabs और iOS पर ASWebAuthenticationSession को डेलीगेट करता है। जब यात्रा पूरी होती है, तो डीप लिंक @capacitor/app के माध्यम से वापस आता है।

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

• Ionic Capacitor v4+ के साथ
• @capacitor/app इंस्टॉल किया हुआ
• Xcode 14+ और Android Studio
• आपके ऐप के लिए एक अद्वितीय URL स्कीम (जैसे myapp)

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

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

callbackUri: myapp://callback

चरण 2: Capacitor प्लगइन इंटरफेस बनाएँ

import { registerPlugin } from '@capacitor/core';

export interface UnicoPlugin {
  openSession(options: { url: string }): Promise<{ callbackUrl: string }>;
}

const Unico = registerPlugin<UnicoPlugin>('UnicoPlugin');
export default Unico;

चरण 3: iOS प्लगइन लागू करें

import Capacitor
import AuthenticationServices

@objc(UnicoPlugin)
public class UnicoPlugin: 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.Plugin
import com.getcapacitor.PluginCall
import com.getcapacitor.PluginMethod
import com.getcapacitor.annotation.CapacitorPlugin

@CapacitorPlugin(name = "UnicoPlugin")
class UnicoPlugin : 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(com.getcapacitor.JSObject().put("callbackUrl", uri.toString()))
                pendingCall = null
            }
        }
    }
}

चरण 5: URL स्कीम कॉन्फ़िगर करें

iOS

Info.plist में जोड़ें:

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

Android

अपनी मुख्य <activity> के अंदर AndroidManifest.xml में जोड़ें:

<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 Unico from '../plugins/unico-plugin';

@Injectable({ providedIn: 'root' })
export class UnicoService {
  async openSession(url: string): Promise<string | null> {
    try {
      const result = await Unico.openSession({ url });
      const params = new URL(result.callbackUrl).searchParams;
      return params.get('id');
    } catch {
      return null;
    }
  }
}

चरण 7: डीप लिंक सुनें

अपने AppComponent में:

import { App } from '@capacitor/app';

App.addListener('appUrlOpen', (event) => {
  // Handle the callback URL if needed
  console.log('Deep link received:', event.url);
});

फ़ाइल सारांश

फ़ाइल	उद्देश्य
unico-plugin.ts	Capacitor प्लगइन इंटरफेस
UnicoPlugin.swift	iOS — ASWebAuthenticationSession
UnicoPlugin.kt	Android — Custom Tabs
Info.plist	iOS URL स्कीम
AndroidManifest.xml	Android Intent फ़िल्टर
unico.service.ts	Angular सर्विस रैपर