[SpringBoot, Vue.js] 로그인 화면 만들기, passwordEncoder.matches를 통해 암호화된 비밀번호 비교하기.

 

 

회원가입까지 만들었다.
이제 회원가입한 아이디와 비밀번호로
로그인을 해보자!

 

 

 

 

[ 회원가입 1편 + 2편 ]

[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 1편 : dto 만들고 이름, 패스워드, 전화번호 패

[SpringBoot] (IntelliJ, vue.js, H2) 회원가입 페이지 만들기 2편 : 아이디, 이메일 중복체크 만들기.

 

 

---

 

 

 

1. 화면 동작과 전체 코드

• 화면 동작

 

 

 

• LoginView 코드(vue)

Register-Web-frontend/src/views/LoginView.vue at master · hyeong-ing/Register-Web-frontend

 

 

• CustomerRight 코드(vue)

Register-Web-frontend/src/components/customer/CustomerRight.vue at master · hyeong-ing/Register-Web-frontend

 

 

• login 디렉터리(spring)

Register-Web-backend/src/main/java/com/example/JoinWeb/login at master · hyeong-ing/Register-Web-backend

 

 

• 디렉터리와 클래스

왼쪽이 spring, 오른쪽이 vue

 

 

 

 

---

 

 

 

 

 

2. 어떻게 만들까?

• 로그인 화면

 

아이디와 패스워드가 입력되지 않으면, 그에 맞는 alert이 출력된다. 그리고 DB에 저장되어 있는 아이디와 비밀번호를 확인하고 맞으면 로그인이 되도록 만들었다.

 

회원가입보다 로그인 기능을 만드는 게 더 간단했다.  다만 저 밑에 있는 카카오 간편 로그인이 죽을 맛이었다. 카카오 간편 로그인 포스팅은 다음에...😂

 

로그인을 누르고 성공하면 로그인이 되었다는 메시지가 나타나고, 실패하면 아이디나 비밀번호를 확인해 달라는 메시지가 출력된다.

 

로그인을 성공하게 되면 화면이 전환되는데, 사용자의 아이디가 표시되도록 했다.

 

 

 

 

 

• 로그인 성공 화면

 

 

 

 

 

---

 

 

 

 

3. LoginView.vue

<template> 코드 

<div class="login-container">
      <div class="id-box">
        <p>ෆ ID </p>
        <input v-model="userId" @input="userId" type="text" name="userId" placeholder="id"/>
      </div>
      <div class="pw-box">
        <p>ෆ PW </p>
        <input v-model="pw" type="password" name="password" placeholder="password"/>
      </div>
        <button class="login-text" @click="login"> SIGN IN </button>
</div>

아이디와 패스워드를 입력할 수 있는 칸을 만들었다. 코드에서 아이디와 패스워드에 v-model을 정의했다. v-model은 양방향 바인딩으로 입력창 값이 바뀌면 데이터가 자동으로 업데이트되고, 반대로 데이터가 바뀌면 화면의 입력값도 자동으로 바뀐다.

 

<script> 코드

  name: 'LoginView',
  data() {
    return {
      userId: "",
      pw: ""
    };
  },

v-model을 쓴 아이디와 패스워드는 input과 연결되고 입력창에 값이 바뀌면 data( ) 값이 자동으로 바뀐다.

 

/* 후에 코드가 수정되었습니다.(로그인 성공 후 화면 코드가 바뀜) */

methods: {
    async login() {
    /* 로그인 성공 코드 */
      try {
        /* 최신 데이터를 해당 경로로 보내기 */
        const res = await axios.post("http://localhost:8080/api/login", {
          /* 보낼 데이터 */
          userId: this.userId,
          pw: this.pw
        });
        /* 로그인 성공 메시지 */
        alert("로그인되었습니다.");
        /* userId를 잠시 저장 */
        localStorage.setItem("displayName", this.userId);
        /* 로그인 성공하면 path에 적힌 경로로 넘김, query에 적은 데이터와 함께 */
        this.$router.push({
          path: "/customer-view",
          query: { userId: this.userId }
        });
      } catch (e) { /* 로그인 실패 코드 */
        alert(e.response.data); /* 실패 원인에 맞는 오류메시지 */
      }
    }
  }

spring으로 아이디와 패스워드를 보내 로직을 처리하여 로그인이 되도록 만들 것이다. 그래서 post로 해당 경로에 가장 최신값인 userId와 pw를 보냈다. 최신값이 올 수 있는 이유는 v-model을 썼기 때문!

try에는 로그인이 성공되기 위한 코드와 성공 이후에 대한 코드를 적는다. catch는 실패한 경우에 대한 코드를 적는다고 보면 된다. 로그인에 성공하게 되면 "로그인되었습니다."가 alert 되고, 로그인이 되면 보여줄 페이지를 적었다. 이 부분은 후에 서술하겠다.

로그인에 실패한 경우 왜 실패했는지에 대한 간단한 메시지를 spring에게 받을 것이다. 그래서 response.data라고 되어있다. 응답으로 온 메시지를 그대로 출력한다.

자세한 코드는 git에 있으니 확인해 보세요! +) 참고로 Git엔 카카오 로그인이랑 같이 되어있어서 여기에 올린 코드까지가 로그인 관련이고 그 밑에 있는 코드는 카카오 간편 로그인 코드입니다.

 

 

 

 

