ユニアプリ開発にネットワーク検証を追加する方法

今日のインターネット時代では、インターネットの発展と普及により、ビジネスを従来のオフラインからオンラインに移行することを選択する人や企業が増えています。そのため、ネットワーク セキュリティの問題も特に重要になっています。中でも、ネットワーク攻撃とネットワーク詐欺は、ネットワーク セキュリティにおいて最も差し迫った問題の 1 つです。したがって、アプリケーション開発にはネットワーク検証を追加することが特に必要です。この記事では、企業とユーザーのネットワーク セキュリティを確保するために、ユニアプリ開発にネットワーク検証を追加する方法を紹介します。

1. Uniapp でのネットワーク検証プラグインの引用

uniapp プラグイン マーケットには、Jiexian 検証、Yidun 検証など、多くのネットワーク検証プラグインがあります。この記事では、Huashengda EasyDLips を例として取り上げます。まず、HBuilderX で uniapp プロジェクトを開きます。次に、プラグイン マーケットを開き、「Huashengda」を検索し、EasyDlips コンポーネントを見つけてインストールします。

インストールが完了したら、プロジェクト内に EasyDlips に関連する js ファイルを作成し、easyDlips という名前を付けます。以下に示すように、easy-verify.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 中国語 Web サイトの他の関連記事を参照してください。