metamap-capacitor-plugin 3.2.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -88
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,45 +1,56 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "Capacitor"
|
|
3
|
-
excerpt: "Add the
|
|
4
|
-
slug: "
|
|
5
|
-
category:
|
|
3
|
+
excerpt: "Add the Metamap button to your Capacitor app."
|
|
4
|
+
slug: "mobile-sdks"
|
|
5
|
+
category: 61141a8437375100442f3d20
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
#
|
|
8
|
+
# Metamap for Capacitor Usage Guide
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
This is a guide to implement Metamap in the [Ionic Capacitor framework](https://capacitorjs.com/docs).
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
npm i metamap-capacitor-plugin
|
|
15
|
-
```
|
|
12
|
+
## Capacitor Demo App
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npx cap sync
|
|
24
|
-
```
|
|
14
|
+
You can go to GitHub to download the [Metamap Capacitor demo app](https://github.com/GetMati/mati-mobile-examples/tree/main/capacitorDemoApp).
|
|
15
|
+
|
|
16
|
+
## Install Metamap for Capacitor
|
|
17
|
+
|
|
18
|
+
The following instructions use command line tools to install Metamap for Capacitor to your existing Capacitor application.
|
|
25
19
|
|
|
26
|
-
|
|
20
|
+
1. Use the following CLI to install Metamap for your Capacitor project.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm i @aposnovmati/mati-capacitor-plugin
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
1. Build your application.
|
|
27
|
+
```bash
|
|
28
|
+
ionic build
|
|
29
|
+
```
|
|
30
|
+
1. Update the Capacitor files.
|
|
31
|
+
```bash
|
|
32
|
+
npx cap sync
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Add the Metamap Button
|
|
36
|
+
|
|
37
|
+
Add the Metamap button to your application's HTML and JavaScript files.
|
|
27
38
|
|
|
28
39
|
`your_index.html`
|
|
29
40
|
|
|
30
41
|
```html
|
|
31
|
-
<ion-content>
|
|
32
|
-
<ion-button className="
|
|
42
|
+
<ion-content>
|
|
43
|
+
<ion-button className="matiButtonCss" (click)="showMatiFlow()">Show MatiFlow
|
|
33
44
|
</ion-button>
|
|
34
|
-
</ion-content>
|
|
45
|
+
</ion-content>
|
|
35
46
|
```
|
|
36
47
|
|
|
37
|
-
`your_index.ts`
|
|
48
|
+
`your_index.ts`
|
|
38
49
|
|
|
39
|
-
```
|
|
50
|
+
```typescript
|
|
40
51
|
import { Component } from '@angular/core';
|
|
41
52
|
|
|
42
|
-
import {
|
|
53
|
+
import { MatiCapacitor } from "@aposnovmati/mati-capacitor-plugin";
|
|
43
54
|
|
|
44
55
|
@Component({
|
|
45
56
|
selector: 'app-home',
|
|
@@ -49,84 +60,36 @@ import { MetaMapCapacitor } from "metamap-capacitor-plugin";
|
|
|
49
60
|
export class HomePage {
|
|
50
61
|
constructor() {}
|
|
51
62
|
|
|
52
|
-
|
|
63
|
+
showMatiFlow() {
|
|
53
64
|
let metadataParams = { param1: "value1" };
|
|
54
|
-
let registerParams = { clientId: "
|
|
65
|
+
let registerParams = { clientId: "5c94e3c401ddc6001be83c07", flowId: "5e962a23728ddc001b5937aa", metadata: metadataParams};
|
|
55
66
|
|
|
56
|
-
|
|
67
|
+
MatiCapacitor.showMatiFlow(registerParams)
|
|
57
68
|
.then( verification => console.log("verification success:" + verification.verificationId))
|
|
58
69
|
.catch(() => console.log("verification cancelled"))
|
|
59
70
|
}
|
|
60
71
|
}
|
|
72
|
+
|
|
61
73
|
```
|
|
62
74
|
|
|
63
75
|
## Launch for Android
|
|
64
76
|
|
|
65
|
-
|
|
77
|
+
Run the following command to launch the application for Android:
|
|
66
78
|
```bash
|
|
67
79
|
ionic capacitor run android
|
|
68
80
|
```
|
|
69
81
|
|
|
70
82
|
# Launch for iOS
|
|
83
|
+
To launch the application for iOS, you need to do the following:
|
|
71
84
|
|
|
72
85
|
1. Set minimum iOS version in `capacitor.config.json`
|
|
73
|
-
|
|
74
|
-
"ios": {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
```bash
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<key>NSMicrophoneUsageDescription</key>
|
|
85
|
-
<string>MetaMap verification SDK requires microphone use</string>
|
|
86
|
-
|
|
87
|
-
<key>NSPhotoLibraryUsageDescription</key>
|
|
88
|
-
<string>MetaMap verification SDK requires access to media library</string>
|
|
89
|
-
|
|
90
|
-
<key>NSLocationWhenInUseUsageDescription</key>
|
|
91
|
-
<string>MetaMap will use your location information to provide best possible verification experience.</string>
|
|
92
|
-
|
|
93
|
-
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
|
|
94
|
-
<string>MetaMap will use your location information to provide best possible verification experience.</string>
|
|
95
|
-
|
|
96
|
-
<key>NSLocationAlwaysUsageDescription</key>
|
|
97
|
-
<string>MetaMap will use your location information to provide best possible verification experience.</string>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
3. Launch the application for iOS
|
|
101
|
-
```bash
|
|
102
|
-
ionic capacitor run ios
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
3. Launch the application for android
|
|
106
|
-
```bash
|
|
107
|
-
ionic capacitor run android
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
4. ## Metadata is an additional optional parameters:
|
|
111
|
-
|
|
112
|
-
4.1. Set the Language:
|
|
113
|
-
|
|
114
|
-
```bash
|
|
115
|
-
metadata: {"fixedLanguage": "es"}
|
|
116
|
-
```
|
|
117
|
-
4.2. Set the Button Color:
|
|
118
|
-
|
|
119
|
-
```bash
|
|
120
|
-
metadata: {"buttonColor": "hexColor"}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
4.3. Set the Title color of the button:
|
|
124
|
-
|
|
125
|
-
```bash
|
|
126
|
-
metadata: {"buttonTextColor": "hexColor"}
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
4.4. Set identity Id as parameter for re-verification:
|
|
130
|
-
```bash
|
|
131
|
-
metadata: {"identityId": "value"}
|
|
132
|
-
```
|
|
86
|
+
```json
|
|
87
|
+
"ios": {
|
|
88
|
+
"minVersion": "11.4"
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
1. Launch the application for iOS
|
|
93
|
+
```bash
|
|
94
|
+
ionic capacitor run ios
|
|
95
|
+
```
|