Integration with Ionic

v3.0

The SDK can be integrated into Ionic projects.

Start the SDK

The automatic interceptor is not supported in Ionic, so any request from the JavaScript code has to be handled manually. Here is an example:

do {
    let policy = PXPolicy()
    policy.urlRequestInterceptionType = .none
    try PerimeterX.start(appId: "<APP_ID>", delegate: self, policy: policy)
}
catch {
    print("error: \(error)")
}

Setup a plugin

Configure the plugin in JavaScript. Here is an example:

export interface PerimeterxPlugin {
  getHttpHeaders(): Promise<{ value: string }>;
  handleResponse():Promise<{ value: string }>;
}

const PerimeterX = registerPlugin<PerimeterxPlugin>('PerimeterX');

Setup a plugin in order to handle calls from the JavaScript code. Here is an example:

HUMANManager.swift:

import Foundation
import Capacitor
import PerimeterX_SDK

@objc(PerimeterxManagerPlugin)
class PerimeterxManagerPlugin: CAPPlugin {
    
    static let shared = PerimeterxManagerPlugin()
    
    func start() {
        do {
            let policy = PXPolicy()
            policy.urlRequestInterceptionType = .none
            policy.doctorCheckEnabled = false
            try PerimeterX.start(appId: "PXj9y4Q8Em", delegate: nil, policy: policy)
        }
        catch {
            print("error: \(error)")
        }
    }
    
    @objc func getHttpHeaders(_ call: CAPPluginCall) {
        call.resolve(PerimeterX.headersForURLRequest()!)
    }
    
    @objc func handleResponse(_ call: CAPPluginCall) {
        let response = call.getString("value") ?? ""
        let data = response.data(using: .utf8)
        let httpURLResponse = HTTPURLResponse(url: URL(string: "https://fake.url.com")!, statusCode: 403, httpVersion: nil, headerFields: nil)
        let handled = PerimeterX.handleResponse(response: httpURLResponse!, data: data!) { challengeResult in
            call.resolve(["value": challengeResult == .solved ? "solved" : "cancelled"])
        }
        if !handled {
            call.resolve(["value": "false"])
        }
    }
}

HUMANManagerPlugin.m:

#import <Foundation/Foundation.h>
#import <Capacitor/Capacitor.h>

CAP_PLUGIN(PerimeterxManagerPlugin, "PerimeterX",
    CAP_PLUGIN_METHOD(getHttpHeaders, CAPPluginReturnPromise);
    CAP_PLUGIN_METHOD(handleResponse, CAPPluginReturnPromise);
)

Pass the SDK's HTTP headers to the JavaScript code and handle the response

In your JavaScript code, call those functions for every URL request to add those HTTP headers and handle the response. Here is an example:

const sendUrlRequest = async () => {
  const result = await PerimeterX.getHttpHeaders()
  const json = JSON.parse(JSON.stringify(result))
  const map = new Map(Object.entries(json))
  console.log(map)

  var xhr = new XMLHttpRequest()
  xhr.addEventListener('load', async () => {
    const challengeResult = await PerimeterX.handleResponse({ value: xhr.responseText })
    console.log("result = ", JSON.parse(JSON.stringify(challengeResult)))
  })
  xhr.open('GET', 'https://sample-ios.pxchk.net/login')
  for (const [key, value] of map) {
    xhr.setRequestHeader(key, value as string)
  }
  xhr.send()
};