기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 34

회원가입과 로그인, 로그아웃 기능은 구현했으니, 이제는 비밀번호 변경과 회원탈퇴기능을 구현한다.
member 프로젝트의 MemberService 클래스에 탈퇴 메서드를 추가한다.
@Service
@Transactional
@RequiredArgsConstructor
public class MemberService {
    private final MemberRepository repository;
    
    public Member save(Member member) {
        return repository.save(member);
    }

    public void withdraw(long id) {
        repository.deleteById(id);
    }

}

withdraw 메서드는 파라미터로 회원 아이디를 입력받아서 repository의 deleteById 메서드를 호출한다.

MemberController 클래스에서 비밀번호 변경, 회원탈퇴 endpoint를 작성한다.
@RestController
@RequestMapping("/members")
@RequiredArgsConstructor
public class MemberController {
    ...
    
    @PutMapping("/{id}")
    ResponseEntity<?> changeMemberPassword(@PathVariable final long id, @RequestBody final Member memberRequest) throws URISyntaxException {
        Member updatedMember = repository.findById(id)
                .map(member -> {
                    member.setPassword(memberRequest.getPassword());
                    return service.save(member);
                })
                .orElseGet(() -> {
                    memberRequest.setId(id);
                    return service.save(memberRequest);
                });
        Resource<Member> resource = assembler.toResource(updatedMember);
        return ResponseEntity.created(new URI(resource.getId().expand().getHref()))
                .body(resource);
    }
    
    @DeleteMapping("/{id}")
    ResponseEntity<?> withdrawal(@PathVariable final long id) {
        service.withdraw(id);
        return ResponseEntity.noContent().build();
    }
    
}

changeMemberPassword 메서드는 /members/{id} URL에 매핑된다. id는 Member클래스의 식별자이다. 요청본문에는 변경요청되는 Member 클래스 타입의 데이터가 바인딩되는데 비밀번호가 변경될 경우 password 필드가 전달된다.
메서드 내부를 보면 repository 의 findById 메서드를 이용해서 단일 데이터를 가져오고, null이 아닐경우 요청본문에서 전달된 password 값을 반영한다. null일 경우 식별자를 전달해서 새로운 Member를 등록한다.

withdrawal 메서드는 /members/{id} URL에 매핑되며, id 요청변수는 Member클래스의 식별자이다.
MemberService클래스의 withdraw 메서드를 호출하고 No Content HttpStatus를 응답한다.

web 프로젝트에서는 Member API를 호출하는 MemberRestService 클래스에 비밀번호 변경, 회원탈퇴 API를 호출하는 부분을 추가한다.
@Service
@RequiredArgsConstructor
@Slf4j
public class MemberRestService {
    ...
    
    public void changePassword(MemberRequest memberRequest) {
        memberRestTemplate.put("/members/{id}", memberRequest, memberRequest.getId());
    }
    
    public void withdraw(long id) {
        memberRestTemplate.delete("/members/{id}", id);
    }

}

changePassword 메서드는 Member API를 호출하는데, 파라미터로 MemberRequest 객체를 전달한다.
restTemplate 의 put 메서드를 호출하는데, /members/{id} URL을 첫번째 파라미터로 전달한다. 두번째 파라미터는 요청본문에 해당하고, memberRequest 객체를 그대로 전달한다. 세번째 파라미터는 PathVariables 로 URL의 {id}에 해당하는 memberRequest 객체의 id 접근자를 호출해서 회원의 식별 아이디를 전달한다.

withdraw 메서드는 회원탈퇴 API를 호출한다. delete 방식으로 호출하며 /members/{id} 를 요청URL로 하고, 요청 변수에 id값을 전달한다.

MemberController 클래스에서는 비밀번호 변경 폼페이지와 변경처리, 회원탈퇴 폼 페이지와 탈퇴완료 안내페이지를 작성한다.
@Controller
@RequiredArgsConstructor
public class MemberController {
    ...
    @GetMapping("/changePassword")
    public String changePassword(MemberRequest memberRequest, Model model) {
        model.addAttribute("memberRequest", memberRequest);
        return "members/changePassword";
    }
    
    @PostMapping("/changePassword")
    public String changePasswordProcessing(@AuthenticationPrincipal Member member, 
            @ModelAttribute @Valid MemberRequest memberRequest, Errors errors, RedirectAttributes redirectAttributes) {
        if(errors.hasErrors()) {
            return "members/changePassword";
        }
        if(memberRequest.getCurrentPassword().equals(memberRequest.getPassword())) {
            errors.rejectValue("password", "field.duplicated.member.password");
            return "members/changePassword";
        }
        if(!passwordEncoder.matches(memberRequest.getCurrentPassword(), member.getPassword())) {
            errors.rejectValue("currentPassword", "field.not_same.member.password");
            return "members/changePassword";
        }
        service.changePassword(memberRequest);
        
        redirectAttributes.addFlashAttribute("changePasswordDone", true);
        return "redirect:/changePassword";
    }
    
