Vueはログイン時に画像認証コードを実装します

Vueはログイン時に画像認証コードを実装します

この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

レンダリング

1. 新しいVueコンポーネントcomponents/identify/identify.vueを作成します。

<テンプレート>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'SIdentify',
  小道具: {
    識別コード:
      タイプ: 文字列、
      デフォルト: '1234'
    },
    フォントサイズ最小: {
      タイプ: 数値、
      デフォルト: 28
    },
    フォントサイズ最大: {
      タイプ: 数値、
      デフォルト: 40
    },
    背景色最小: {
      タイプ: 数値、
      デフォルト: 180
    },
    背景色最大: {
      タイプ: 数値、
      デフォルト: 240
    },
    色最小:
      タイプ: 数値、
      デフォルト: 50
    },
    色最大値: {
      タイプ: 数値、
      デフォルト: 160
    },
    ラインカラー最小: {
      タイプ: 数値、
      デフォルト: 40
    },
    ラインカラー最大: {
      タイプ: 数値、
      デフォルト: 180
    },
    ドットカラー最小: {
      タイプ: 数値、
      デフォルト: 0
    },
    ドットカラーマックス: {
      タイプ: 数値、
      デフォルト: 255
    },
    コンテンツ幅: {
      タイプ: 数値、
      デフォルト: 112
    },
    コンテンツの高さ: {
      タイプ: 数値、
      デフォルト: 40
    }
  },
  メソッド: {
    // 乱数を生成する randomNum (min, max) {
      Math.floor(Math.random() * (max - min) + min) を返します。
    },
    // ランダムな色を生成する randomColor (min, max) {
      var r = this.randomNum(最小値, 最大値)
      var g = this.randomNum(最小値, 最大値)
      var b = this.randomNum(最小値, 最大値)
      'rgb(' + r + ',' + g + ',' + b + ')' を返します
    },
    描画画像() {
      var キャンバス = document.getElementById('s-canvas')
      var ctx = キャンバス.getContext('2d')
      ctx.textBaseline = '下'
      // 背景を描画する ctx.fillStyle = this.randomColor(
        this.backgroundColorMin、
        this.backgroundColorMax
      )
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // テキストを描画する for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    描画テキスト (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
      ctx.フォント =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
      var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-30, 30)
      // 座標原点と回転角度を変更する ctx.translate(x, y)
      ctx.rotate(度 * Math.PI / 270) です。
      ctx.fillText(txt, 0, 0)
      // 座標原点と回転角度を復元します ctx.rotate(-deg * Math.PI / 270)
      ctx.translate(-x, -y)
    },
    描画線 (ctx) {
      // 干渉線を描く for (let i = 0; i < 2; i++) {
        ctx.strokeStyle = this.randomColor(
          this.lineColorMin、
          this.lineColorMax
        )
        ctx.beginPath()
        ctx.moveTo() 関数は、
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)
        )
        ctx.lineTo() 関数は、
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)
        )
        ctx.ストローク()
      }
    },
    描画ドット (ctx) {
      // 干渉点を描画する for (let i = 0; i < 20; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)、
          1、
          0,
          2 * 数学.PI
        )
        ctx.fill()
      }
    }
  },
  時計:
    識別コード(){
      この.drawPic()
    }
  },
  マウントされた(){
    この.drawPic()
  }
}
</スクリプト>
<style lang='less' スコープ>
.s-キャンバス{
    高さ: 38px;
}
.s-canvas キャンバス{
    上マージン: 1px;
    左マージン: 8px;
}
</スタイル>

第二に、現地での紹介が必要である

<テンプレート>
 <span @click="refreshCode" style="cursor: ポインター;">
  <s-identify :identifyCode="identifyCode" ></s-identify>
 </span>
</テンプレート>

<スクリプト>
// 画像検証コードコンポーネントをインポートする import SIdentify from '@/components/identify'
エクスポートデフォルト{
 コンポーネント: { SIdentify },
 データ() {
  戻る {
   // 画像検証コード identifyCode: ''、
   // 検証コードルールはコードを特定します: '3456789ABCDEFGHGKMNPQRSTUVWXY',
  }
 },
 メソッド: {
  // 検証コードを切り替える refreshCode() {
   this.identifyCode = ''
   this.makeCode(this.identifyCodes, 4)
     },
  // ランダムな検証コードを生成する makeCode(o, l) {
    (i = 0; i < l; i++ とします) {
      this.identifyCode += this.identifyCodes[
        Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
      ]
    }
  },
 }
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueカスタム開発スライド画像検証コンポーネント
  • Vueで画像スライダー検証コンポーネントをカプセル化する方法
  • Vueは画像検証コード生成を実装
  • Vue は画像のスライド検証を実装します
  • Vue ベースの画像検証コードの 60 秒カウントダウン機能を実装する
  • VUEは画像検証コード機能を実装
  • Vue+elementUI はフォームと画像のアップロードおよび検証機能の例を実装します
  • Vue検証コード(識別)プラグインの使い方の詳しい説明
  • vue+Element はログイン用のランダム検証コードを実装します
  • Vue3は回転画像検証を実現

<<:  MySQLトランザクションの基本的な学習と経験の共有

>>:  Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明

推薦する

js が CSS 属性 (値) のサポートを決定して通知する状況の分析

新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...

Linux ファイル/ディレクトリの権限と所有権の管理

1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...

Vueはプライベートフィルターと基本的な使用法を定義します

プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

クエリでのMySQLのユニークキーの使用と関連する問題

1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

Xshellの一般的な問題と関連する設定の詳細な説明

この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...