Layui를 사용하여 무작위로 생성된 인증 코드를 지원하는 로그인 시스템을 개발하는 방법

Layui를 사용하여 무작위로 생성된 인증 코드를 지원하는 로그인 시스템을 개발하는 방법

Layui는 매우 인기 있는 프런트 엔드 UI 프레임워크로 개발자가 아름답고 쉽게 구축하는 데 도움이 되는 풍부한 구성요소 및 스타일 세트를 제공합니다. 인터페이스를 사용하세요. 이 기사에서는 Layui를 사용하여 무작위로 생성된 인증 코드를 지원하는 로그인 시스템을 개발하여 시스템 보안을 강화하는 방법을 소개합니다. 다음은 구체적인 코드 예시입니다.

1. 준비

1. 최신 버전의 Layui를 다운로드하고 CSS 및 JS 파일을 HTML에 도입하세요.
2. 로그인 페이지의 HTML 코드를 작성하기 위해 login.html이라는 HTML 파일을 만듭니다.
3. 같은 디렉터리에 login.js라는 JavaScript 파일을 생성하여 로그인 페이지의 논리 코드를 작성합니다.

2 로그인 페이지 구현

1. login.html에서 Layui가 제공하는 양식 구성 요소를 사용하여 사용자 이름, 비밀번호 및 확인 코드를 포함한 로그인 양식을 작성합니다.

   <form class="layui-form" action="">
     <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <img src="" alt="captcha" id="captchaImg">
    </div>
    <div class="layui-input-inline">
      <a href="#" id="refreshCaptcha">刷新验证码</a>
    </div>
     </div>
     <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
    </div>
     </div>
   </form>

2. login.js에서 다음을 사용합니다. Layui에서 제공하는 양식 모듈은 양식을 초기화하고 인증 코드 새로 고침 논리를 추가합니다.

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
   });

   3. 인증 코드 기능 추가

3. 무작위로 반환하는 captcha.php와 같이 서버 측에서 인증 코드를 생성하는 인터페이스를 준비합니다. 생성된 인증 코드 사진.

4. login.html의 인증 코드 이미지 img 태그에 동적 주소를 추가하면 생성된 인증 코드 이미지가 표시됩니다.

   <img src="" alt="captcha" id="captchaImg">

5. login.js에 인증코드 이미지 가져오기 및 설정 기능을 추가하세요.

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
     
     // 获取验证码图片
     captchaImg.src = '/captcha.php';
   });

   위 단계를 통해 무작위로 생성된 인증코드를 지원하는 로그인 시스템을 구현했습니다. 사용자는 로그인 페이지에 사용자 이름, 비밀번호, 인증 코드를 입력하고 지금 로그인 버튼을 클릭하여 인증할 수 있습니다. 인증코드 입력란 옆 인증코드 새로고침 버튼을 클릭하면 새로운 인증코드 이미지가 재생성되어 표시됩니다.

위 코드는 단지 기본적인 예시일 뿐이며 실제 개발에서는 더 많은 오류 처리 및 보안 검증이 필요하다는 점에 유의하시기 바랍니다. 동시에 백엔드 인터페이스의 호출 방법에 따라 구체적인 구현 프로세스를 적절하게 조정해야 합니다.

Layui 프레임워크와 서버 측의 협력을 통해 인증 코드를 쉽게 생성하고 사용하여 시스템 보안을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 Layui를 사용하여 무작위로 생성된 인증 코드를 지원하는 로그인 시스템을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!