    @GetMapping("/withdraw")
    public String withdraw(MemberRequest memberRequest, Model model) {
        model.addAttribute("memberRequest", memberRequest);
        return "members/withdraw";
    }
    
    @PostMapping("/withdraw")
    public String withdrawProcessing(@AuthenticationPrincipal Member member, 
            @ModelAttribute @Valid MemberRequest memberRequest, Errors errors) {
        if(errors.hasErrors()) {
            return "members/withdraw";
        }
        if(!passwordEncoder.matches(memberRequest.getPassword(), member.getPassword())) {
            errors.rejectValue("password", "field.not_same.member.password");
            return "members/withdraw";
        }
        
        service.withdraw(member.getId());
        SecurityContextHolder.clearContext();
        return "members/withdrawDone";
    }
    
}

changePassword 메서드는 Get방식, Post방식 두개의 메서드로 매핑되며 URL은 /changePassword 이다. 폼페이지 메서드는 MemberRequest를 모델에 담아서 뷰로 보내는 역할만 한다.
changePasswordProcessing 메서드는 @AuthenticationPrincipal 애너테이션으로 현재 스레드에서 인증된 사용자 정보를 가져온다. 메서드 내부에서는 폼 파라미터로 전달되는 데이터의 Validation 결과를 확인해서 에러가 있으면 폼페이지로 포워드한다.

커스텀 인증절차로 currentPassword 파라미터와 password 파라미터가 둘다 동일하다면, 기존 패스워드와 변경할 새로운 패스워드가 동일함으로 폼페이지로 포워딩한다.

두번째 검증절차로 현재 비밀번호로 입력된 파라미터 currentPassword 가 현재 인증된 정보의 비밀번호와 일치하는지를 확인해서 일치하지 않으면 검증을 통과하지 못한것이므로 폼페이지로 포워딩한다.

앞의 검증절차를 다 통과하면 memberRestService 클래스의 changePassword 메서드를 호출해서 비밀번호 변경 API를 호출하고 FlashAttribute 값에 비밀번호 변경 완료 flag를 추가해서 changePassword 페이지로 리다이렉트 시킨다.

withdraw 메서드는 Get방식으로 URL은 /withdraw 이다.
해당 메서드는 회원탈퇴 View 페이지를 보여준다. Validation을 위해서 Model에 MemberRequest 객체를 추가한다.

withdrawProcessing 메서드는 Post방식으로 /withdraw URL에 매핑된다.
해당 메서드는 회원탈퇴 처리를 하는데, 현재 인증정보의 비밀번호와 폼데이터로 전달한 password 파라미터값이 일치할 경우 회원탈퇴 API를 호출한다.
회원탈퇴 처리가 완료되면 SecurityContextHolder 클래스의 clearContext 메서드를 호출해서 현재 스레드에서 인증된 정보를 clear한다.
members/withdrawDone 뷰페이지로 포워드하면 회원탈퇴 완료 메시지를 보여주고 /fridges/me 페이지를 호출한다.

이전글: 냉장고 가계부 프로젝트 33
다음글: 냉장고 가계부 프로젝트 35

이 블로그의 인기 게시물

Dolphin 3

