Comment ajouter la vérification du réseau au développement Uniapp

À l'ère d'Internet d'aujourd'hui, en raison du développement et de la vulgarisation d'Internet, de plus en plus de personnes et d'entreprises choisissent de transférer leurs activités du hors ligne traditionnel vers le ligne, ce qui rend également les questions de sécurité des réseaux particulièrement importantes. Parmi elles, les attaques réseau et la fraude réseau constituent l’un des problèmes les plus urgents en matière de sécurité réseau. Il est donc particulièrement nécessaire d’ajouter la vérification du réseau au développement d’applications. Dans cet article, nous expliquerons comment ajouter la vérification du réseau dans le développement d'Uniapp pour garantir la sécurité du réseau des entreprises et des utilisateurs.

1. Référencez le plug-in de vérification du réseau dans Uniapp

Il existe de nombreux plug-ins de vérification du réseau sur le marché des plug-ins uniapp, tels que la vérification Jiexian, la vérification Yidun, etc. Cet article prend Huashengda EasyDLips comme exemple. Tout d’abord, ouvrez votre projet uniapp dans HBuilderX. Ensuite, ouvrez le marché des plug-ins, recherchez "Huashengda", recherchez le composant EasyDlips et installez-le :

Une fois l'installation terminée, créez un fichier js lié à EasyDLips dans votre projet, nommez-le easyDlips.js et introduisez easy -verify , comme indiqué ci-dessous :

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

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

2. Le document d'interface de vérification EasyDLips et le document d'interface principal pour la vérification à l'aide de

EasyDLips est le document verify-api. Dans le document, l'interface d'initialisation de vérification verifyInit(), l'interface de vérification de puzzle verifySlide(), l'interface de vérification glissante verifyCaptcha(), l'interface de requête de résultat de vérification verifyCheck() et d'autres interfaces sont fournies. Parmi eux, les plus couramment utilisés sont verifySlide() et verifyCaptcha().

1. Vérification du puzzle

Le code de vérification du puzzle est composé d'une image avec un espace et d'un tas de petites images désordonnées. L'utilisateur doit faire glisser les petites images désordonnées vers la bonne position pour restaurer l'image. Le code est le suivant :

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. Vérification coulissante

Code de vérification coulissant Par rapport au code de vérification du puzzle, la fluidité de la vérification et la facilité d'utilisation sont plus élevées. Les utilisateurs doivent maintenir le curseur enfoncé et le déplacer dans la bonne position pour prouver leur identité. Le code est le suivant :

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. Résumé

À l'ère d'Internet d'aujourd'hui, les problèmes tels que les cyberattaques et la cyberfraude deviennent de plus en plus graves. L'inclusion de la vérification du réseau dans le développement d'applications peut améliorer la sécurité du réseau des entreprises et des utilisateurs et offrir aux utilisateurs une meilleure expérience utilisateur. Cet article présente le processus d'utilisation et le code du plug-in de vérification EasyDLips, dans l'espoir de vous aider dans le processus de développement d'applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!