登録検証コードkaptchaはspring bootの使い方を結び付けて詳しく説明します。


前言
私達のユーザーが登録する時、安全性を考慮するために、検証コードの機能を追加します。ここではgoogleのkaptchaを採用しています。spirngbootは手軽で独立しており、springベースのアプリケーション開発が特に簡単になります。ネットではspringbootの紹介がたくさんありますが、ここでは多く言いません。
つまり、ログイン時の検証コードとspringbootの使い方を説明します。
kaptchaを導入するために必要なjarカバンです。ここで使っているのはmavenです。

  <dependency> 
   <groupId>com.github.penggle</groupId> 
   <artifactId>kaptcha</artifactId> 
   <version>2.3.2</version> 
    
   <exclusions> 
    <exclusion> 
     <artifactId>javax.servlet-api</artifactId> 
     <groupId>javax.servlet</groupId> 
    </exclusion> 
   </exclusions> 
  </dependency> 
カバンの中にあるservletのカバンを取り除きます。私の個人的な理解の中でspringbootはjavaconfigと注釈で構築された軽いマイクロアーキテクチャです。
次はkapchaのjavaconfigです。

@Configuration 
public class CaptchaConfig { 
  
 
 @Bean(name="captchaProducer") 
 public DefaultKaptcha getKaptchaBean(){ 
  DefaultKaptcha defaultKaptcha=new DefaultKaptcha(); 
  Properties properties=new Properties(); 
  properties.setProperty("kaptcha.border", "yes"); 
  properties.setProperty("kaptcha.border.color", "105,179,90"); 
  properties.setProperty("kaptcha.textproducer.font.color", "blue"); 
  properties.setProperty("kaptcha.image.width", "125"); 
  properties.setProperty("kaptcha.image.height", "45"); 
  properties.setProperty("kaptcha.session.key", "code"); 
  properties.setProperty("kaptcha.textproducer.char.length", "4"); 
  properties.setProperty("kaptcha.textproducer.font.names", "  ,  ,    ");   
  Config config=new Config(properties); 
  defaultKaptcha.setConfig(config); 
  return defaultKaptcha; 
 } 
} 
ここのkatchのjavaconfigはspringmvcのbeanの構成に相当します。以下はjavaconfigに対するspringmvcのbeanの例です。参考にしてください。

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 
  <property name="config"> 
   <bean class="com.google.code.kaptcha.util.Config"> 
    <constructor-arg> 
     <props> 
      <prop key="kaptcha.border">yes</prop> 
      <prop key="kaptcha.border.color">105,179,90</prop> 
      <prop key="kaptcha.textproducer.font.color">blue</prop> 
      <prop key="kaptcha.image.width">125</prop> 
      <prop key="kaptcha.image.height">45</prop> 
      <prop key="kaptcha.textproducer.font.size">45</prop> 
      <prop key="kaptcha.session.key">code</prop> 
      <prop key="kaptcha.textproducer.char.length">4</prop> 
      <prop key="kaptcha.textproducer.font.names">  ,  ,    </prop> 
     </props> 
    </constructor-arg> 
   </bean> 
  </property> 
 </bean> 
構造方法の属性パラメータは自分のニーズに応じて設定できます。
配置ファイルはすでに配合されていますが、自分のQRコードをどうやって取得しますか?キャンバスの概念を理解して、生成した4桁の検証コードを対応のキャンバスに生成して結果を出してください。
コードは以下の通りです

@RequestMapping(value = "/captcha-image") 
 public ModelAndView getKaptchaImage(HttpServletRequest request, 
   HttpServletResponse response) throws Exception { 
  response.setDateHeader("Expires", 0); 
  response.setHeader("Cache-Control", 
    "no-store, no-cache, must-revalidate"); 
  response.addHeader("Cache-Control", "post-check=0, pre-check=0"); 
  response.setHeader("Pragma", "no-cache"); 
  response.setContentType("image/jpeg"); 
 
  String capText = captchaProducer.createText(); 
  System.out.println("capText: " + capText); 
 
  try { 
   String uuid=UUIDUtils.getUUID32().trim().toString();    
   redisTemplate.opsForValue().set(uuid, capText,60*5,TimeUnit.SECONDS); 
   Cookie cookie = new Cookie("captchaCode",uuid); 
   response.addCookie(cookie); 
  } catch (Exception e) { 
   e.printStackTrace(); 
  } 
 
   
 
  BufferedImage bi = captchaProducer.createImage(capText); 
  ServletOutputStream out = response.getOutputStream(); 
  ImageIO.write(bi, "jpg", out); 
  try { 
   out.flush(); 
  } finally { 
   out.close(); 
  } 
  return null; 
 } 
上のコードのように、ユーザー登録時に認証コードとcooiceのcaptchacodeを使ってユニークな検証を実現します。最初はsessionに入れることを考えました。科学的ではないと思いました。例えばcaptchacodeをsessionに置く時に、検証コードは一つで、後にもう一つのユーザーが登録して、前のユーザーはまだ登録中です。この時一連の問題が発生します。ここでは、クッキーとredisを使用して、ユーザの同時ログイン検証に対応する。
ページの使用も簡単です。

<div style="float: left;"> 
  <i><img style="height:22px;" id="codeImg" alt="    " title="    " src="code/captcha-image" /></i> 
</div> 

交換するとclickイベントを追加して、以前のredisで対応していたキャッシュデータをクリアします。または検証コードを取得する場合は、生存期間を設定します。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらすことを望んでいます。もし疑問があれば、メッセージを残して交流してください。ありがとうございます。