Skip to content

WinWin‐login

Jump to bottom
jung-so-e edited this page Aug 4, 2023 · 12 revisions

📌Login

✔️로그인

  • 로그인 시 Ajax를 사용하여 비동기 방식으로 DB에 저장된 ID와 PW를 가져와 사용자가 입력한 값과 비교해서 값이 일치할 때 로그인 허용
  • 로그인 성공 시 Session 생성 및 메인 페이지로 이동

🖥️ code

UserController.java 
@Controller
@RequiredArgsConstructor
@RequestMapping("/main/*")
public class MainController {

    private final UserService userService;
    private final StudyService studyService;

    @PostMapping("/main")
    public RedirectView header(UserDto userDto, @RequestParam("subNumber") List<Integer> subNumbers,  Integer certificationNumber){
        userService.userRegister(userDto);

        CategoryBridgeVo categoryBridgeVo = new CategoryBridgeVo();
        categoryBridgeVo.setUserNumber(userDto.getUserNumber());

       
        for(int i : subNumbers){
            categoryBridgeVo.setSubNumber(i);
            userService.categoryBridge(categoryBridgeVo);
        }


        if(userDto.getUserPosition().equals("mentor")){
            MentorDto mentorDto = new MentorDto();
            mentorDto.setUserNumber(userDto.getUserNumber());
            mentorDto.setCertificationNumber(certificationNumber.intValue());

            userService.joinMentor(mentorDto);
        }



        return new RedirectView("/main/main");
    }
UserService.java 
    public Long findUserNumber(String userId, String userPassword){
        if(userId == null || userPassword == null){throw new IllegalArgumentException("아이디, 패스워드 xxxxxxxxxxxx");}

        return Optional.ofNullable(userMapper.login(userId, userPassword))
                .orElseThrow(()->{throw new IllegalArgumentException("존재하지 않는 회원");});
    }
UserMapper.xml 
    
<select id="login" resultType="long">
 SELECT USER_NUMBER, USER_WING
 FROM WW_USER
 WHERE USER_ID = #{userId} AND USER_PASSWORD = #{userPassword}
</select>
login.js 
// 로그인 처리
$('.login-end').on('click', function (){
    console.log('login!!!');

    $.ajax({
        url : '/users/login',
        type : 'post',
        data : JSON.stringify({userId : $('#login-id').val() , userPassword: $('#login-password').val()}),
        contentType : "application/json; charset=utf-8",
        async : false,
        success: function (result){
            $(".modal-container").addClass("none");
            $('body').css('overflow', 'auto');
            modalSetUp();

            if(result == 0){
                alert("잘못된 회원 정보입니다.");
            }else if(result == 3){
                alert("영구정지 처리된 회원입니다.");
            }else{
                let tmp = window.location.href;
                window.location.href = tmp;
            }
        }
    })
    function modalSetUp(){
        $('.modal-wrap>div').addClass('none');
        $('.modal-wrap>button').addClass('none');
        $('.login-box').removeClass('none');
        $('.login-end').removeClass('none');
        $('.login-box').removeClass('disappear');
        $current = $('.login-box');
        $next = null;
        $('.form-reset')[0].reset();
    }
});

📸 view

Image

✔️ID/PW 찾기

  • 회원이 입력한 번호로 인증 번호 6자리를 전송해 값이 맞는 지 비교 후 DB에 등록된 회원의 정보를 가져옴

🖥️ code

UserRestController.java 
    @PostMapping("/findId")
    public String findId(String authNumber, String userName, String phoneNumber, HttpServletRequest req){
        String sessionNumber = (String)req.getSession().getAttribute("authNumber");
        req.getSession().setMaxInactiveInterval(3*60);
        String userId = "일치하는 회원 정보가 없습니다.";

        System.out.println("authNumber : " + authNumber);
        System.out.println("sessionNumber : " + sessionNumber );
        System.out.println(userName);
        System.out.println(phoneNumber);

        UserDto userDto = new UserDto();
        userDto.setUserName(userName);
        userDto.setUserPhoneNumber(phoneNumber);

        if(authNumber.equals(sessionNumber)){
            userId = smsService.findID(userDto);
        }

        return userId;
    }
UserService.java 
    //    아이디 찾기
    public String findID(UserDto userDto){

        String findUserId = userMapper.findId(userDto);

        return findUserId;
    }

