記事ディレクトリ
前に書いてある
私は記事を書く前に自分の創作背景を説明するのが習慣になっているのですが、実は大人になるとよく覚えていないのではないかと心配しているのですが、今回はうっかり前回のセキュリティ脆弱性修復プロジェクトに目を向けてしまいました。はログイン認証です。一部のマシンがログインをシミュレートするのを防ぐために、認証を埋めるためのランダムなコードを追加する必要はありません。今回は、市場にある 5 つの一般的な認証コード コンポーネントを、フロントエンド。
関係する知識ポイント
さまざまなフロントエンドログイン検証コード実装ソースコード、一般的なログイン検証検証実装デモ、デジタル操作検証コード実装方法、ランダム文字検証コード、ドラッグスライダー検証コード実装方法、クリックテキスト検証コード実装方法を順に説明します。不足しているブロックを正しい位置にドラッグする検証コード、さまざまなフロントエンド検証コード実装方法、および 5 つの一般的なフロントエンド検証コード実装デモを実現します。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
[注意]実際には、次の 5 つの Web 検証コードは主にverify.js コンポーネントの導入と jquery ベースで実現されており、完全なソース コードは第 6 章で自分でダウンロードできます。
1. ランダムな文字確認コード
これは最初に最も一般的な検証コードです。乱数、英文字、またはその 2 つの混合を生成することで、クリックしてランダムに生成し、最終的に入力された一致が検証に合格します。
1.1 効果
1.2 ソースコードを実現する
htmlソースコード
<div class="validatePart">
<h3>随机数字字符验证码</h3>
<div id="mpanel2">
</div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
</div>
JSソースコード
$('#mpanel2').codeVerify({
type: 1,
width: '200px',
height: '50px',
fontSize: '30px',
codeLength: 6,
btnId: 'check-btn',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
2. デジタル動作確認コード
実は、公式サイトでは前回のソフトテストの結果を問い合わせるのがこれが一番多く、当時はソフトテストの結果を確認するために、小学校の算数の計算をたくさん復習しました。
2.1 効果
2.2 ソースコードを実現する
htmlソースコード
<div class="validatePart">
<h3>数字运算验证码</h3>
<div id="mpanel3" style="margin-top: 20px">
</div>
<button type="button" id="check-btn2" class="verify-btn">确定</button>
</div>
JSソースコード
$('#mpanel3').codeVerify({
type: 2,
figure: 100, //位数，仅在type=2时生效
arith: 0, //算法，支持加减乘，不填为随机，仅在type=2时生效
width: '200px',
height: '50px',
fontSize: '30px',
btnId: 'check-btn2',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
3. スライダー認証コード
実はスライダーはその後の人間とコンピュータの検証でもよく使われるのですが、最初は死んでいて、多くのクローラアルゴリズムによって認識されシミュレートされたため、ドラッグして検証するという手法が生まれました。
3.1 効果
3.2 ソースコードを実現する
htmlソースコード
<div class="validatePart">
<h3>滑块拖动验证码</h3>
<div id="mpanel1">
</div>
</div>
JSソースコード
$('#mpanel1').slideVerify({
type: 1, //类型
vOffset: 5, //误差量，根据需求自行调整
barSize: {
width: '80%',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
4. 画像完成確認コード
これは 3 番目の方法と似ていますが、より要求が厳しく、検証に合格するには正確な位置にドラッグする必要があります。また、市場で最も広く使用されているセキュリティ検証方法でもあります。
4.1 効果
4.2 ソースコードを実現する
htmlソースコード
<div class="validatePart">
<h3>图片补全验证码</h3>
<div id="mpanel4" style="margin-top:0px;">
</div>
</div>
JSソースコード
$('#mpanel4').slideVerify({
type: 2, //类型
vOffset: 5, //误差量，根据需求自行调整
vSpace: 5, //间隔
imgName: ['1.jpg', '2.jpg'],
imgSize: {
width: '400px',
height: '200px',
},
blockSize: {
width: '40px',
height: '40px',
},
barSize: {
width: '400px',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
5. 確認コードを順番にクリックします
最も早い時期には、それは電車の切符システムであるべきでした。当時は多くの人から不満がありました。どのような鍋やフライパンをクリックして確認するかを調べることでした。これは今では別の方法です。与えられたテキストに従っていくつかの選択肢を見つけてください、そうでないと検証に合格しません、相対的に言えば、テキスト（画像）認識能力が必要です
5.1 効果
5.2 ソースコードを実現する
htmlソースコード
<div class="validatePart">
<h3>按顺序点选验证码</h3>
<div id="mpanel6" style="margin-top:10px;">
</div>
</div>
JSソースコード
$('#mpanel6').pointsVerify({
defaultNum: 4, //默认的文字数量
checkNum: 2, //校对的文字数量
vSpace: 5, //间隔
imgName: ['1.jpg', '2.jpg'],
imgSize: {
width: '600px',
height: '200px',
},
barSize: {
width: '600px',
height: '40px',
},
ready: function () {
},
success: function () {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error: function () {
// alert('验证失败！');
}
});
私は主に、私がこれまでに見た一般的なログイン検証シナリオをいくつかリストして示します, Web ログイン検証に関する知識を学んでいただけることを願っています. もちろん、さらにフロントエンド検証コードのシナリオがある場合は、「Ha, learn from」というメッセージを残すことができます。お互いに、そして一緒に進歩していきましょう！
6. ソースコードの共有
6.1 百度ネットディスク
リンク: https://pan.baidu.com/s/1W2tzFkQN99vkjzfZf4K67w
抽出コード: hdd6
6.2 123 ネットワークディスク
リンク: https://www.123pan.com/s/ZxkUVv-AaI4.html
抽出コード: hdd6
6.3 電子メールメッセージ
コメント欄にメール アカウントを残していただければ、ブロガーがそれを見つけ次第、あなたに送信します。あなたの幸せな人生を祈っています!
要約する
以上が今日お話したい内容で、この記事では主に各種フロントエンドログイン認証コードの実装ソースコード、一般的なログイン認証認証実装のデモ、デジタル操作認証コードの実装方法、ランダムレター認証コード、スライダー検証コードをドラッグし、テキスト検証コードの実装方法を順にクリックし、不足しているブロックを正しい位置にドラッグする検証コードの実現方法、複数のフロントエンド検証コードの実装方法、5つの一般的なフロントエンド検証コードの実装2023年も一緒に頑張っていきましょう！！！
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。