---
title: Ionic
description: Capacitor प्लगइन का उपयोग करके अपने Ionic ऐप में Human Token Journey को एकीकृत करें — Android पर Custom Tabs और iOS पर ASWebAuthenticationSession।
canonical: https://developer.unico.io/hi/human-token/integrations/app/ionic
locale: hi
generated_by: markdown-export
---

- [/hi/](/hi/)
- [इंटीग्रेशन](/hi/human-token/integrations)
- ऐप
- Ionic

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

एकीकरण एक स्थानीय 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 Capacitorimport 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.Intentimport android.net.Uriimport androidx.browser.customtabs.CustomTabsIntentimport com.getcapacitor.Pluginimport com.getcapacitor.PluginCallimport com.getcapacitor.PluginMethodimport 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 स्कीम कॉन्फ़िगर करें​

iOSAndroid`Info.plist` में जोड़ें:```
<key>CFBundleURLTypes</key><array>    <dict>        <key>CFBundleURLSchemes</key>        <array>            <string>myapp</string>        </array>    </dict></array>
```

अपनी मुख्य `<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 सर्विस रैपरअंतिम अपडेट 21 अक्टू॰ 2026** को