[블로그프로젝트] 31. 카카오로그인(2)

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

카카오톡으로 로그인한유저가 개인정보를 변경하려고 하면 나중에 로그인할 때 오류가 생길것이다.

왜냐하면 우리는 coskey로 특정한 비밀번호로 지정해줘서 db에 저장에 저장을 해줬는데 카카오톡으로 로그인한 유저가 

다시 로그인하려고 할 때 비밀번호가 다르게 달라서 에러가 뜨는 경우가 있을 수 있기 때문에 예방하기 위해서 기능을 추가해주자.

 

우선 카카오톡을 통해서 로그인한 유저와 일반유저를 구분하는 값이 필요하기 때문에 추가를 해줘야한다.

User.java로 이동해서 oauth를 추가해준다.

 

UserController에서 처음로그인한 유저일때 자동으로 회원가입을 해주는 메서드에 oauth("kakao")를 추가해준다.

.oauth("kakao")

 

이렇게 하면 카카오로 로그인한 유저라면 oauth에 kakao라고 값이 저장이 되고 사이트에서 회원가입을 진행한 유저라면

oauth에 값이 들어가지 않을 것이다. 

이렇게 차이점을 두어서 사이트에서 가입한 유저라면 이메일과 비밀번호를 수정할 수 있고, 카카오를 통해서 로그인한 유저라면

이메일과 비밀번호를 수정할수 없게 만들어주자

updateForm으로 이동해서 oauth에 값이 없다면(=비어있다면) 비밀번호와 이메일을 수정할 수 있는 칸을 보여주고

그렇지 않으면 아예 띄워주지 않는 방향으로 작업을 진행하면 된다.

 

        <c:if test="${empty principal.user.oauth}">

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" placeholder="Enter Password" name="password">
            </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" value="${principal.user.email}" class="form-control" id="email" placeholder="Enter Email" name="email">
        </div>
        </c:if>

 

xss공격을 방지하기위해서 userService로 이동해서 위와 같은 방법으로 작성해준다. 

        if(persistance.getOauth()==null||persistance.getOauth().equals("")){

            String rawPassword = user.getPassword();
            String encPassword = encoder.encode(rawPassword);
            persistance.setPassword(encPassword);
            persistance.setEmail(user.getEmail());

        }

 

application.yml에서 create로 바꿔서 테이블에서 바뀐값들을 자동으로 쿼리를 날려서 변경해주고 카카오로 로그인해서 정상적으로 작동하는지 확인해보자.

 

카카오로 로그인한 유저가 내정보수정으로 이동해보니 이메일과 비밀번호를 아예 변경할 수 없게 보여주지 않는다.

카카오로그인 유저의 내정보수정

 

사이트에서 회원가입한 유저로 로그인해서 내정보수정으로 가보니 이메일과 비밀번호를 수정할수 있다.

사이트내에서 회원가입한유저

 

db에서 확인해보면 oauth에 kakao라고 값이 잘들어가있는것도 확인할 수 있다.