    //    비밀번호 찾기
    public String findPw(UserDto userDto){

        String findUserPw = userMapper.findPw(userDto);

        return findUserPw;
    }
UserMapper.xml 
    <!-- 아이디 찾기 -->
    <select id="findId" resultType="String">
        SELECT USER_ID
        FROM WW_USER
        WHERE USER_NAME = #{userName} AND USER_PHONE_NUMBER = #{userPhoneNumber}
    </select>

    <!-- 비밀번호 찾기 -->
    <select id="findPw" resultType="String">
        SELECT USER_PASSWORD
        FROM WW_USER
        WHERE USER_ID = #{userId} AND USER_PHONE_NUMBER = #{userPhoneNumber}
    </select>
findIdPw.js 
/* 아이디 찾기 */

$('#find-id-certi-btn').on('click', function (){

    let userName = $('#find-id-user-name').val();
    let phoneNumber = $('#find-id-phone-number').val();

    $.ajax({
        url: "/userSms/v1/send",
        type: "post",
        data: JSON.stringify({phoneNumber : phoneNumber}),
        contentType: "application/json; charset=utf-8",
        success: function (result){
            console.log(result)

            let time = 180;
            let min = '';
            let sec = '';

            timeout = setInterval(function (){
                min = parseInt(time / 60);
                sec = time % 60;
                $('.find-id-timer').text(`${min}분 ${sec}초`);

                time--;

                if(time < 0){
                    clearInterval(timeout);
                    $('.find-id-timer').text('시간초과');
                }
            }, 1000);

        }
    })

});

$('#find-id-check').on('click', function (){
    let inputNumber= $('#find-certi-number').val();
    let userName = $('#find-id-user-name').val();
    let phoneNumber = $('#find-id-phone-number').val();

    $.ajax({
        url : '/userSms/v1/findId',
        type : 'post',
        data : {authNumber : inputNumber, userName : userName, phoneNumber : phoneNumber},
        success : function (result){
            if(result){
                $('#find-msg').text("인증이 완료되었습니다.");
                clearInterval(timeout);
                $('.find-id-timer').text('');
            }else{
                $('#find-msg').text("인증번호가 올바르지 않습니다.");
            }

                $('#result-id').text(result);
        }
    });
});


/*================================================================*/
/* 비밀번호 찾기 */

$('#pind-pw-certi').on('click', function (){

    let userId = $('#find-pw-id').val();
    let phoneNumber = $('#find-pw-phone-number').val();

    $.ajax({
        url: "/userSms/v1/send",
        type: "post",
        data: JSON.stringify({phoneNumber : phoneNumber}),
        contentType: "application/json; charset=utf-8",
        success: function (result){
            console.log(result)

            let time = 180;
            let min = '';
            let sec = '';

            timeout = setInterval(function (){
                min = parseInt(time / 60);
                sec = time % 60;
                $('#find-pw-timer').text(`${min}분 ${sec}초`);

                time--;

                if(time < 0){
                    clearInterval(timeout);
                    $('#find-pw-timer').text('시간초과');
                }
            }, 1000);

        }
    })

});

$('#find-pw-check').on('click', function (){
    let inputNumber= $('#find-certi-number').val();
    let userId = $('#find-pw-id').val();
    let phoneNumber = $('#find-pw-phone-number').val();

    $.ajax({
        url : '/userSms/v1/findPw',
        type : 'post',
        data : {authNumber : inputNumber, userId : userId, phoneNumber : phoneNumber},
        success : function (result){
            if(result){
                $('#find-pw-msg').text("인증이 완료되었습니다.");
                clearInterval(timeout);
                $('#find-pw-timer').text('');
            }else {
                $('#find-pw-msg').text("인증번호가 올바르지 않습니다.");
            }

            $('#result-pw').text(result);
        }
    });
});

📸 view

Image

Clone this wiki locally