집 > 기사 > 웹 프론트엔드 > js_javascript 스킬로 생성된 인증코드 구현 및 기술 분석

js_javascript 스킬로 생성된 인증코드 구현 및 기술 분석

WBOY원래의: 2016-05-16 16:36:121290검색

인증 코드를 생성하고 확인하기 위한 js 코드를 공유하세요

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS生成验证码</title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript"> 
var code; //在全局 定义验证码  
function createCode() {
  code = "";
  var codeLength = 6;//验证码的长度  
  var checkCode = document.getElementById("checkCode");
  var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的  
 
  for (var i = 0; i < codeLength; i++) {
    var charIndex = Math.floor(Math.random() * 36);
    code += selectChar[charIndex];
  }
  //alert(code);
  if (checkCode) {
    checkCode.className = "code";
    checkCode.value = code;
  }
}
 
function validate() {
  var inputCode = document.getElementById("input1").value;
  if (inputCode.length <= 0) {
    alert("请输入验证码！");
  } else if (inputCode != code) {
    alert("验证码输入错误！");
  createCode();//刷新验证码  
  } else {
  alert("^-^ OK");
  }
}
</script>
</head>
<body onload="createCode()">
<form action="#">
  <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
  <input id="Button1" onclick="validate();" type="button" value="确定" />
</form>
</body>
</html>

우리 모두 알다시피 js는 클라이언트 측이므로 클라이언트 측에서 모든 확인을 수행하는 것이 합리적입니까? 아니면 서버에서 생성된 인증코드가 안전해야 하나요? 프런트엔드에서 생성된 인증코드는 안전한가요?

인증 코드는 동적이지만 정상적인 인증을 위해서는 클라이언트가 인식하고 올바른 값을 반환해야 합니다. 이것은 프로세스 문제입니다. js라면 클라이언트에서 확인하는 것이 기본적으로 동일합니다! ! ! 서버에서 생성하고, 클라이언트에서 검증하고, 서버에서 확인하고 정상적으로 열람하는 것이 가장 좋습니다. 이러한 과정은 완벽합니다

따라서 이 글은 기술적인 논의일 뿐이므로 실제 제작 프로젝트에서는 사용하지 마시기 바랍니다

성명：

이전 기사：입력 상자는 숫자가 아닌 js code_javascript 기술을 필터링합니다.다음 기사：입력 상자는 숫자가 아닌 js code_javascript 기술을 필터링합니다.

js_javascript 스킬로 생성된 인증코드 구현 및 기술 분석

관련 기사