Cara menambah pengesahan rangkaian pada pembangunan uniapp

Dalam era Internet hari ini, disebabkan perkembangan dan pempopularan Internet, semakin ramai orang dan syarikat memilih untuk memindahkan perniagaan mereka daripada luar talian tradisional kepada dalam talian, yang turut menjadikan isu keselamatan rangkaian amat penting. Antaranya, serangan rangkaian dan penipuan rangkaian adalah salah satu isu yang paling mendesak dalam keselamatan rangkaian. Oleh itu, adalah perlu untuk menambah pengesahan rangkaian pada pembangunan aplikasi. Dalam artikel ini, kami akan memperkenalkan cara menambah pengesahan rangkaian dalam pembangunan uniapp untuk memastikan keselamatan rangkaian perusahaan dan pengguna.

1. Rujuk pemalam pengesahan rangkaian dalam Uniapp

Terdapat banyak pemalam pengesahan rangkaian dalam pasaran pemalam uniapp, seperti pengesahan Jiexian, pengesahan Yidun, dsb. Artikel ini mengambil Huashengda EasyDLips sebagai contoh. Mula-mula, buka projek uniapp anda dalam HBuilderX. Seterusnya, buka pasaran pemalam, cari "Huashengda", cari komponen EasyDlips dan pasangnya:

Selepas pemasangan selesai, cipta fail js yang berkaitan dengan EasyDlips dalam projek anda, namakannya easyDlips. js dan Perkenalkan pengesahan mudah seperti berikut:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  install(Vue) {
    Vue.prototype.$easyVerify = easyVerify;
  }
};

2. Dokumen antara muka pengesahan EasyDLips dan gunakan

Dokumen antara muka utama untuk pengesahan EasyDLips ialah dokumen pengesahan-api. Dalam dokumen, antara muka permulaan pengesahan verifyInit(), antara muka pengesahan teka-teki verifySlide(), antara muka pengesahan gelongsor verifyCaptcha(), antara muka pertanyaan hasil pengesahan verifyCheck() dan antara muka lain disediakan. Antaranya, yang paling biasa digunakan ialah verifySlide() dan verifyCaptcha().

1. Pengesahan Teka-teki

Kod pengesahan teka-teki terdiri daripada gambar dengan jurang dan sekumpulan gambar kecil yang tidak teratur. Seret gambar ke lokasi yang betul untuk memulihkan gambar untuk membuktikan identiti anda. Kodnya adalah seperti berikut:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  methods: {
    // 初始化验证
    initVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '2'; // 验证类型为拼图验证

      easyVerify.verifyInit(appId, time, sig, userId, verifyType, (data) => {
        // 验证初始化成功
        console.log('verify init success:',data);
      }, (err) => {
        // 验证初始化失败
        console.log('verify init fail:',err);
      });
    },

    // 拼图验证
    slideVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '2'; // 验证类型为拼图验证

      easyVerify.verifySlide(appId, time, sig, userId, verifyType, (data) => {
        // 验证成功
        console.log('verify slide success:',data);
      }, (err) => {
        // 验证失败
        console.log('verify slide fail:',err);
      });
    },

    // 获取签名
    getSignature() {
      const appId = '**********'; // EasyDLips系统中的appId
      const appSecret = '**********'; // EasyDLips系统中的appSecret

      // 计算md5签名
      const md5 = require('blueimp-md5');
      const str = `${appId}${Date.now().toString()}${appSecret}`;
      const sig = md5(str);

      return sig;
    }
  }
};

2. Pengesahan gelongsor

Kod pengesahan gelongsor mempunyai kelancaran pengesahan dan kemudahan penggunaan yang lebih tinggi daripada kod pengesahan teka-teki. Pengguna perlu menahan peluncur dan mengalihkannya ke kedudukan yang betul untuk membuktikan identiti mereka. Kodnya adalah seperti berikut:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  methods: {
    // 滑块验证
    captchaVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '3'; // 验证类型为滑块验证

      easyVerify.verifyCaptcha(appId, time, sig, userId, verifyType, (data) => {
        // 验证成功
        console.log('verify captcha success:',data);
      }, (err) => {
        // 验证失败
        console.log('verify captcha fail:',err);
      });
    }
  }
};

3. Ringkasan

Dalam era Internet hari ini, masalah seperti serangan siber dan penipuan siber semakin serius. Memasukkan pengesahan rangkaian dalam pembangunan aplikasi boleh meningkatkan keselamatan rangkaian perusahaan dan pengguna, dan memberikan pengguna pengalaman pengguna yang lebih baik. Artikel ini memperkenalkan proses penggunaan dan kod pemalam pengesahan EasyDLips, dengan harapan dapat membantu anda dalam proses pembangunan aplikasi.

Atas ialah kandungan terperinci Cara menambah pengesahan rangkaian pada pembangunan uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!