Vue v2

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

For Vue 3, see the Vue v3 guide which uses ES module imports and Vite.

Basic Integration

The example below was generated with the Vue CLI.

<template>
  <div class="iproov">
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="token">
      <iproov-me
        :token="token"
        base_url="***YOUR_BASE_URL***"
        assets_url="***YOUR_ASSETS_URL***"
      >
        <!-- add any custom slots here -->
        <div slot="button">
          <button type="button">Scan Face</button>
        </div>
      </iproov-me>
    </div>
  </div>
</template>

<script>
require("@iproov/web-sdk")

export default {
  name: "IProov",
  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>

Vue CLI Configuration

Vue 2 with Vue CLI requires telling the compiler that <iproov-me> is a custom element so it doesn't try to resolve it as a Vue component. Add this to your vue.config.js:

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag === "iproov-me",
        }
        return options
      })
  },
}

Support Checker

After requiring the SDK, the Support Checker is available:

const { iProovSupport } = require("@iproov/web-sdk/iProovSupport")

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.