Vue
Here’s how to create a Vue starter project and integrate OneSDK package modules. This will give you a solid foundation to build with OneSDK and Vue.
1. Create a new project:
Using WebPack bundler
npm install -g @vue/cli
vue create <project-name>
Using Vite bundler
npm create vue@latest
Add OneSDK package
npm install @frankieone/one-sdk
2. Initialize OneSDK, open file ./src/App.vue
:
./src/App.vue
: <script setup>
const CUSTOMER_ID = process.env.CUSTOMER_ID2;
const CUSTOMER_CHILD_ID = process.env.CUSTOMER_CHILD_ID2;
const API_KEY = process.env.API_KEY2;
onMounted(async () => {
const tokenResultRaw = await fetch("https://backend.latest.frankiefinancial.io/auth/v2/machine-session", {
method: "POST",
headers: {
"authorization": "machine " + btoa(`${ CUSTOMER_ID }:${ CUSTOMER_CHILD_ID }:${ API_KEY }`),
"Content-Type": "application/json"
},
body: JSON.stringify({
permissions: {
"preset": "one-sdk",
"reference": `demo-${ new Date().toISOString() }`
}
})
});
tokenResult.value = await tokenResultRaw.json();
const oneSdk = await OneSDK({
session: session.value,
mode: "development",
recipe: {
form: {
provider: {
name: 'react',
googleApiKey: 'AIzaSyC42YgNcCSadoy8dxDKKEXZohJU9B5eM2M'
},
}
}
});
oneSdk.on('*', console.log);
const oneSdkIndividual = oneSdk.individual();
oneSdkIndividual.addConsent("general");
oneSdkIndividual.addConsent("docs");
oneSdkIndividual.addConsent("creditheader");
await oneSdkIndividual.submit();
const idv = oneSdk.flow("idv");
const loading1 = oneSdk.component("form", { name: "LOADING", title: { label: "Loading..." }, descriptions: [{ label: "" }] });
const loading2 = oneSdk.component("form", { name: "LOADING", title: { label: "Processing results..." }, descriptions: [{ label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser." }] });
const review = oneSdk.component("form", {
name: "REVIEW",
type: "ocr",
});
let before = true;
idv.on("loading", (display) => {
if (display) {
if (before) {
loading1.mount("#e2e-idv-loading1");
}
} else {
if (before) {
loading1.unmount();
}
before = false;
}
});
idv.on("results", async ({ checkStatus }) => {
if (checkStatus) {
console.log("results succesfful");
loading2.unmount();
review.mount("#e2e-idv-container");
} else {
console.log("no data returned");
}
});
idv.on("error", ({ message, payload }) => {
console.log("received error");
console.log(message, payload);
});
idv.on("detection_complete", (message) => {
console.log("capture finished");
console.log(message);
loading2.mount("#e2e-idv-loading2");
});
idv.on("*", (message) => {
console.log(message);
});
review.on("form:review:ready", async (message) => {
console.log(message);
});
idv.mount("#e2e-idv-container");
});
</script>
<template>
<div id="e2e-idv-container" style="width: '100%'; height: 85vh"></div>
<div id="e2e-idv-loading1"></div>
<div id="e2e-idv-loading2"></div>
</template>
3. Run the project:
npm run serve
Updated 5 days ago