웹제작 인증코드 기능 예시코드

인증 코드(CAPTCHA)는 "Completely Automated Public Turing test to Tell Computers and Humans Apart"(컴퓨터와 인간을 구별하는 완전 자동화된 Turing 테스트)의 약어입니다. 컴퓨터든, 사람이든. 이는 다음을 방지할 수 있습니다: 악의적인 비밀번호 크래킹, 티켓 사기, 포럼 범람을 방지하고 해커가 특정 프로그램을 사용하여 특정 등록 사용자가 계속 로그인하도록 무차별 대입하는 것을 효과적으로 방지합니다. 실제로 확인 코드를 사용하는 것은 많은 웹사이트에서 일반적인 방법입니다. 이제 우리는 이 함수를 비교적 간단한 방법으로 구현했습니다. 이 질문은 컴퓨터에 의해 생성되고 판단될 수 있지만 이에 답할 수 있는 사람은 오직 인간뿐입니다. 컴퓨터는 CAPTCHA 질문에 답할 수 없기 때문에 질문에 답하는 사용자는 사람으로 간주될 수 있습니다

다음은 웹 제작 인증 코드 기능에 대한 예제 코드입니다. 관심 있는 친구들은 함께 살펴볼 수 있습니다

실현 효과 ：

구현 원칙:

백엔드는 인증 코드 생성을 위한 인터페이스를 제공합니다. 프런트 엔드가 요청할 때마다 백엔드는 인증 코드 이미지와 인증 코드 이미지를 생성합니다. 고객을 위해 클라이언트로 전송됩니다. 마지막에 표시되는

인증 코드 문자열은 백엔드의 Session에 저장되고, 프런트엔드는 비즈니스 인터페이스를 다시 요청하여 세션의 인증 코드 문자열과 비교합니다. .

구현 아이디어:

1. 먼저 백엔드는 인증코드 이미지를 생성할 수 있는 인터페이스를 제공합니다.

2. 프론트엔드는 img에 src 속성을 설정하여 인증코드 생성을 위한 인터페이스를 요청합니다.

3. img에 대한 클릭 이벤트를 설정합니다. img를 클릭할 때마다 src 값이 변경되고 src가 다시 요청됩니다.

4. 페이지 인터페이스 작업 시 입력한 인증 코드가 올바른지 비교합니다

구현 코드:

프런트엔드:

html:

<p class="centent-top" style=""> 
   <p class="centent-left"><span>*</span>验证码：</p> 
   <input type="text" class="verification-code-input"> 
   <p class="verification-code"><img id="yzm" src="/SchoolRoll/accuser/code/check"></p> 
   <p class="change"><span>看不清？</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></p> 
  </p>

js:

var yzm =document.getElementById("yzm"); 
 var changeImgCode =document.getElementById("changeImgCode"); 
 yzm.onclick=function () { 
  changPin(); 
 } 
 changeImgCode.onclick=function () { 
  changPin(); 
 } 
 // 换验证码 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }

위 내용은 웹제작 인증코드 기능 예시코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!