---

 

 

 

 

4. LoginRequest.class (Spring)

• DTO: vue에서 받아온 데이터를 이곳에서 받아둠

@Getter
@Setter
@ToString(exclude="pw")
public class LoginRequest {
    private String userId;
    @JsonProperty(access = JsonProperty.Access.WRITE_ONLY)
    private String pw;
}

스프링으로 돌아가서 로그인 로직을 처리할 것이다. LoginRequest는 vue로 받은 데이터를 받는 클래스라고 생각하면 된다. 회원가입에서 하지 않았던 보안을 아주 살짝 처리해 봤다.

먼저 @ToString(exclude="pw")에 대해 설명하겠다. 만약 사용자가 로그인이 되는지 확인하고 싶다. 그러면 개발자는 제대로 돌아가는지 확인하기 위해 로그를 찍어볼 것이다. 그냥 @ToString만 설정해 두면 모든 필드가 다 찍혀 비밀번호가 노출되는 보안 문제가 발생한다. 그래서 exclude를 이용해 pw인 패스워드는 문자열에 포함되지 않도록 설정했다. 

@JsonProperty는 Jackson이 JSON과 객체로(혹은 그 반대로) 변환할 때 pw 필드는 입력만 허용하고 출력은 포함하지 않도록 설정한 것이다. 로그인 로직을 처리하기 위해  vue에서 pw를 받아올 것이다. 그러나 실수로 컨트롤러가 DTO를 반환하게 된다면(받아온 것과 반대로 vue로 정보를 보내게 된다면) 해당 어노테이션 설정으로 인해 pw는 알아서 빠지게 되는 것이다.

 

 

 

 

---

 

 

 

 

5. CheckLogin.class (Spring)

• 아이디와 비밀번호가 null, 공백, 띄어쓰기만 있는 경우 사용자에게 띄울 메시지

public class CheckLogin {

    public static String checkId(String userId) {
        if(userId == null || userId.isBlank()) {
            return "아이디를 입력해주세요.";
        }
        return "ok";
    }

    public static String checkPw(String pw) {
        if(pw == null || pw.isBlank()) {
            return "비밀번호를 입력해주세요.";
        }
        return "ok";
    }
}

회원가입에서 적었던 코드 중 필요한 부분만 가져왔다. 로그인 화면에서 아이디와 비밀번호 입력창에 값이 적혀있지 않으면, 해당 메시지를 리턴하도록 했고, 문제가 없으면 ok가 리턴되도록 했다.

 

 

 

 

---

 

 

 

 

6. MemberRepository.interface (Spring)

• 레포지토리로 아이디를 찾아 반환하는 곳

public interface MemberRepository extends JpaRepository<Member, Long> {

    //이메일 아이디 중복 체크 -> 회원가입 부분
    boolean existsByUserId(String userId);
    boolean existsByEmail (String email);

    // @@ userId 레포지토리에서 찾기 @@
    Optional<Member> findByUserId(String userId);
}

