Vue はグラフィック検証コードログインを実装します

Vue はグラフィック検証コードログインを実装します

この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. レンダリング

2. components の下に、次の内容の新しいファイル 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='scss' スコープ>
.s-キャンバス{
    高さ: 38px;
}
.s-canvas キャンバス{
    上マージン: 1px;
    左マージン: 8px;
}
</スタイル>

3. ページの紹介

<スクリプト>
 '../../components/identify' から SIdentify をインポートします。
 エクスポートデフォルト{
    コンポーネント: { SIdentify }
  }
  データ() {
    // 検証コードカスタム検証ルール const validVerifycode = (rule, value, callback) => {
      定数 newVal = value.toLowerCase()
      const identifyStr = this.identifyCode.toLowerCase()
      (newVal === '')の場合{
        callback(new Error('認証コードを入力してください'))
      } そうでない場合 (newVal !== identifyStr) {
        console.log('validateVerifycode:', 値)
        callback(new Error('認証コードが正しくありません!'))
      } それ以外 {
        折り返し電話()
      }
    }
    戻る {
      識別コード: '3456789ABCDEFGHGKMNPQRSTUVWXY'、
      識別コード: ''、
       ルールフォーム: {
        ユーザー名: ''、
        パスワード: ''、
        検証コード: ''
      },
      ルール:
        確認コード:
          { 必須: true、トリガー: 'blur'、バリデータ: validVerifycode }
        ]
      }
 }
    }
</スクリプト>

4.html

<el-form-item prop="検証コード">
 <div style="display:flex">
 <el-入力
 v-model="ruleForm.verifycode"
 placeholder="確認コードを入力してください"
 @keyup.enter.native="ログイン('ruleForm')"
 </el-input> ...
 <span @click="リフレッシュコード"
 ><s-identify :identifyCode="identifyCode"></s-identify
 </span>
 </div>
</el-form-item>

5. マウント

マウント() {
    //検証コードの初期化 this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  }

6. 方法

メソッド: {
    // 乱数を生成する randomNum(min, max) {
      Math.floor(Math.random() * (max - min) + min) を返します。
    },
    // 検証コードを切り替える refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 4桁のランダムな検証コードを生成する makeCode(o, l) {
      (i = 0; i < l; i++ とします) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    }
 }

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

以下もご興味があるかもしれません:
  • 検証コードログインメソッドのVue実装例
  • Vue は携帯電話の認証コードによるログインを実装します
  • vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します
  • Vue は携帯電話番号と確認コードによるログインを実装します (60 秒のカウントダウンは無効)
  • Vue は SMS 認証コードログイン機能を実装します (プロセスの詳細説明)
  • Vue は、携帯電話番号経由で SMS 認証コードログインを送信するためのサンプル コードを実装します。

<<:  画像の盗難を防ぐために Nginx で Referer を設定する方法

>>:  nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明

推薦する

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

js の parseInt() の奇妙な動作の調査と修正

背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...

実践で遭遇するフロントエンドの基本(HTML、CSS)

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...

CentOS7でPHPスケジュールタスクを実行する方法

序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...

10秒以内にMySQLデータベースに数百万件のレコードを挿入する実装

まず、次の質問について考えてみましょう。このような膨大な量のデータをデータベースに挿入するには、通常...

IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...

MySQLデータ損失の原因と解決策

目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

画像をラベルとして使用すると、IE では for 属性が機能しません。

例えば:コードをコピーコードは次のとおりです。 <input type="check...

ウェブサイトにダークモード切り替え機能を持たせるための純粋なCSSフリー実装コード

序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...

Vue のグローバル ウォーターマーク実装例

目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....

Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する

1. ワイヤレスPowerShell を実行し、次のコマンドを入力します。 install-wind...