코코아톡 클론코딩(로그인 폼 만들기)
1. 아이디비밀번호 관리가 필요 없음 2. 코드 짤 것이 없음 settings developer settings oauth ap url쪽에 현재 개발 중인 url을 가져다가 써줍니다. 이때, 해당 url 이 이미 있다면다른 어플을 만들때 사용했다든가 그걸 그대로 사용해주시기 바랍니다야 에러를 만나지 않을 수 있음 만들면 나오는 클라이언트ID와 비밀번호를 갖고 있어야 유저 정보를 달라고 요청이 가능합니다.
Contents
input 창을 꾸며보자.
앞서서도 했지만 한줄에 정렬을 한뒤에 flexdirection을 이용해서 축을 바꿔서 정렬해줄 것입니다. loginform display flex flexdirection column margin 0px 30px
이렇게 사용하게 되면 모두 한줄씩 총 4줄로 정렬이 됩니다. adding 같은 경우에는 조금 전에 margin과 비슷한 원리로 활성화되는 것 같다. bordernone을 주며 테두리를 모두 지웠지만 borderbottom을 이용해서 하단에만 테두리를 만드는? 업무를 했다.
마지막으로 transitio은 만화 효과라 해야하나? 저번 주에 배웠던 부분을 그냥 넣었습니다.
FailureHandler
성공을 다뤘다면 이번엔 실패를 다뤄보도록 하자 인증을 실패했다는 전제입니다.
이렇게 만약 로그인에 실패를 했다면 SimpleUrlAuthenticationFailureHandler를 상속받아 실패 메서드를 다뤘고 응답을 꾸며서 보냈다. 실패의 메소드 자체는 아주 간단했다. 그냥 서버에서 실패한 내용을 클라이언트에게 어떻게 전달할 것인가가 필요한 내용이었다.
지금까지 클래스의 단위로 잘 만들어둔 것 같다. 그럼 이걸 어떻게 합쳐서 시큐리티에 적용할 수 있을까? 이런 식으로 진행하게 됩니다. 여기서 로그인에 대한 얘기를 하게 되지만 하지만 우리는 filter에 Manager가 있고 성공과 실패 handler 가 있습니다. 그리고 저희들이 적용할 필터를 객체로 불러주어서 Bean으로 등록해주어야 합니다. 매니저는 이런 식으로 등록하게 됩니다. Manager를 Bean으로 등록을 하게 되고 매니저 안에 Provider 설정을 이렇게 해줄 수도 있습니다.
시큐리티에서 사용하는 기본적으로 로그인을 담당하는 provider인 Dao 프로바이더를 불러와서 set을 통해 사용하는 passwordEncoder를 정해주고, UserDetailsService를 저희들이 만든 Custom으로 설정해 주었다.
DB adapter 설치
npm install nextauthmongodbadapterDB adapter 세팅 nextauthmongodbadapter 에서 가져올 수 있어요. MongoDBAdapter 의 파라미터에는 몽고DB를 연결해줬던 그 파일을 넣어주면 됩니다. 혹, 몽고DB가 싫다면 다른 DB Adapter 를 찾아서 사용해주면 됩니다. ex. redis 는 하드가 아닌 램에 저장해주시기 바랍니다서 빠른 속도가 가능함, 세션 구현할 때 많이 사용됨 위처럼 세팅까지 마치고 로그인 해보시면 몽고디비에 해당 db와 컬렉션이 생긴다.
accounts 와 users 의 정보는 거의 유사하나 분리된 이유는, 일 유저가 여러 계정여러 방식의 회원가입으로을 가질 수 있기 때문입니다.
LoginSuccessHandler
로그인이 인증된 코드를 들고 Authentication이 Context에 저장되었습니다. 그럼 이제 위에서 말했던 Successhandler 가 실행되어야 합니다.
여기서 Service에서 만든 토큰을 전달하게 되지만 하지만 accessToken과 RefreshToken을 만들어서 전달합니다. 이때 extractUsername을 통해 인증된 Authentication 객체에서 UserDetails 객체로 옮겨 담아 거기에 있는 내용을 빼낸다.
그래서 그곳의 아이디를 가져와서 아이디를 accessToken에 넣어둔다. 그리고 마지막으로 회원이 탈퇴한 회원인지 확인하는 조건문을 넣게 되며 탈퇴한 회원도 다뤄보고자 했다.
redirect Page
app login kakao page.tsx import Redirect from ..componentsSocialRedirectRedirectexport default function kakao return
app component Social Redirect Redirect.tsx 잠시만 기다려주세요. 위에서 로그인을 하면 다음과 같이, url에 있는 code 값을 읽어와 사용할 수 있어요.
이제 이 코드를 서버에 전달해주면 끝이 난다.
자주 묻는 질문
input 창을 꾸며보자.
앞서서도 했지만 한줄에 정렬을 한뒤에 flexdirection을 이용해서 축을 바꿔서 정렬해줄 것입니다. 더 알고싶으시면 본문을 클릭해주세요.
FailureHandler
성공을 다뤘다면 이번엔 실패를 다뤄보도록 하자 인증을 실패했다는 전제입니다. 자세한 내용은 본문을 참고 해주시기 바랍니다.
DB adapter 설치
npm install nextauthmongodbadapterDB adapter 세팅 nextauthmongodbadapter 에서 가져올 수 있어요. 궁금한 사항은 본문을 참고하시기 바랍니다.