100자 이내의 짧은 글을 쓸 수 있는 게시판 제공. Dolphin Project에서 가장 메인 서비스는 예적금 시뮬레이터이므로, 다른 기능 구현은 차후로 미뤄뒀지만, 사용자와 소통할 수 있는 최소한의 기능은 제공하는게 맞다는 생각이 들어 아주 단순한 게시판 기능을 제공합니다. 사용자가 글을 쓰려면 로그인을 먼저 해야합니다. 글을 등록 후 삭제할 때 글 작성자를 식별할 수 있어야 하기 때문입니다. 게시판은 Dolphin Frontend Main 페이지에 자리잡았습니다. 사용자가 가장 먼저 만나게 되는 웹페이지이므로 적당하다고 생각합니다. 다음은 로그인을 하기 전 사용자가 볼 수 있는 메인 페이지입니다. 글 상단에는 작성일(MMM-dd-yyyy)과 작성자 고유번호(#numbers)가 노출됩니다. Dolphin 은 네이버 로그인을 사용하기 때문에, 사용자를 식별할 수 있는 정보는 저 고유번호가 됩니다. 하단에는 글 내용이 자리잡습니다. 스크린샷에서는 Hello, world!! 라는 문구가 보이네요. 글은 최대 100자까지 허용합니다. 버튼 두개(Newer, Older) 는 페이징 버튼인데, Newer는 최근페이지로 이동을 하며, Older는 지나간 글을 보는 페이징버튼입니다. 기본 페이지 사이즈는 20개입니다. 오른쪽으로 보이는 글 작성 폼은 현재 로그인 하기 전이므로 textarea 는 disabled 처리되어 있고 Login버튼이 자리잡고 있습니다. 다음은 사용자가 로그인 한 뒤의 메인페이지입니다. 변경된 부분은 사용자 고유번호 뒤에 Remove 버튼이 나타났습니다. 해당 글 작성자가 로그인한 사용자일 경우에만 보이게 됩니다. 오른쪽 글 작성 폼도 이제 활성화 되었습니다. 아주 단순한 Textarea 창과 Submit 버튼이 자리잡고 있습니다. 다음은 작성자가 아닌 다른 사용자가 로그인한 경우 입니다. 사용자 고유번호(#54097272) 옆에 Remove 버튼이...

Dolphin 2

별도의 회원가입 없이 소셜 로그인 기능 제공으로 간편한 로그인 가능. Dolphin 프론트엔드는 회원가입 절차가 따로 없고, 간단하게 소셜 로그인 기능을 제공함으로써 회원가입, 인증절차를 생략했습니다. 우선, 간단하게 국내에서 잘 알려진 네이버의 API를 사용합니다. 네이버 개발자센터 웹사이트 에서 네이버 아이디로 로그인 기능을 살펴봅니다. 개발 문서를 자세히 살펴보고 API 신청을 합니다. 애플리케이션의 이름을 정하고 필요한 정보를 필수/선택에 체크합니다. 밑으로 내려보면 로그인 API 서비스 환경 부분에서 환경 추가 셀렉트박스에서 PC 웹을 선택하면 다음과 같은 입력폼이 나타납니다. 서비스 URL은 내 웹애플리케이션의 URL이 될 예정입니다. 지금은 개발상태이므로 localhost를 입력했습니다. Callback URL은 네이버 OAuth 인증 url로 호출하면, 인증절차 후 네이버에서 리다이렉트해줄 url을 뜻합니다. 저는 /naver/login 으로 했습니다. 등록이 완료되면 client-id와 client-secret 값을 제공해줍니다. 이 값을 이용해서 인증처리를 할 수 있습니다. spring.io 웹사이트의 튜토리얼 문서를 보면 Facebook 소셜 로그인 기능에 대한 설명이 자세하게 나와있습니다. 이 부분을 참고합니다. Spring Boot and OAuth2 pom.xml 파일에 의존성을 추가하고 Application 클래스에 @EnableOAuth2Sso 애너테이션을 선언합니다. 튜토리얼대로 application.yaml 파일(application.properties)에 설정 정보를 입력합니다. clientId, clientSecret 값은 네이버 개발자센터에서 받은 대로 입력합니다. accessTokenUri는 네이버의 경우 https://nid.naver.com/oauth2.0/token 입니다. userAuthorizationUri는 네이버의 경우 https://ni...

Dolphin 1

금융감독원 OPEN API를 사용하여 데이터 수집 금융감독원 금융상품통합비교공시 사이트에서 제공하는 OPEN API 를 사용합니다. 먼저, API 키를 신청합니다. https://finlife.fss.or.kr/PageLink.do?link=openapi/certification&menuId=2000119  로 접속합니다. 약관에 동의하고 본인인증 후, 신상정보를 넘기면 바로 API 키를 받을 수 있습니다. 상세 및 테스트 페이지를 들어가보면 요청 파라미터와 응답 API 형태를 확인할 수 있습니다. 요청은 다음과 같습니다. 읽어보면 서비스 명에 따라 url이 달라지는 부분을 제외하면 요청 URL은 크게 달라지지 않습니다. 파라미터에 인증키, 권역코드, 페이지번호를 전달하면 됩니다. 응답부분은 서비스마다 다르지만 공통 응답 형태는 다음과 같습니다. 에러코드, 에러메시지, 전체 개수, 전체 페이지, 현재 페이지 번호 입니다. 예금상품 조회 서비스나 적금상품 조회 서비스의 경우 공통적으로 금융회사 코드와 이름을 전달해주는데 해당 금융회사의 상세한 정보를 보려면 금융회사 조회 서비스도 호출하는게 나중에 좋을것 같습니다. Spring으로 HTTP 통신을 위해서 Apache HttpComponent 라이브러리를 사용합니다. 메이븐에 다음과 같이 의존성을 추가합니다. <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> </dependency> 다음은 API를 호출하는 간단한 소스코드 조각입니다. CloseableHttpClient httpClient = HttpClients.createDefault(); URI uri = new URIBuilder() .setScheme("http") .setHos...