유니앱 개발에 네트워크 검증을 추가하는 방법

오늘날의 인터넷 시대에는 인터넷의 발전과 대중화로 인해 점점 더 많은 사람과 기업이 전통적인 오프라인에서 온라인으로 비즈니스를 전환하기로 선택하고 있으며, 이는 네트워크 보안 문제도 특히 중요하게 만듭니다. 그 중 네트워크 공격과 네트워크 사기는 네트워크 보안에서 가장 시급한 문제 중 하나입니다. 따라서 애플리케이션 개발에 네트워크 검증을 추가하는 것이 특히 필요합니다. 이번 글에서는 기업과 사용자의 네트워크 보안을 보장하기 위해 유니앱 개발 시 네트워크 검증을 추가하는 방법을 소개하겠습니다.

1. Uniapp의 네트워크 검증 플러그인 참고

uniapp 플러그인 시장에는 Jiexian 검증, Yidun 검증 등 많은 네트워크 검증 플러그인이 있습니다. 이 기사에서는 Huashengda EasyDLips를 예로 들어 설명합니다. 먼저 HBuilderX에서 uniapp 프로젝트를 엽니다. 다음으로 플러그인 마켓을 열고 "Huashengda"를 검색한 후 EasyDlips 구성요소를 찾아 설치하세요.

설치가 완료된 후 프로젝트에 EasyDLips와 관련된 js 파일을 만들고 이름을 easyDlips.js로 지정하고 easy를 소개하세요. -verify , 아래와 같이

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

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

2. EasyDLips 검증 인터페이스 문서와

EasyDLips를 이용한 검증을 위한 메인 인터페이스 문서는 verify-api 문서입니다. 문서에는 검증 초기화 인터페이스 verifyInit(), 퍼즐 검증 인터페이스 verifySlide(), 슬라이딩 검증 인터페이스 verifyCaptcha(), 검증 결과 조회 인터페이스 verifyCheck() 등의 인터페이스가 제공됩니다. 그 중 가장 일반적으로 사용되는 것은 verifySlide()와 verifyCaptcha()입니다.

1. 퍼즐 인증

퍼즐 인증 코드는 틈이 있는 사진과 어지러운 작은 그림 뭉치로 구성되어 있습니다. 사용자는 어지러운 작은 그림을 올바른 위치로 드래그해야 사진을 복원할 수 있습니다. 코드는 다음과 같습니다.

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. 슬라이딩 인증

슬라이딩 인증 코드 퍼즐 인증 코드에 비해 인증 유창성과 사용 편의성이 더 높습니다. 사용자는 자신의 신원을 증명하기 위해 슬라이더를 누른 상태에서 올바른 위치로 이동해야 합니다. 코드는 다음과 같습니다.

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. 요약

오늘날의 인터넷 시대에는 사이버 공격, 사이버 사기 등의 문제가 점점 더 심각해지고 있습니다. 애플리케이션 개발에 네트워크 검증을 포함하면 기업과 사용자의 네트워크 보안을 강화하고 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 이 글에서는 EasyDLips 검증 플러그인의 사용 과정과 코드를 소개하고, 애플리케이션 개발 과정에 도움이 되기를 바랍니다.

위 내용은 유니앱 개발에 네트워크 검증을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!