Vue

1
<script setup>
2
import { onMounted, ref } from 'vue'
3
import OneSdk from '@frankieone/one-sdk'
4
5
// Configuration references
6
const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID
7
const CUSTOMER_CHILD_ID = import.meta.env.VITE_CUSTOMER_CHILD_ID
8
const API_KEY = import.meta.env.VITE_API_KEY
9
10
const session = ref(null)
11
const tokenResult = ref(null)
12
13
onMounted(async () => {
14
// Initialize session
15
const tokenResult = await initializeSession()
16
17
// Configure OneSDK
18
const oneSdk = await setupOneSdk(tokenResult)
19
20
// Setup individual verification
21
const individual = setupIndividual(oneSdk)
22
23
// Initialize IDV flow
24
setupIDVFlow(oneSdk)
25
})
26
27
// Session initialization
28
async function initializeSession() {
29
const response = await fetch("https://backend.latest.frankiefinancial.io/auth/v2/machine-session", {
30
method: "POST",
31
headers: {
32
"authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
33
"Content-Type": "application/json"
34
},
35
body: JSON.stringify({
36
permissions: {
37
"preset": "one-sdk",
38
"reference": `demo-${new Date().toISOString()}`
39
}
40
})
41
})
42
return await response.json()
43
}
44
45
// OneSDK configuration
46
async function setupOneSdk(tokenResult) {
47
const sdk = await OneSdk({
48
session: tokenResult.session,
49
mode: "development",
50
recipe: {
51
form: {
52
provider: {
53
name: 'react',
54
googleApiKey: 'YOUR_GOOGLE_API_KEY'
55
},
56
}
57
}
58
})
59
60
sdk.on('\*', console.log)
61
return sdk
62
}
63
64
// Individual verification setup
65
function setupIndividual(sdk) {
66
const individual = sdk.individual()
67
individual.addConsent("general")
68
individual.addConsent("docs")
69
individual.addConsent("creditheader")
70
return individual.submit()
71
}
72
73
// IDV flow setup
74
function setupIDVFlow(sdk) {
75
const idv = sdk.flow("idv")
76
const components = {
77
loading1: sdk.component("form", {
78
name: "LOADING",
79
title: { label: "Loading..." },
80
descriptions: [{ label: "" }]
81
}),
82
loading2: sdk.component("form", {
83
name: "LOADING",
84
title: { label: "Processing results..." },
85
descriptions: [{
86
label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page."
87
}]
88
}),
89
review: sdk.component("form", {
90
name: "REVIEW",
91
type: "ocr"
92
})
93
}
94
95
setupIDVEventHandlers(idv, components)
96
idv.mount("#e2e-idv-container")
97
}
98
99
// Event handlers setup
100
function setupIDVEventHandlers(idv, components) {
101
let isInitialLoading = true
102
103
idv.on("loading", (display) => handleLoading(display, components, isInitialLoading))
104
idv.on("results", (data) => handleResults(data, components))
105
idv.on("error", handleError)
106
idv.on("detection_complete", handleDetectionComplete)
107
108
components.review.on("form:review:ready", handleReviewReady)
109
}
110
111
</script>
112
113
<template>
114
  <div class="onesdk-container">
115
    <div id="e2e-idv-container" class="idv-container"></div>
116
    <div id="e2e-idv-loading1"></div>
117
    <div id="e2e-idv-loading2"></div>
118
  </div>
119
</template>
120
121
<style scoped>
122
.onesdk-container {
123
  width: 100%;
124
  height: 85vh;
125
}
126
127
.idv-container {
128
  width: 100%;
129
  height: 100%;
130
}
131
</style>