Rumah  >  Artikel  >  hujung hadapan web  >  kawalan cap jari ocx dilaksanakan dalam vue

kawalan cap jari ocx dilaksanakan dalam vue

PHPz
PHPzasal
2023-05-08 10:42:37980semak imbas

Dengan perkembangan Internet yang semakin meningkat, keselamatan pelbagai aplikasi semakin mendapat perhatian. Antaranya, teknologi pengecaman cap jari digunakan secara meluas dalam pelbagai senario, seperti bank, kerajaan, perusahaan, dll. Untuk memudahkan pembangun melaksanakan fungsi pengecaman cap jari dalam aplikasi web, artikel ini memperkenalkan kaedah pelaksanaan kawalan cap jari OCX dalam rangka kerja Vue.

1. Prasyarat

Sebelum memperkenalkan proses pelaksanaan khusus, anda perlu memahami beberapa pengetahuan prasyarat: rangka kerja Vue dan kawalan cap jari OCX.

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini dan ringan, pantas dan fleksibel. Saya tidak akan menerangkan secara terperinci tentang pengetahuan asas dan penggunaan Vue Pembaca boleh menyemak dokumentasi rasmi.

Kawalan cap jari OCX ialah kawalan pengecaman cap jari berdasarkan teknologi ActiveX, yang boleh menyediakan fungsi pengumpulan dan perbandingan cap jari. Kawalan ini perlu berjalan dengan betul dalam pelayar IE, jadi ia perlu dibenamkan ke dalam halaman Web. Dalam artikel ini, kami menggunakan kawalan cap jari yang disediakan oleh Jiangsu Lishi Electronic Technology Co., Ltd.

2. Proses pelaksanaan

Sebelum melaksanakan aplikasi kawalan cap jari OCX dalam rangka kerja Vue, kita perlu melengkapkan langkah berikut:

  1. Dapatkan kawalan cap jari fail berkaitan dan pasangkannya. Fail ini termasuk fail Dll kawalan dan program pemasangan, yang perlu dipasang di bawah sistem Windows.
  2. Tambah kawalan cap jari pada halaman web. Kawalan ActiveX perlu dimasukkan ke dalam halaman supaya penyemak imbas boleh memanggil kawalan cap jari.

Selepas melengkapkan langkah di atas, kita boleh mula melaksanakan fungsi pengecaman cap jari dalam rangka kerja Vue. Proses pelaksanaan khusus adalah seperti berikut:

  1. Perkenalkan kaedah dan parameter yang berkaitan bagi kawalan cap jari dalam komponen Vue.
<script>
export default {
  mounted() {
    // 在组件加载时引入指纹控件
    const fp = document.getElementById('FPControl')
    // 根据控件的GUID进行初始化
    fp.Init('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
  },
  methods: {
    // 获取指纹数据
    getFingerPrint() {
      const fp = document.getElementById('FPControl')
      // 调用控件的Scan方法进行指纹采集
      const res = fp.Scan()
      // 返回指纹数据
      return res
    },
    // 比对指纹数据
    compareFingerPrint(fpData1, fpData2) {
      const fp = document.getElementById('FPControl')
      // 调用控件的Compare方法进行指纹比对
      const res = fp.Compare(fpData1, fpData2)
      // 返回比对结果,0表示匹配,-1表示不匹配
      return res
    }
  }
}
</script>
  1. Masukkan kawalan cap jari dalam templat Vue.
<template>
  <div>
    <!-- 插入ActiveX控件 -->
    <object id="FPControl" type="application/x-oleobject" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></object>
    <!-- 在页面中添加指纹识别功能 -->
    <div>
      <button @click="getFingerData">采集指纹</button>
      <button @click="compareFingerData">比对指纹</button>
    </div>
  </div>
</template>

Seperti yang ditunjukkan di atas, kami memasukkan kawalan ActiveX dalam templat Vue dan menambah dua butang pada halaman untuk memanggil koleksi cap jari dan fungsi perbandingan.

  1. Panggil kaedah kawalan cap jari yang berkaitan untuk melaksanakan pengecaman cap jari.

Dalam komponen Vue, kami melaksanakan fungsi pengumpulan cap jari dengan memanggil kaedah Imbasan kawalan cap jari, dan melaksanakan fungsi perbandingan cap jari dengan memanggil kaedah perbandingan Bandingkan. Fungsi ini boleh digunakan untuk pengesahan keselamatan di tempat seperti bank.

3. Nota

Apabila menggunakan kawalan cap jari OCX, anda perlu memberi perhatian kepada perkara berikut:

  1. Kawalan hanya boleh berjalan seperti biasa dalam IE pelayar. Isu keserasian mungkin berlaku dalam penyemak imbas lain.
  2. Kawalan perlu dipasang secara manual oleh pengguna, jika tidak, ia tidak boleh digunakan. Petua pemasangan atau dokumentasi yang sesuai perlu disediakan.
  3. Antara muka yang dipanggil oleh kawalan mungkin dihadkan oleh dasar keselamatan tertentu dan perlu ditetapkan mengikut situasi sebenar.

4. Ringkasan

Artikel ini memperkenalkan cara menyepadukan kawalan cap jari OCX dalam rangka kerja Vue untuk merealisasikan koleksi cap jari dan fungsi perbandingan. Teknologi pengenalan cap jari mempunyai aplikasi yang luas dan kepentingan yang meluas dalam masyarakat moden Melalui pengenalan artikel ini, saya percaya pembaca dapat memahami dengan lebih baik prinsip pelaksanaan dan aplikasi praktikal teknologi ini.

Atas ialah kandungan terperinci kawalan cap jari ocx dilaksanakan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:raspbian memasang nodejsArtikel seterusnya:raspbian memasang nodejs