Capacitor SDK Integration
This guide provides instructions on how to integrate the Capacitor plugin into your Ionic app with Angular. The plugin includes the following features: initialize
, checkMNOEligibility
, showConsentManager
, acceptConsent
, rejectConsent
, isConsentAccepted
, fetchIdConnectData
, idConnectData
, handleDataClear
and addListener
.
Prerequisites
Before you start, ensure you have the following:
Node.js and npm installed
Ionic CLI installed
Capacitor CLI installed
An existing Ionic project with Angular
Installation
To install the plugin, run the following command in your project directory:
npm install utiq-tech@latest
npx cap sync
To install a specific version, visit https://github.com/Utiq-tech/Capacitor-JS-SDK/tags and replace “latest"
with the desired version number.
Integration Steps
Initialize
To use the plugin, you need to initialize it in your app. Add the following code in your app.component.ts
or a suitable service file.
import { Component } from '@angular/core';
import { UTIQ } from 'utiq-tech';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {
this.initialize();
}
async initialize() {
const config = { sdkToken: 'SDK_TOKEN', configParams: JSON.stringify(environment.utiq), sdkOptions: { enableLogging: true } };
await UTIQ.initialize(config);
}
Check MNO Eligibility
To check the eligibility, use the checkMNOEligibility
method:
UTIQ.checkMNOEligibility({ stubToken: STUB_TOKEN });
Show Consent Manager( web only )
To show the consent manager on web, use the showConsentManager
method:
UTIQ.showConsentManager();
Accept Consent
To accept user consent, use the acceptConsent
method:
UTIQ.acceptConsent();
Reject Consent
To reject user consent, use the rejectConsent
method:
UTIQ.rejectConsent();
Is Consent Accepted
To check the user consent, use the isConsentAccepted
method:
const { status: isConsentAccepted } = await UTIQ.isConsentAccepted();
Fetch IDConnect Data
To start the service and get the IDConnect data, use the fetchIdConnectData
method:
await UTIQ.fetchIdConnectData({ stubToken: STUB_TOKEN });
IDConnect Data
Get the IDConnect data previously fetched , use the idConnectData
method:
const { adTechPass, marTechPass } = await UTIQ.idConnectData();
Handle Data Clear
Remove all the data generated or used by UTIQ, use the handleDataClear
method:
UTIQ.handleDataClear();
AddListener
To interact with Utiq events, you need to add the listeners for the Utiq events, use the addListener
method:
UTIQ.addListener('onIdsAvailable', ({ adTechPass, marTechPass }) => {
console.log(`onIdsAvailable -> mtid: ` + marTechPass + ` , atid: ` + adTechPass);
});
iOS Specific Notes
Permissions: Ensure you have added the necessary permissions in your
Info.plist
file.Build Configuration: Make sure to run
npx cap sync ios
after installing the plugin to update the native iOS project.Additional Setup: Some plugins might require additional setup in Xcode. Refer to the plugin documentation for more details.
Android Specific Notes
Permissions: Ensure you have added the necessary permissions in your
AndroidManifest.xml
file.Build Configuration: Make sure to run
npx cap sync android
after installing the plugin to update the native Android project.Proguard Rules: If you are using Proguard, you might need to add specific rules for the plugin. Refer to the plugin documentation for more details.