Ionic

Integrasikan Human Token Journey ke dalam aplikasi Ionic Anda menggunakan plugin Capacitor.

Markdown

Integrasi ini menggunakan plugin Capacitor lokal yang mendelegasikan ke Custom Tabs di Android dan ASWebAuthenticationSession di iOS. Saat perjalanan selesai, deep link kembali melalui @capacitor/app.

Prasyarat

• Ionic dengan Capacitor v4+
• @capacitor/app terinstal
• Xcode 14+ dan Android Studio
• Skema URL unik untuk aplikasi Anda (misalnya myapp)

Langkah 1: Tentukan skema URL Anda

Pilih skema unik (misalnya myapp). Ini digunakan sebagai callbackUri saat membuat proses:

callbackUri: myapp://callback

Langkah 2: Buat antarmuka plugin Capacitor

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

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

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

Langkah 3: Implementasikan plugin 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
    }
}

Langkah 4: Implementasikan plugin 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
            }
        }
    }
}

Langkah 5: Konfigurasi skema URL

iOS

Tambahkan ke Info.plist:

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

Android

Tambahkan ke AndroidManifest.xml di dalam <activity> utama Anda:

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

Tambahkan ke build.gradle:

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

Langkah 6: Buat service 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;
    }
  }
}

Langkah 7: Dengarkan deep link

Di AppComponent Anda:

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

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

Ringkasan file

File	Tujuan
unico-plugin.ts	Antarmuka plugin Capacitor
UnicoPlugin.swift	iOS — ASWebAuthenticationSession
UnicoPlugin.kt	Android — Custom Tabs
Info.plist	Skema URL iOS
AndroidManifest.xml	Intent filter Android
unico.service.ts	Wrapper service Angular