사용자가 로그인에 입력한 아이디를 가지고 해당 아이디가 있는지 찾는다. 여기서 Optional이란 타입을 사용했는데, 그 이유는 아이디가 없을 경우 null 예외가 생기는 걸 방지하고자 사용했다. Optional <T>는 null이 올 수 있는 값을 감싸는 Wrapper 클래스로, 참조하더라도 NPE(Null Pointer Exception)가 발생하지 않도록 도와준다.

<Member>가 Optional에 같이 적혀있는 이유는 extends JpaRepository <Member, Long>을 보면 알 수 있다. 회원가입을 만들면서 레포지토리와 연결할 클래스를 만들었는데 그 클래스 이름이 Member였다. 그래서 Member를 적어둔 것이다. (Member 클래스를 통해 레포지토리에 저장, 조회를 한다.) Optional<Member>는 Member 타입 값이 들어있을 수도 있고 아닐 수도 있다는 뜻이다.

findByUserId는 Spring Data JPA의 메서드 이름 기반 쿼리라는 것으로 엔티티 필드 이름을 해석해서 JPQL을 만들어 실행해 준다. 그냥 쉽게 설명해서 규칙에 따라 이름을 설정하면 Spring Data JPA라는 애가 규칙에 맞춰 이름을 해석해 메서드를 만들어준다고 생각하면 될 것 같다. 지금은 findByUserId니까, SELECT m FROM Member m WHERE m.userId = :id 이런 쿼리를 만들어질 것이다.(아마도?) 아주 간편하다!

 

 

 

---

 

 

 

7. MemberService.class (Spring)

• 레포지토리에 있는 메서드를 사용하기 위한 클래스, 패스워드 매치 확인하는 곳

public class MemberService {

    //의존성 주입
    @Autowired
    private MemberRepository memberRepository;
    @Autowired
    private PasswordEncoder passwordEncoder;

    //아이디, 이메일 중복 체크 -> 회원가입
    public Boolean existByUserId (String userId) {
        return memberRepository.existsByUserId(userId);
    }

    public Boolean existByEmail (String email) {
        return memberRepository.existsByEmail(email);
    }

    //회원가입시, 패스워드 암호화 -> 회원가입
    public Member save(Member member) {
        member.setPw(passwordEncoder.encode(member.getPw()));
        return memberRepository.save(member);
    }

    // @@ 로그인 아이디 있는지 확인하고, 암호화된 비밀번호 비교하기 @@    
    public boolean validateMember(LoginRequest loginRequest) {
        return memberRepository.findByUserId(loginRequest.getUserId())
                .map(member -> passwordEncoder.matches(loginRequest.getPw(), member.getPw()))
                .orElse(false);
    }

}

LoginRequest 필드(아이디와 패스워드)를 모조리 들고 왔다. 아이디가 있는지, 있다면 아이디와 비밀번호를 매치해서 맞는지 확인할 것이다. 아이디와 비밀번호가 맞으면 true, 틀리면 false를 반환할 거라 반환타입은 boolean이 된다.

memberRepository.findByUserId(loginRequest.getUserId()) 이 부분을 살펴보면, loginRequest에서 userId 필드를 가져와 memberRepository에 있는 findByUserId 메서드에 넣어라 라는 말이 된다. 그리고 LoginRequest 필드를 들고 온 이유는 사용자가 입력한 아이디와 패스워드를 꺼내서 사용하기 위함이다. findByUserId에서 Optional<Member>로 돌려받도록 했다. 그래서 사용자가 있으면 Optional.of(member)가 올 테고 없다면 Optional.empty( )가 오게 된다.

.map(member -> passwordEncoder.matches(loginRequest.getPw(), member.getPw())) 이 부분을 살펴보자. 여기 코드가 실행될 때는 값이 있을 경우가 된다. 값이 있을 때 실행되는 이유는 map에 있다. Optional에서 체이닝이란 건데, map. filter, flatMap, orElse 같은 연산을 연결해서 값이 있을 때 순서대로 처리하고, 없으면 빠져나오는 패턴이다. loginRequest에서 사용자가 로그인 창에 입력한 패스워드를 받아오고, member를 통해 원래 저장되어 있던 비밀번호를 가져온다. 현재 프로젝트에서 spring security를 이용해 passwordEncoder를 해서 비밀번호를 암호화시킨 채 저장했다. 그래서 둘이 비교할 때도 passwordEncoder.matches를 해줘야 한다. 사용자가 입력한 평문 비밀번호와 DB의 해시된 비밀번호를 비교해 boolean을 돌려준다.

