---
title: Ionic
description: قم بدمج رحلة Human Token في تطبيق Ionic الخاص بك باستخدام إضافة Capacitor — Custom Tabs على Android و ASWebAuthenticationSession على iOS.
canonical: https://developer.unico.io/ar/human-token/integrations/app/ionic
locale: ar
generated_by: markdown-export
---

- [/ar/](/ar/)
- [التكاملات](/ar/human-token/integrations)
- التطبيق
- Ionic

**في هذه الصفحةIonicقم بدمج رحلة Human Token في تطبيق Ionic الخاص بك باستخدام إضافة Capacitor.

يستخدم التكامل إضافة Capacitor محلية تفوض إلى Custom Tabs على Android و `ASWebAuthenticationSession` على iOS. عند انتهاء الرحلة، يعود الرابط العميق عبر `@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>
```

أضف إلى `AndroidManifest.xml` داخل `<activity>` الرئيسي:```
<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`مخطط URL لـ iOS`AndroidManifest.xml`مرشح Intent لـ Android`unico.service.ts`غلاف خدمة Angularآخر تحديث في 21 أكتوبر 2026**