MetaMap for Ionic Cordova Usage Guide

This is a usage guide to implement MetaMap for Ionic for Cordova framework for the following platforms:

• Cordova
• Ionic
• Android
• iOS

Note This usage guide is for Cordova version 6.x+ with a recommendation of Cordova version 10.

Cordova Demo App

You can go to GitHub to download the MetaMap Cordova demo app or the Mati Ionic Cordova demo app.

Cordova

Install MetaMap for Cordova

In a terminal, install MetaMap for Cordova:

cordova plugin add https://github.com/GetMati/mati-cordova-plugin.git

Upgrade MetaMap for Cordova

To upgrade to the latest version of MetaMap for Cordova, you will need first uninstall your current version:

cordova plugin remove mati-global-id-sdk-cordova-plugin

Then install the latest MetaMap version:

cordova plugin add https://github.com/GetMati/mati-cordova-plugin.git

Add MetaMap to Your Cordova App

You will need to update your HTML and JavaScript files to add the MetaMap button to your Cordova application:

• HTML
• JavaScript

HTML

Add the MetaMap button to your HTML file:

HTML Example for Cordova

 <input
     class="metaMapButton"
     id="metaMapButton"
     type="button"
     value="show MetaMap Flow"
     />

JavaScript

Add the MetaMap button in your JavaScript file index.js:

JavaScript Example for Cordova

function onDeviceReady() {

//trigger login on button click
var metaMapButton = document.getElementById("metaMapButton");

  metaMapButton.onclick = () => {
      //set 3 params clientId (cant be null), flowId, metadata
      var yourMetadata = { param1: "value1", param2: "value2" }
      var metaMapButtinParams = { clientId: "YOUR_CLIENT_ID", flowId: "YOUR_FLOW_ID", metadata: yourMetadata }
      cordova.plugins.MetaMapGlobalIDSDK.showMetaMapFlow(metaMapButtinParams)
    };

    //register to callback
    cordova.plugins.MetaMapGlobalIDSDK.setMetaMapCallback(
     identityId => {
       console.log("setMetaMapCallback success: " + identityId);
     },
     error => {
       console.log("setMetaMapCallback error: " + error);
     }
    );

}

Ionic Cordova

Install MetaMap for Ionic Cordova

In a terminal, install MetaMap for Ionic Cordova:

ionic cordova plugin add  https://github.com/GetMati/mati-cordova-plugin.git

Upgrade MetaMap for Ionic Cordova

To upgrade to the latest version of MetaMap for Cordova, you will need first uninstall your current version:

ionic cordova plugin remove Mati-global-id-sdk-cordova-plugin

Then install the latest MetaMap version:

ionic cordova plugin add  https://github.com/GetMati/mati-cordova-plugin.git

Add MetaMap to Your Ionic Cordova App

You will need to update your HTML and TypeScript files to add the MetaMap button to your Cordova application:

• HTML
• Type Script

HTML

HTML Example for Ionic Cordova

 <input
    class="metaMapButton"
    id="metaMapButton"
    type="button"
    value="show MetaMap Flow"
    ion-item (click)="showMetaMapFlow()"/>

TypeScript

TypeScript Example for Ionic Cordova: home.page.ts

import { Component } from '@angular/core';

//global instance of cordova
declare var cordova: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  ionViewDidEnter() {
    //register to callback
    cordova.plugins.MetaMapGlobalIDSDK.setMetaMapCallback(
      identityId => {
        console.log("setMetaMapCallback success: " + identityId);
      },
      error => {
        console.log("setMetaMapCallback error: " + error);
      }
    );  
  }

  showMetaMapFlow() {
   //set 3 params clientId (cant be null), flowId, metadata
   var yourMetadata = { param1: "value1", param2: "value2" }
    var metaMapParams = { clientId: "YOUR_CLIENT_ID", flowId: "YOUR_FLOW_ID", metadata: yourMetadata }
    cordova.plugins.MetaMapGlobalIDSDK.showMetaMapFlow(metaMapParams);
  }

}

Android

Download the latest version of MetaMap for Android here.

1. Check that your project's Gradle file (<YourProject>/platforms/android/mati-global-id-sdk-cordova-plugin/<demoCordovaMati-build>.gradle) uses the latest version of Mati for Cordova:

   dependencies {
     implementation 'com.getmati:mati-sdk:<LATEST_VERSION>'
   }
   

2. Enable AndroidX support in config.xml.

   <platform name="android">
       <preference name="AndroidXEnabled" value="true" />
   </platform>
   

iOS

The following instructions are for iOS version 12.0 or higher.

1. The latest version of MetaMap for iOS: https://cocoapods.org/pods/MetaMap-Global-ID-SDK.
   You can also check your podfile for version information. For example:

   platform :ios, '12.0'
   target 'demoCordovaMetaMap' do
       pod 'MetaMap-Global-ID-SDK'
   end
   

2. In the iOS directory find the podfile and install:
   pod install

3. In the info.plist file, add the following permissions to capture video, access the photo gallery, and capture audio for voiceliveness:
   Info.plist

   <key>NSCameraUsageDescription</key>
   <string>MetaMap needs access to your Camera</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>MetaMap needs access to your media library</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>MetaMap needs access to your Microphone</string>