如何使用Ajax檢查登錄？

我一直很擔心，但是我一直無法解決問題。

所以，我想從你那得到一些建議。

首先，我將顯示loginPage.jsp代碼和MemberController.java代碼以及MemberService.java代碼。

它是loginPage.jsp代碼。

<%@ page language="java" contentType="text/html; charset=EUC-KR" 
    pageEncoding="EUC-KR"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> 
<link rel="stylesheet" href="css/normalize.css"> 
<link rel="stylesheet" href="css/swiper.min.css"> 
<link rel="stylesheet" href="css/loginPage.css"> 
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="js/swiper.jquery.min.js"></script> 
<title>Insert title here</title> 
</head> 
<body> 
<jsp:include page="header.jsp" /> 
<div class="loginPage_main"> 
    <div class="pageName"> 
     <img class="pageName_image" src="images/greeting_title.jpg"> 
     <div class="pageName_explanation"> 
      <p>로그인</p> 
     </div> 
    </div> 
    <div class="location"> 
    </div> 
    <div class="loginForm_area"> 
     <div class="hidden_area"> 
      <div class="img_lock_area"> 
       <img src="images/lock.png" class="img_lock"> 
      </div> 
      <form action="loginOK.do" id="login_frm" name="frm" method="post" onsubmit="return checkValue()"> 
       <div class="input_zone"> 
        <div class="input_id"> 
         <span>&nbsp;&nbsp;ID</span><input type="text" placeholder="아이디를 입력하세요" style="width:280px;margin-left: 10px;" name="id"> 
        </div> 
        <div class="input_pw"> 
         <span>PW</span><input type="password" placeholder="비밀번호를 입력하세요" style="width:280px;margin-left: 10px;" name="pw"> 
        </div> 
       </div> 
      </form>  
       <div class="loginBtn" onclick="document.getElementById('login_frm').onsubmit();"> 
        <div style="margin-top: 22px;"> 
         <span class="loginOK">Login</span> 
        </div> 
       </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    function checkValue() 
    { 
     var form = document.frm; 

     if(!form.id.value || !form.pw.value) 
     { 
      alert('아이디 혹은 비밀번호를 입력하세요.'); 
      return false; 
     } 

     $.ajax 
     ({ 
      type: 'POST', 
      url: 'loginOK.do', 
      success: function() 
      { 
       alert('success'); 
      }, 
      error: function() 
      { 
       alert('error'); 
      } 
     }) 
    }  
</script> 
</body> 
</html>

它是MemberController.java代碼。

package controller; 

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.HashMap; 

import javax.servlet.http.Cookie; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpSession; 

import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.servlet.mvc.support.RedirectAttributes; 

import service.MemberService; 

@Controller 
public class MemberController 
{ 
    @Autowired 
    public MemberService mService; 


    // 로그인 
    // 전송된 ID,PW값과 DB에 있는 ID,PW값 비교 
    // 맞으면 alert 창으로 " 로그인 성공 " 메세지 표출 + mainPage 이동 
    // 틀리다면 alert 창으로 " 로그인 실패 " 메세지 표출 + loginPage로 리다이렉트 
    @RequestMapping("loginOK.do") 
    public String login(String id, String pw,HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException 
    { 
     HashMap<String, Object> loginIdentify = mService.login(id,pw); 

     System.out.println("ID is : " + id + "/" + "PW is : " + pw); 

     if(loginIdentify != null) 
     { 
      System.out.println("loginIdentify is true : " + loginIdentify); 

      session.setAttribute("id", id); 
      session.setAttribute("pw", pw); 

      /* 
      - 오류로 인한 일시 보류 -    
      response.setCharacterEncoding("UTF-8"); 
      PrintWriter writer = response.getWriter(); 

      writer.println("<script type='text/javascript'>"); 
      writer.println("alert('로그인 성공!');"); 
      writer.println("</script>"); 
      writer.flush(); 
      */ 
     } 
     else 
     { 
      System.out.println("loginIdentify is false : " + loginIdentify); 

      /*  
      - 오류로 인한 일시 보류 -   
      response.setCharacterEncoding("UTF-8"); 
      PrintWriter writer = response.getWriter(); 

      writer.println("<script type='text/javascript'>"); 
      writer.println("alert('로그인 실패!');"); 
      writer.println("</script>"); 
      writer.flush(); 
      */ 

      return "redirect:move_loginPage.do"; 
     } 
     return "redirect:main.do"; 
    } 


    // 로그아웃 
    // 세션과 쿠키 제거 + mainPage로 리다이렉트 
    @RequestMapping("logout.do") 
    public String logout(HttpSession session, HttpServletResponse response) 
    { 
     session.removeAttribute("id"); 

     Cookie cookie = new Cookie("id", null); 
     cookie.setMaxAge(0); 
     response.addCookie(cookie); 

     // 세션 삭제 확인 
     System.out.println("session is delete It's really? : " + session.getAttribute("id")); 

     return "redirect:main.do"; 
    } 
}

它是MemberService.java代碼。

package service; 

import java.util.HashMap; 

import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Repository; 
import org.springframework.stereotype.Service; 


import dao.IMemberDAO; 
import model.Member; 

@Service 
public class MemberService 
{ 
    @Autowired 
    private IMemberDAO memberDao; 

    public HashMap<String, Object> login(String id,String pw) 
    { 
     HashMap<String, Object> result = memberDao.selectOne(id); 

     System.out.println(result); 

     if(result != null) 
     { 
      String opwd = (String) result.get("pw"); 

      if(opwd.equals(pw)) 
      { 
       return result; 
      } 
      else 
      { 
       return null; 
      } 
     } 
     else 
     { 
      return null; 
     } 
    } 
}

執行表單標籤時，輸入的ID值和PW值與存儲在DB中的ID值和PW值進行比較。

如果這些值匹配，請轉到主頁面。

如果值不匹配，則無法重新加載頁面就無法登錄！我想打印一條消息。我怎樣才能讓它按我想要的方式工作？

我不知道從哪裏開始......我需要你的幫助。請給我建議您的計劃。

來源

2017-08-02 Seongwon-Choi

你快到了。

取消註釋MemberController.java中的代碼，該代碼使用response將數據發送回客戶端JavaScript。類似的東西 -

PrintWriter writer = response.getWriter(); 
writer.println("login succeeded"); 
writer.flush();

- 和類似的失敗情況。

然後，在loginPage.jsp，閱讀$.ajax的success函數的第一個參數來獲得相同的數據傳回：

$.ajax 
    ({ 
     type: 'POST', 
     url: 'loginOK.do', 
     success: function(returnData) 
     { 
      console.log(returnData); // <--- 
     }, 
     error: function() 
     { 
      alert('error'); 
     } 
    })

通過這種方式，客戶端會知道登錄是否成功，您可以調用相應的JavaScript函數來打開不同的頁面，顯示錯誤，清除密碼框或任何您想要執行的操作。

切應用程序安全性的批評：

我希望你使用HTTPS。否則，攻擊者很容易竊取用戶證書。
看來你是以純文本形式在數據庫中存儲你的用戶密碼。考慮salting他們來保護它們，以防數據庫受損。

來源

2017-08-02 20:08:25 Anko

有這麼多令人困惑的部分。請給我建議。 –

@최성원哪一部分很混亂？ – Anko

我差不多在那裏。目前我正在寫代碼。請等一下。 –

如何使用Ajax檢查登錄？

回答

相關問題