Skip to main content

​
Quick Start

1

Create a New Vue Project

Choose your preferred bundler:
# Install Vue CLI globally npm install -g @vue/cli # Create new
project vue create my-onesdk-app
2

Install OneSDK

npm install @frankieone/one-sdk
3

Configure Environment Variables

Create a .env file in your project root:
VUE_APP_CUSTOMER_ID=your_customer_id
VUE_APP_CUSTOMER_CHILD_ID=your_child_id
VUE_APP_API_KEY=your_api_key
Never commit sensitive credentials to version control. Add .env to your .gitignore file.

​
Implementation

Create or update your ./src/App.vue:
App.vue
<script setup>
import { onMounted, ref } from 'vue'
import OneSDK from '@frankieone/one-sdk'

// Configuration references
const CUSTOMER_ID = import.meta.env.VITE_CUSTOMER_ID
const CUSTOMER_CHILD_ID = import.meta.env.VITE_CUSTOMER_CHILD_ID
const API_KEY = import.meta.env.VITE_API_KEY

const session = ref(null)
const tokenResult = ref(null)

onMounted(async () => {
// Initialize session
const tokenResult = await initializeSession()

// Configure OneSDK
const oneSdk = await setupOneSDK(tokenResult)

// Setup individual verification
const individual = setupIndividual(oneSdk)

// Initialize IDV flow
setupIDVFlow(oneSdk)
})

// Session initialization
async function initializeSession() {
const response = 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()}`
}
})
})
return await response.json()
}

// OneSDK configuration
async function setupOneSDK(tokenResult) {
const sdk = await OneSDK({
session: tokenResult.session,
mode: "development",
recipe: {
form: {
provider: {
name: 'react',
googleApiKey: 'YOUR_GOOGLE_API_KEY'
},
}
}
})

sdk.on('\*', console.log)
return sdk
}

// Individual verification setup
function setupIndividual(sdk) {
const individual = sdk.individual()
individual.addConsent("general")
individual.addConsent("docs")
individual.addConsent("creditheader")
return individual.submit()
}

// IDV flow setup
function setupIDVFlow(sdk) {
const idv = sdk.flow("idv")
const components = {
loading1: sdk.component("form", {
name: "LOADING",
title: { label: "Loading..." },
descriptions: [{ label: "" }]
}),
loading2: sdk.component("form", {
name: "LOADING",
title: { label: "Processing results..." },
descriptions: [{
label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page."
}]
}),
review: sdk.component("form", {
name: "REVIEW",
type: "ocr"
})
}

setupIDVEventHandlers(idv, components)
idv.mount("#e2e-idv-container")
}

// Event handlers setup
function setupIDVEventHandlers(idv, components) {
let isInitialLoading = true

idv.on("loading", (display) => handleLoading(display, components, isInitialLoading))
idv.on("results", (data) => handleResults(data, components))
idv.on("error", handleError)
idv.on("detection_complete", handleDetectionComplete)

components.review.on("form:review:ready", handleReviewReady)
}

</script>

<template>
  <div class="onesdk-container">
    <div id="e2e-idv-container" class="idv-container"></div>
    <div id="e2e-idv-loading1"></div>
    <div id="e2e-idv-loading2"></div>
  </div>
</template>

<style scoped>
.onesdk-container {
  width: 100%;
  height: 85vh;
}

.idv-container {
  width: 100%;
  height: 100%;
}
</style>

​
Event Handling

function handleLoading(display, components, isInitialLoading) {
  if (display) {
    if (isInitialLoading) {
      components.loading1.mount("#e2e-idv-loading1")
    }
  } else {
    if (isInitialLoading) {
      components.loading1.unmount()
      isInitialLoading = false
    }
  }
}

function handleResults({ checkStatus }, components) {
  if (checkStatus) {
    console.log("Verification successful")
    components.loading2.unmount()
    components.review.mount("#e2e-idv-container")
  } else {
    console.warn("No data returned")
  }
}

function handleError({ message, payload }) {
  console.error("Verification error:", message, payload)
}

​
Running the Application

1

Start Development Server

npm run serve
2

Access the Application

Open your browser and navigate to:
  • Webpack: http://localhost:8080
  • Vite: http://localhost:5173
Development Best Practices
  • Keep sensitive configuration in .env files
  • Implement proper error handling for API calls
  • Use Vue’s Composition API for better code organization
  • Consider implementing loading states for better UX

​
Troubleshooting

  • Session Token Issues: Ensure your credentials are correct in the .env file
  • Mounting Errors: Check that container IDs match exactly
  • Component Loading: Verify all required components are properly initialized
  • Vue Version: Ensure you’re using Vue 3.x
  • Node Version: Use Node.js 18.x or later
  • Build Issues: Clear npm cache and node_modules if encountering build problems