Les codes de vérification sont visibles partout dans notre vie quotidienne. Ils peuvent protéger dans une certaine mesure la sécurité de nos comptes, alors comment les mettre en ?uvre??

(Recommandation vidéo d'apprentissage?: cours java )

L'implémentation Java de la fonction de vérification du code de vérification est en fait très simple?: une classe Graphics est utilisée pour dessiner des lettres sur le dessin tableau, et un certain nombre est sélectionné au hasard. Un certain nombre de lettres sont générées de manière aléatoire, puis plusieurs lignes d'interférence sont générées de manière aléatoire sur la planche à dessin.

Tout d'abord, écrivez une classe d'assistance à la génération de code de vérification pour dessiner des lettres aléatoires?:

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
 
import javax.imageio.ImageIO;
 
public final class GraphicHelper {
 
    /**
     * 以字符串形式返回生成的驗(yàn)證碼，同時(shí)輸出一個(gè)圖片
     * 
     * @param width
     *            圖片的寬度
     * @param height
     *            圖片的高度
     * @param imgType
     *            圖片的類(lèi)型
     * @param output
     *            圖片的輸出流(圖片將輸出到這個(gè)流中)
     * @return 返回所生成的驗(yàn)證碼(字符串)
     */
    public static String create(final int width, final int height, final String imgType, OutputStream output) {
	StringBuffer sb = new StringBuffer();
	Random random = new Random();
 
	BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
	Graphics graphic = image.getGraphics();
 
	graphic.setColor(Color.getColor("F8F8F8"));
	graphic.fillRect(0, 0, width, height);
 
	Color[] colors = new Color[] { Color.BLUE, Color.GRAY, Color.GREEN, Color.RED, Color.BLACK, Color.ORANGE,
		Color.CYAN };
	// 在 "畫(huà)板"上生成干擾線條 ( 50 是線條個(gè)數(shù))
	for (int i = 0; i < 50; i++) {
	    graphic.setColor(colors[random.nextInt(colors.length)]);
	    final int x = random.nextInt(width);
	    final int y = random.nextInt(height);
	    final int w = random.nextInt(20);
	    final int h = random.nextInt(20);
	    final int signA = random.nextBoolean() ? 1 : -1;
	    final int signB = random.nextBoolean() ? 1 : -1;
	    graphic.drawLine(x, y, x + w * signA, y + h * signB);
	}
 
	// 在 "畫(huà)板"上繪制字母
	graphic.setFont(new Font("Comic Sans MS", Font.BOLD, 30));
	for (int i = 0; i < 6; i++) {
	    final int temp = random.nextInt(26) + 97;
	    String s = String.valueOf((char) temp);
	    sb.append(s);
	    graphic.setColor(colors[random.nextInt(colors.length)]);
	    graphic.drawString(s, i * (width / 6), height - (height / 3));
	}
	graphic.dispose();
	try {
	    ImageIO.write(image, imgType, output);
	} catch (IOException e) {
	    e.printStackTrace();
	}
	return sb.toString();
    }
 
}

Ensuite, créez un servlet pour corriger la taille de l'image et gérer les scénarios d'utilisation du code de vérification, et capturez le code de vérification généré par la page (le code QR capturé doit être cohérent avec le code de vérification saisi par l'utilisateur pour réussir).

import java.io.IOException;
import java.io.OutputStream;
 
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 javax.servlet.http.HttpSession;
 
@WebServlet(urlPatterns = "/verify/regist.do" )
public class VerifyCodeServlet extends HttpServlet {
 
    private static final long serialVersionUID = 3398560501558431737L;
 
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
 
	// 獲得 當(dāng)前請(qǐng)求 對(duì)應(yīng)的 會(huì)話對(duì)象
	HttpSession session = request.getSession();
 
	// 從請(qǐng)求中獲得 URI ( 統(tǒng)一資源標(biāo)識(shí)符 )
	String uri = request.getRequestURI();
	System.out.println("hello : " + uri);
 
	final int width = 180; // 圖片寬度
	final int height = 40; // 圖片高度
	final String imgType = "jpeg"; // 指定圖片格式 (不是指MIME類(lèi)型)
	final OutputStream output = response.getOutputStream(); // 獲得可以向客戶端返回圖片的輸出流
								// (字節(jié)流)
	// 創(chuàng)建驗(yàn)證碼圖片并返回圖片上的字符串
	String code = GraphicHelper.create(width, height, imgType, output);
	System.out.println("驗(yàn)證碼內(nèi)容: " + code);
 
	// 建立 uri 和 相應(yīng)的 驗(yàn)證碼 的關(guān)聯(lián) ( 存儲(chǔ)到當(dāng)前會(huì)話對(duì)象的屬性中 )
	session.setAttribute(uri, code);
 
	System.out.println(session.getAttribute(uri));
 
    }
 
}

(Tutoriels associés recommandés?: Mise en route avec Java)

écrivez ensuite une page d'inscription HTML pour tester?:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注冊(cè)</title>
    <link rel="stylesheet" href="styles/general.css">
    <link rel="stylesheet" href="styles/cell.css">
    <link rel="stylesheet" href="styles/form.css">
	<script type="text/javascript" src="js/ref.js"></script>
    <style type="text/css" >
 
        .logo-container {
            margin-top: 50px ;
        }
        .logo-container img {
            width: 100px ;
        }
 
        .message-container {
            height: 80px ;
        }
 
        .link-container {
            height: 40px ;
            line-height: 40px ;
        }
 
        .link-container a {
            text-decoration: none ;
        }
 
    </style>
 
</head>
<body>
<div class="container form-container">
    <form action="/wendao/regist.do" method="post">
        <div class="form"> <!-- 注冊(cè)表單開(kāi)始 -->
 
            <div class="form-row">
                        <span class="cell-1">
                            <i class="fa fa-user"></i>
                        </span>
                        <span class="cell-11" style="text-align: left;">
                            <input type="text" name="username" placeholder="請(qǐng)輸入用戶名">
                        </span>
            </div>
 
            <div class="form-row">
                        <span class="cell-1">
                            <i class="fa fa-key"></i>
                        </span>
                        <span class="cell-11" style="text-align: left;">
                            <input type="password" name="password" placeholder="請(qǐng)輸入密碼">
                        </span>
            </div>
 
            <div class="form-row">
                        <span class="cell-1">
                            <i class="fa fa-keyboard-o"></i>
                        </span>
                        <span class="cell-11" style="text-align: left;">
                            <input type="password" name="confirm" placeholder="請(qǐng)確認(rèn)密碼">
                        </span>
            </div>
 
            <div class="form-row">
                        <span class="cell-7">
                            <input type="text" name="verifyCode" placeholder="請(qǐng)輸入驗(yàn)證碼">
                        </span>
                        <span class="cell-5" style="text-align: center;">
                            <img  src="/static/imghw/default1.png"  data-src="/demo/verify/regist.do"  class="lazy"   οnclick="myRefersh(this)" alt="Utiliser Java pour implémenter une fonction de code de vérification" >
                        </span>
            </div>
 
            <div class="form-row" style="border: none;">
                        <span class="cell-6" style="text-align: left">
                           <input type="reset" value="重置">
                        </span>
                        <span class="cell-6"  style="text-align:right;">
                            <input type="submit" value="注冊(cè)">
                        </span>
            </div>
 
        </div> <!-- 注冊(cè)表單結(jié)束 -->
    </form>
</div>
 
</body>
</html>

Rendu?:

Les changements dans le code de vérification dans l'image re?ue par la console sont les suivants?:

Lorsque vous cliquez pour actualiser le page, la vérification Le code changera également, mais lorsque nous ne pouvons pas voir clairement le code de vérification, cliquez simplement sur le code de vérification et il sera actualisé De cette fa?on, un rafra?chissement partiel peut être réalisé avec JavaScript.

Dans , ajoutez un point d'interrogation et une cha?ne de chiffres de suffixe Lors de l'actualisation, laissez les numéros de suffixe continuer à changer, puis ceux formés. Le code de vérification continuera également à changer. Une méthode que nous pouvons utiliser consiste à remplacer le numéro de suffixe par la date. La date obtient l'heure locale à tout moment. Cela garantit que le code de vérification d'actualisation peut changer à tout moment.

Le code est le suivant?:

function myRefersh( e ) {
	
	const source = e.src ; // 獲得原來(lái)的 src 中的內(nèi)容
	//console.log( "source : " + source  ) ;
	
	var index = source.indexOf( "?" ) ;  // 從 source 中尋找 ? 第一次出現(xiàn)的位置 (如果不存在則返回 -1 )
	//console.log( "index : " + index  ) ;
	
	if( index > -1 ) { // 如果找到了 ?  就進(jìn)入內(nèi)部
		var s = source.substring( 0 , index ) ; // 從 source 中截取 index 之前的內(nèi)容 ( index 以及 index 之后的內(nèi)容都被舍棄 )
		//console.log( "s : " + s  ) ;
		
		var date = new Date(); // 創(chuàng)建一個(gè) Date 對(duì)象的 一個(gè) 實(shí)例
		var time = date.getTime() ; // 從 新創(chuàng)建的 Date 對(duì)象的實(shí)例中獲得該時(shí)間對(duì)應(yīng)毫秒值
		e.src = s + "?time=" + time ; // 將 加了 尾巴 的 地址 重新放入到 src 上
		
		//console.log( e.src ) ;
	} else {
		var date = new Date();
		e.src = source + "?time=" + date.getTime();
	}
	
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!