.orElse(false);는 아이디가 없을 경우 false를 반환한다. 로그인 컨트롤러에서 로그인을 시도하게 되면 MemberService에서 boolean 값으로 받아오게 될 것이다.

 

 

 

---

 

 

 

 

8. CheckLogin.class (Spring)

• 로그인 컨트롤러, 방금까지 만든 클래스와 코드의 결과를 이곳에서 최종적으로 처리 후 vue로 응답

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class LoginController {
   
    // 의존성 주입
    @Autowired
    private MemberService memberService;

    // login 경로로 오면 login 메서드 실행
    @PostMapping("/login")
    // 반환타입은 ResponseEntity<String>이고 @RequestBody로 요청 받아옴
    public ResponseEntity<String> login(@RequestBody LoginRequest loginRequest) {

        //loginRequest에서 id와 pw를 꺼내서 check하기.
        String idCheckResult = CheckLogin.checkId(loginRequest.getUserId());
        if (!"ok".equals(idCheckResult)) { //ok가 아니면
            //메시지 보내기, checkId 메서드에서 반환한 텍스트가 이곳에 바디로 실린다.
            return ResponseEntity.badRequest().body(idCheckResult);
        }

        String pwCheckResult = CheckLogin.checkPw(loginRequest.getPw());
        if (!"ok".equals(pwCheckResult)) {
            return ResponseEntity.badRequest().body(pwCheckResult);
        }

        //loginRequest에 있는 필드를 validateMember 메서드로 보냄
        boolean validated = memberService.validateMember(loginRequest);
        if (!validated) { //validated가 아니면 해당 메시지 보냄
            return ResponseEntity.badRequest().body("아이디와 비밀번호를 다시 확인해주세요.");
        }
        
        // 괜찮으면 ok 보냄
        return ResponseEntity.ok("ok");
    }
}

상태 코드와 함께 내용을 보내기 위해, login메서드의 반환타입은 ResponseEntity<String>이 된다. 여기서 return 코드를 보면 ResponseEntity가 붙는다. 그리고 그 뒤에 badRequest 혹은 ok가 따라온다. 이 badRequest와 ok가 상태 코드를 나타낸다. ok는 보통 200을 의미하고, badRequest는 보통 400을 의미한다. body 괄호 안에 문구를 적었다. 각 오류에 맞춰 사용자는 메시지를 받게 된다. vue에서 적은 alert(e.response.data); 코드가 보여주는 역할을 한다. 

사용자가 아이디와 패스워드를 입력하면 컨트롤러에 도착해서 순서대로 확인한다. 만약 입력한 값이 없는 상태에서 로그인 버튼을 누르면 "아이디를 입력해 주세요"와 같은 메시지가 출력된다. 만약 값이 들어왔다면 MemberService 클래스에 있던 validateMember 메서드를 작동시킨다. 아까 validateMember는 아이디가 있는지 확인하고, 있으면 패스워드를 비교하여 그 값을 boolean으로 반환한다고 했다. 그래서 boolean validated라고 되어있는 이유가 반환값이 boolean이라서 그렇다. 반환된 값(true 혹은 false)을 validated에 보관하고 그 값이 false이면 "아이디와 비밀번호를 다시 확인해 주세요" 메시지를 badRequest 상태 코드와 함께 보낸다. 그리고 true이면 ok 상태 코드와 함께 "ok"라는 메시지가 보내진다.

 

 

+) 참고로 보안상 메시지는 모호하게 적는게 좋다. 아이디, 비밀번호 중 어떤게 틀렸는지 알려주면 해커가 그 부분만 열심히 풀면 되니까..!
+) 그리고 로그인 실패는 401 상태 코드를 쓰는게 맞다고 한다. 401은 Unauthorized라고 사용자 이름, 비밀번호, 또는 API 키 등 입력한 인증 정보가 잘못되었을 때 발생하기 때문에 그렇다고 한다.

return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
    .body("아이디 또는 비밀번호가 올바르지 않습니다.");

 

 

- 필요한 개념은 이곳에

'🌷 Spring/개념' 카테고리의 글 목록

 

 

 

 

로그인 성공 화면은 다음 포스팅에서...