Documentation

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.

Suggest Edits

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:

  <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 about 2 months ago