토이프로젝트 sns 만들어보기 1

토이프로젝트 sns 만들어보기 1

 

현재까지 회원가입과 로그인 페이지를 완성하였다.

 

 

회원가입 페이지

 

회원가입을 하기 위해서 아이디 중복 확인과 이메일 인증을 해야지 회원가입이 가능하게 만들었다,

 

db 테이블은 id, userid는 실재 유저 아이디 , pw는 유저 패스워드로 암호화하여 저장하였다  암호화할 때 BCryptPasswordEncoder 이걸 사요용하였다 그 외의 필드는 이름, 권한, 이메일 만든 날짜를 기입하게 만들었다.

 

회원가입할때

모든칸을 다 채우고 아이디 중복확인을 하여 통과 할경우에만 이메일 인증 번튼이 작동하고 클릭하면 적은 이메일로 인증 번호가 이메일로 온다.

 

아이디 중복 확인 코드 

컨트롤러

	    @GetMapping("/signup/idpass")
	    public String idpass(@RequestParam("userid") String userid) {
	    	System.out.println("아이디중복 컨트롤러");
	    	String pass=managementService.search(userid);
	    	System.out.println(pass);
	    	return pass;
	    	
	    	
	    }

서비스

	//아이디 중복 조회
	public String search(String userid) {
		int value=memberDao.search(userid);
		String result="false";
		System.out.println("결과값" + value);
		if (value<1) {
			result="true";
		}
		return result;
	}

 

dao

    public int search(String userId) {
        String sql = "SELECT COUNT(*) FROM user WHERE userid = ?";
        Integer count = jdbcTemplate.queryForObject(sql, Integer.class,userId);
        System.out.println("조회 실행 완료");

        // count가 null이 아니고 0보다 크면 사용자가 존재함
        if (count != null && count > 0) {
            return 1; // 사용자가 존재함
        } else {
            return 0; // 사용자가 존재하지 않음
        }
    }

 

회원가입 코드

 

컨트롤러

	    //회원가입
	    @PostMapping("/signup/pass")
	    public int signuppass(@RequestBody UserVo userVo) {
	    	System.out.println(userVo.getUserpw());
	    	userVo.setCreatedate(LocalDateTime.now());
	    	userVo.setUserpw(passwordEncoder.encode(userVo.getUserpw()));
	    	int rs=managementService.signUp(userVo);
	    	System.out.println("rs :"+rs);
	    	
	    	return rs;
	    	
	    }

서비스

	//회원가입
	public int signUp(UserVo userVo) {
		return memberDao.insertion(userVo);

	}

dao

	// 회원가입
	public int insertion(UserVo userVo) {
		String sql = "INSERT INTO user (userid, userpw, name,approve, useremail, createdate) VALUES ( ?, ?, ?,'user', ?, ?)";
		int rs=0;
		try {
			jdbcTemplate.update(sql,userVo.getUserid(),
					userVo.getUserpw(),userVo.getName(),userVo.getUseremail(),Timestamp.valueOf(userVo.getCreatedate()));
			rs=1;
		
		}catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
			rs=-1;
		}
		System.out.println(rs);
		
		return rs;
	}

 

 

로그인 페이지

 

로그인에 성공하면 원래는 스프링 시큐리티를 사용하여 유저 인증 절차를 만들 생각이었는데 리액트와 연결해서 사용하다보니 jwt와 같은 방식을 추가로 더 공부해야해서 이번에는 세션방식을 이용해서 유저 인증 절차를 구현하였다.

일단은 서버에서 세션을 만들어 리액트로 전달하여 로컬 스토리지에 저장하여 필요할때 그것을 다시 서버로 전달하는 형식으로 인증 절차를 구현하였다.

 

리액트 로그인 인증 정보 받아오는 코드

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const result = await axios.post("/api/login", {
                userid: id,
                userpw: pw
            });
            console.log("로그인정보");
            console.log(result.data);
            setPass(result)

            localStorage.setItem('id', result.data);

            if(result.data==""){
                alert("아이디 비밀번호를 확인해주세요")
            }
            else{
                navigate("/")
            }

서버로부터 값을 받아오면 id 라는 이름으로 로컬스토리지에 저장하였다.

 

스프링 코드 

	    //로그인
	    @PostMapping("/login")
	    public String login(@RequestBody UserVo loginUser, HttpSession session) {
	        System.out.println("로그인실행");
	        UserVo user = userRepository.findByUserId(loginUser.getUserid());

	        if (user != null && passwordEncoder.matches(loginUser.getUserpw(), user.getUserpw())) {
	            
	        	// 세션 생성
	        	String characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
	    		SecureRandom random = new SecureRandom();
	    		StringBuilder sb = new StringBuilder(8);
	            for (int i = 0; i < 8; i++) {
	                int randomIndex = random.nextInt(characters.length());
	                sb.append(characters.charAt(randomIndex));
	            }
	            session.setAttribute(sb.toString(),user);
	            session.setMaxInactiveInterval(10*60);


	            return sb.toString();
	        } else {

	            return null;
	        }
	    }

이렇게 로그인하면 세션을 만들어 가지고 있다닥

 

다시 리액트에서 인증이 필요한 곳으로 요청을 보낼때 인터셉터 를 이용하여 요청 컨트롤러로 넘어오기전에 미리 확인하여 세션에 그정보가 있다면 참 아니라면 거짓으로 요청 컨트롤러가 참일 경우에만 실행하도록 만들었다.,

public class Authorize implements HandlerInterceptor {
	
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		HttpSession session = request.getSession();
		String num = request.getParameter("id");
		System.out.println(num);
		UserVo user = (UserVo) session.getAttribute(num);
		if(user==null) {
			System.out.println("실패함");
			return false;
		}
		else {
			System.out.println("들어옴");
			return true;
		}
	}
}

 

그리고 위 기능이 동작하도록 하기위한 요청주소를 지정해야한다 아래는 기 요청 주소를 지정한 코드이다.

//인증 필요한 요청 주소 등록하기
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new Authorize())
        			.addPathPatterns("/api/hello")
        			.addPathPatterns("/bbs/upload/file");
 
        
    }

}

 

이렇게 현재까지 회원가입 기능과 로그인 기능 그리고 유저 인증 기능까지 완성하였다.

하면서 로그를 남기는 라이브러리를 공부를 해야겠다 하나하나 찍는게 코드가 더러워지는것 같다.