[0] 방식
: 사용자의 id(username), pw(password)를 입력 받고, 실제 DB에 등록되어 있는지 확인한 뒤에 Login 성공 여부를 보여준다.
[1] login.html
<!DOCTYPE html>
<html>
<head>
<title>login page</title>
</head>
<body>
login page입니다.
<div>
<p>username</p>
<input type = "text" id = "login_username">
</div>
<div>
<p>password</p>
<input type = "text" id = "login_password">
</div>
<button onclick="login()">로그인</button>
<script>
function login(){
alert($("#login_username").val());
alert($("#login_password").val());
$.ajax({
url : "/api/user/login",
type : "GET",
contentType : 'application/json; charset=utf-8',
data : {
username : $("#login_username").val(),
password : $("#login_password").val(),
},
cache : false,
success : (obj_data, status, xhr) => {
const name = obj_data.username;
if(obj_data.result == "login_fail_username"){
alert("잘못된 아이디입니다");
}
if(obj_data.result == "login_fail_password"){
alert("잘못된 비밀번호입니다");
}
if(name != undefined){
alert(JSON.stringify(obj_data.username) + "님 반갑습니다.");
}
},
error: (obj_data, status, error) => {
alert("로그인 실패!!");
alert(JSON.stringify(obj_data));
}
})
}
</script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</body>
</html>1) login (funtion)
- /api/user/login 경로로 ajax의 get을 진행한다.
- username, password를 담은 data를 담아서 전송한다.
2) html tag
= username, password를 입력하는 form을 제작한다.
[2] UserService.java
package com.example.demo.service;
import com.example.demo.domain.User;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public interface UserService {
Map<String, Object> create(Map<String, Object> params);
User update(Map<String, Object> params);
List<User> list();
User detail(Integer id);
User delete(Integer id);
Map<String, Object> login(Map<String, Object> params);
}
1) Map<String, Object> login(Map<String, Object> params);
: 로그인 관련 로직을 처리해주는 method를 만들어준다.
- params에는 로그인을 위해 사용자가 입력한 username, password가 담겨져 있다.
[3] UserServiceImpl.java
@Override
public Map<String, Object> login(Map<String, Object> params) {
User user = null;
Map<String, Object> result = new HashMap<String, Object>();
String username = (String) params.get("username");
user = userRepository.findByUsername(username);
if(user == null){
result.put("result", "login_fail_username");
return result;
}
String password = (String) params.get("password");
System.out.println(user.getPassword().equals((password)));
if(user.getPassword().equals((password)) == false){
result.put("result", "login_fail_password");
return result;
}
System.out.println("result : " + user.getName());
if(user != null){
result.put("username", user.getUsername());
result.put("password", user.getPassword());
result.put("name", user.getName());
result.put("phone", user.getPhone());
result.put("result", "로그인 성공");
} else {
result.put("id duplicated", user.getId());
}
return result;
}1) username (아이디) 중복 검사
: 사용자가 입력한 username 정보를 가지고 findByUsername 메소드를 통해 user의 존재 유무를 확인한다.
[4] UserRepository.java 수정
@Repository
public interface UserRepository extends JpaRepository<User, Integer> {
User findByUsername(String username);
User findByPassword(String password);
}1) findByUsername / findByPassword
: JPA를 통해서 위와 같은 메소드를 명시만 해도 사용할 수 있다.
- 이를 통해서 [3] UserServiceImpl.java에서 구현한 login 메소드의 아이디 중복 검사를 진행할 수 있다.
[5] UserRestController.java
@GetMapping({"/login"})
public Map<String, Object> login(@RequestParam Map<String, Object> params) {
return userService.login(params);
}1) public Map<String, Object> login(@RequestParam Map<String, Object> params)
: /api/user/login의 경로로 api 호출이 들어오면, userService의 Login 메소드를 제공한다.
- 이때 params에 들어 있는 값은 (username, password)이다.
[6] 번외
: 원하는 기능이 있을 경우 아래와 같이 진행하면 된다.
1) 원하는 페이지를 Html 파일로 제작한다.
- ajax call로 필요한 경우 api 경로를 지정한다.
- ex) /api/user/login
2) 필요한 데이터를 새로 제작해야 하는 경우 Entity를 수정한다.
- ex) User.java 에서 Entity를 수정한다.
3) Service interface에 메소드를 추가한다.
- ex) Map<String, Object> login(Map<String, Object> params);
4) ServiceImpl에서 해당 메소드를 구현한다.
- 작업을 진행하고 원하는 결과를 return 한다 (이때 중요한 점은 return type과 동일해야 한다.)
5) UserRestController에서 해당 메소드를 사용한다.
- 예시
@GetMapping({"/login"})
public Map<String, Object> login(@RequestParam Map<String, Object> params) {
return userService.login(params);
}6) 추가한 html 파일의 ajax에서 success / fail의 경우를 추가한다.
- 이후 발생할 로직에 대해서 생각 후 추가한다.
- 6번의 경우 1번에서 html을 제작할 때 작성해도 된다. (일어날 일을 미리 작성하는 부분)
7) 오류가 발생하면 서버의 log를 확인해서 수정한다.
- 주로 발생했던 것이 널포인트에러였다.
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com