検証コード機能を実装するための JavaWeb コードの詳細 (デモ)
WEB-APP では、ログイン、登録、特定のチケットの購入、フラッシュ セールなどのシナリオで一般的に使用されます。今日は、編集者がこの検証の実装方法を説明します。言うまでもなく、ログイン、登録、特定のチケットの購入、フラッシュセールなどで使用される
認証コードをダウンロードしてください。シナリオ。誰もがそれらに触れたことがあるでしょう。それらはあらゆる種類の奇妙で多様なものであると言えます。
デモ対象関数
確認コードページを入力してください。
ページ置換検証コード（非同期実装）。
バックエンドを検証し、検証結果を返します。
工事開始
ページ:demo1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>验证示例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
img {
width: 87px;
height: 33px;
border: 1px solid gray;
}
#msg {color: red;} /* 后台返回的验证信息显示为红色 */
</style>
</head>
<body>
<form action="${pageContext.request.contextPath}/check" method="post" enctype="application/x-www-form-urlencoded">
验证码：<input type="text" name="code" size="4" maxlength="4" id="code" />
<img id="code-img" src="" alt="验证码" style="display: none;"/>
<a href="javascript:void(0)" rel="external nofollow" id="changeCode">看不清？换一张</a> <br/><br/>
<input type="submit" value="验证"/> <span id="msg">${msg}</span>
</form>
</body>
</html>説明:
「はっきり見えない?変更してください」のhref属性はjavascript:voidと記述されています(0)</code > ページの更新を防ぐため、ここでの置換関数は AJAX によって非同期で完了します。 RJavaScript ツール: Util.js <code> javascript:void(0) 是为了防止页面刷新，这里的更换功能交给 AJAX 异步完成。
JavaScript 工具：util.js（为啥用原生 JS？任性呗~哈）
/**
* 获取 XMLHttpRequest Object
* @returns XMLHttpRequest Object
*/
function getXHR() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Sorry, 您的浏览器不支持 AJAX！");
return false;
}
}
}
return xmlHttp;
}页面中的 JavaScript 代码
<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script type="text/javascript">
var xhr = getXHR(); // 获得 XMLHttpRequest 对象
// 页面加载时加载验证码，但验证码初始为隐藏状态
window.onload=function() {
// 为 onreadystatechange 事件注册回调函数。由于 xhr 为全局变量，所以注册后就不用管啦
xhr.onreadystatechange=function() {
if(xhr.readyState==4 && xhr.status==200) {
document.getElementById('code-img').src="data:image/png;base64,"+xhr.responseText;
}
}
xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
xhr.send(null);
}
// 验证码输入框获得焦点时，验证码状态更改为显示
document.getElementById('code').onfocus=function() {
document.getElementById('code-img').style.display="inline";
}
// 异步请求，更换验证码
document.getElementById('changeCode').onclick=function() {
xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
xhr.send(null);
}
</script>生成验证码的 CaptchaCodeServlet.java
package com.leo.web.captcha;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.leo.util.ImageUtil;
import cn.dsna.util.images.ValidateCode;
@WebServlet("/captcha/code")
public class CaptchaCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
// 生成验证码（构造参数分别代表：宽度,高度,字符数,干扰线条数）
ValidateCode code = new ValidateCode(87, 33, 4, 23);
// 将验证码保存到 session 中，用于验证
request.getSession().setAttribute("code", code.getCode());
// 响应返回验证码图片 base64 编码后的数据给浏览器
response.getWriter().write(ImageUtil.encodeImg2Base64(code.getBuffImg(), "png"));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
this.doGet(request, response);
}
}说明：
这里使用了 Servlet3.0 的新特性-用注解配置 url-pattern（用起来挺爽的），也就是说简单的项目不再需要 web.xml 了，但是 Tomcat 需要 7.0+。
其次生成验证码我用了一个小工具：ValidateCode.jar。工具十分简单，不合心意完全可以自己写。但也就是因为功能太少，所以我又写了一个 ImageUtil。我也有打算自己开源一个验证码工具出来。
ImageUtil.java
package com.leo.util;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import sun.misc.BASE64Encoder;
public class ImageUtil {
/**
* 将图片二进制数据进行 base64 编码
* @param bufImg
* @return base64 编码后的字符串
*/
public static String encodeImg2Base64(BufferedImage bufImg, String formatName) {
ByteArrayOutputStream outputStream = null;
try {
outputStream = new ByteArrayOutputStream();
ImageIO.write(bufImg, formatName, outputStream);
} catch (IOException e) {
throw new RuntimeException("Base64 编码失败！"+e.getMessage());
}
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(outputStream.toByteArray());
}
private ImageUtil() {} // 工具类私有化构造方法是常见的做法
}说明：
为什么要把图片二进制数据进行 Base64编码 呢？因为<img/>标签虽然可以直接设置 src 属性值为${pageContext.request.contextPath}/captcha/code请求相应的 Servlet 来得到二进制数据直接显示，但在 AJAX 异步请求中响应返回的是 xhr.responseText 。当把数据直接给 img 标签的 src 属性时，用 Chrome-tool 查看只会是一堆二进制当作文本解析的乱码字符，所以才要多这一步。
或许我作为萌新不知道一些其它的方便技巧。但若不想使用异步，那直接 img src 设置为请求地址将是最简单的选择，更换验证码无非是监听事件 img src
説明:
Servlet3.0 の新機能がここで使用されています - アノテーションを使用して url-pattern を構成します (これを使用すると非常に楽しいです) )、これは単純であることを意味します。プロジェクトには web.xml は必要なくなりましたが、Tomcat には 7.0 以降が必要です。
ImageUtil を作成しました。私自身も検証コードツールをオープンソース化する予定です。 ImageUtil.javapackage com.leo.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = -6588625852621588221L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String encoding = "UTF-8";
request.setCharacterEncoding(encoding);
response.setContentType("text/html;charset="+encoding);
/* 验证码验证 */
String inputCode = request.getParameter("code");
// 获得 session 中的正确验证码
String realCode = (String) request.getSession().getAttribute("code");
System.out.println("input: "+inputCode+"\nreal: "+realCode); // 用于 Debug
if(!(inputCode!=null && realCode!=null &&
inputCode.equalsIgnoreCase(realCode))) {
// 若验证码不正确：回到页面并提示错误
request.setAttribute("msg", "验证码错误!请重新输入");
request.getRequestDispatcher("/demo1.jsp").forward(request, response);
return;
}
// 验证码正确，响应一句话表示 OK
response.getWriter().write("验证成功！");
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
}説明:
画像バイナリデータを Base64 エンコードする必要があるのはなぜですか? <img/> タグは src 属性値を ${pageContext.request.contextPath}/captcha/code に直接設定できるためです。 > request 対応するサーブレットはバイナリ データを取得して直接表示するために使用されますが、AJAX 非同期リクエストで返される応答は xhr.responseText です。データが img タグの src 属性に直接与えられている場合、 Chrome-tool を使用してデータを表示すると、大量のデータが表示されるだけです。文字化けしたバイナリ コードが文字として解析されるため、この追加の手順が必要です。
img src をリクエスト アドレスとして直接設定するのが最も簡単な選択です。これは、イベント img src をリッスンするだけです。 を実行し、このアドレスにリセットします (もう 1 つのリクエスト)。 
詳細情報: JSがブラウザでBase64エンコードされた画像を解析します
Base64画像エンコード解析とブラウザ互換処理バックエンド検証検証コード: CheckServlet.jave
rrreee
説明:
以上が検証コード機能を実装するための JavaWeb コードの詳細 (デモ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7529
15
1378
52
81
11
21
75
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Chrome ブラウザで認証コードが表示されません。
Mar 13, 2024 pm 08:55 PM
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Google Chrome を使用して Web ページにログインするために確認コードが必要になる場合があります。一部のユーザーは、画像検証コードを使用すると、Google Chrome で画像のコンテンツが適切に表示されないことに気づきます。何をすべきでしょうか? Google Chromeの認証コードが表示されない場合の対処法を以下のエディターでご紹介しますので、皆様のお役に立てれば幸いです！方法の紹介： 1. ソフトウェアに入り、右上隅の「詳細」ボタンをクリックし、下のオプションリストで「設定」を選択してに入ります。 2. 新しいインターフェースに入ったら、左側の「プライバシー設定とセキュリティ」オプションをクリックします。 3. 次に、右側の「Web サイト設定」をクリックします。
Java Web セキュリティのコード監査を分析する方法
May 16, 2023 am 08:04 AM
1. JavaWeb セキュリティの基礎 1. コード監査とは? 平たく言えば、Java コード監査とは、Java コードを監査することで Java アプリケーション自体のセキュリティ上の問題を発見することです Java 自体はコンパイル言語であるため、たとえクラス ファイルしかなくても、 Java コードを引き続き監査できます。コンパイルされていない Java ソース コード ファイルの場合は、ソース コードを直接読み取ることができますが、コンパイルされたクラス ファイルまたは jar ファイルの場合は、逆コンパイルする必要があります。 Java コードの監査自体はそれほど難しいものではなく、監査プロセスと一般的な脆弱性監査手法に習熟していれば、比較的簡単にコード監査作業を完了できます。しかし、Java コード監査の方法は単に使用するだけではありません。
携帯電話で確認コードを受信できないのはなぜですか?
Aug 17, 2023 pm 02:49 PM
携帯電話で認証コードを受信できない場合は、ネットワークの問題、携帯電話の設定の問題、携帯電話会社の問題、個人設定の問題が原因です。詳細な紹介: 1. ネットワークの問題: 携帯電話が設置されているネットワーク環境が不安定または信号が弱いため、確認コードが時間内に配信されない可能性があります; 2. 携帯電話の設定の問題: テキスト メッセージ携帯電話の音声機能が誤ってオフになったり、認証コード送信番号がブラックリストに追加され、認証コードが正常に受信されなくなったりする場合 3. 携帯電話会社側の問題、携帯電話会社側の故障や故障の可能性があります。メンテナンスにより認証コードの配信が間に合わない場合など
仮想番号は確認コードを受け取ることができますか?
Jan 02, 2024 am 10:22 AM
仮想番号は認証コードを受け取ることができ、登録時に入力した携帯電話番号が規定を満たしており、携帯電話番号が正常に接続できる限り、SMS認証コードを受け取ることができます。ただし、仮想携帯電話番号の利用には注意が必要で、Webサイトによっては仮想携帯電話番号の登録に対応していない場合があるため、正規の仮想携帯電話番号サービスプロバイダーを選択する必要があります。
PHP 開発ガイド: 検証コードログインの実装
Jul 01, 2023 am 09:27 AM
インターネットの発展やスマートフォンの普及に伴い、認証コードによるログイン機能を採用するWebサイトやアプリが増えています。認証コードログインは、セキュリティを向上させ、悪意のある攻撃を防ぐために、正しい認証コードを入力することでユーザーの本人確認を行うログイン方法です。 PHP開発において、簡易認証コードログイン機能の実装は複雑ではなく、以下の手順で完了します。データベース テーブルの作成 まず、検証コード情報を保存するテーブルをデータベースに作成する必要があります。テーブル構造には次のフィールドを含めることができます: id: 自動インクリメント主キー phon
PHP画像処理事例：画像の認証コード機能の実装方法
Aug 17, 2023 pm 12:09 PM
PHP画像処理事例：画像の認証コード機能の実装方法 インターネットの急速な発展に伴い、認証コードはWebサイトのセキュリティを守る重要な手段の1つとなっています。認証コードとは、画像認識技術を利用して本人かどうかを判断する認証方法です。この記事では、PHPを使用して画像の認証コード機能を実装する方法とコード例を紹介します。はじめに 認証コードはランダムな文字を含む画像であり、ユーザーは認証に合格するには画像内の文字を入力する必要があります。検証コードを実装する主なプロセスには、ランダムな文字の生成と、文字を画像に描画することが含まれます。
認証コードではロボットを止めることはできません! Google AI はぼやけたテキストを正確に識別できますが、GPT-4 は盲目のふりをして助けを求めます
Apr 12, 2023 am 09:46 AM
「最も迷惑なのは、Web サイトにログインするときにさまざまな種類の奇妙な (または変態的な) 確認コードが表示されることです。」 さて、良いニュースと悪いニュースがあります。良いニュースは、AI がこれを行ってくれるということです。私の言うことが信じられないかもしれませんが、認識の困難さが増大する 3 つの実際のケースを以下に示します。 そして、これらは「Pix2Struct」と呼ばれるモデルによって得られる答えです。 これらはすべて正確で、一字一句正確ですか?一部のネチズンは「確かに、精度は私よりも優れています。」と嘆いています。では、それをブラウザのプラグインにすることはできるのでしょうか? ?はい、一部の人は次のように言いました。これらのケースは比較的単純ですが、微調整するだけで、その効果がどれほど強力になるかは想像できません。悪い知らせは、検証コードでは間もなくロボットを停止できなくなるということです。 （危ない危ない…）どうやってやるの？ Pix2St
PHPを使用して確認コードイメージを作成するにはどうすればよいですか?
Sep 13, 2023 am 11:40 AM
PHPを使用して確認コードイメージを作成するにはどうすればよいですか? CAPTCHA は、ユーザーが機械ではなく人間であるかどうかを確認するために一般的に使用される方法です。 Web サイトでは、ログイン、登録、コメントなどの操作を完了するために、画像上に表示されるランダムな文字や数字を入力する必要がある認証コードの画像をよく見かけます。この記事では、PHP を使用して検証コード イメージを作成する方法と、具体的なコード例を紹介します。 1. PHPGD ライブラリ 検証コードイメージを作成するには、PHP の GD ライブラリを使用する必要があります。 GD ライブラリは、画像を処理するための拡張機能です。
