Vue

Integrating with Vue 3 is straightforward. Include the @iproov/web-sdk package and render the <iproov-me> web component with your generated token.

ℹ️ Supported versions. We support any Vue version still receiving security patches. Vue 2 reached end of life on 31 December 2023, so that means Vue 3 and above. The iProov Web SDK is tested with Vue 3 using Vite.

Integration

App.vue

<script setup lang="ts">
import IProov from "./components/IProov.vue"
</script>

<template>
  <header>
    <div class="wrapper">
      <IProov />
    </div>
  </header>
</template>

components/IProov.vue

<template>
  <div class="iproov">
    <div v-if="loading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="token">
      <iproov-me
        :token="token"
        base_url="***YOUR_BASE_URL***"
        assets_url="***YOUR_ASSETS_URL***"
      />
    </div>
  </div>
</template>

<script>
import "@iproov/web-sdk"

export default {
  data() {
    return {
      token: "",
      loading: true,
      error: "",
    }
  },
  mounted() {
    this.fetchToken()
  },
  methods: {
    generateUsername() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        const r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
    async fetchToken() {
      try {
        // Replace with your backend token endpoint
        const response = await fetch("***YOUR_BACKEND_TOKEN_ENDPOINT***", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            resource: "https://iproov.app",
            user_id: `${this.generateUsername()}@example.com`,
            client: "Web SDK Vue",
          }),
        })
        if (!response.ok) throw new Error(response.statusText)
        const data = await response.json()
        if (!data.token) throw new Error("No token returned")
        this.loading = false
        this.token = data.token
      } catch (err) {
        this.loading = false
        this.error = err.toString()
        console.error(err)
      }
    },
  },
}
</script>

Vite Configuration

Vue 3 with Vite requires telling the compiler that <iproov-me> is a custom element so it doesn't try to resolve it as a Vue component:

vite.config.ts

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "iproov-me",
        },
      },
    }),
  ],
})

Support Checker

After importing the SDK, the Support Checker is available:

import { iProovSupport } from "@iproov/web-sdk/iProovSupport.js"

const supportChecker = new iProovSupport()
const { supported, granted, is_native_bridge } = await supportChecker.check()

Custom Slots

Pass custom slots as children of the <iproov-me> component:

<iproov-me :token="token" base_url="***YOUR_BASE_URL***" assets_url="***YOUR_ASSETS_URL***">
  <div slot="ready">Ready to scan</div>
  <div slot="button">Start scanning</div>
  <div slot="passed">Verification passed!</div>
  <div slot="failed">Verification failed</div>
</iproov-me>

Assets

Set the assets_url attribute to the URL where your application serves the iProov SDK assets. Copy the required assets from node_modules/@iproov/web-sdk to your public/ directory. See the Serving Assets and CORS guide for details.