소셜로그인 with 구글,카카오,네이버 오뜨 20

소셜로그인 with 구글,카카오,네이버 오뜨 20

티스토리가 로그아웃 되어 다시 로그인 하려는데 로그인이 안되는 경우가 있습니다. 티스토리 로그인은 카카오계정과 티스토리계정 둘 중 하나로 할 있을 수 있었으나 둘 다. 안되는 경우 해결 방법을 알려드리겠습니다. 다른 블로그를 찾아보니 로그인이 안되는 것은 크롬 인터넷 설정 문제라면서 인터넷 기록을 삭제하면 로그인이 된다고 합니다. 하지만 저는 이렇게 해도 해결이 안되었습니다. 로그인 오류 경우가 저와 같다면 다음 방법을 따라오시면 됩니다.

1. 티스토리 메인 화면이 위와 같이 보입니다. 우측 상단에 시작하기 를 터치하시면 2번처럼 로그인 화면이 뜹니다.

토근 발급

이제 인가코드를 받았으니 토큰을 발급하는 과정을 거쳐야합니다. 인가코드로 토큰을 만들어서 헤더에 토큰을 담아서 전달해 주면 끝난다. 토큰이 나오기까지의 메소드를 살펴보기 전, 토큰을 만들기 위한 메소드부터 역으로 가보자. 첫번째 토큰을 제작하는 메소드 createToken 21. 없습니다.면 회원가입을 해야합니다. 22. 있다면야 그걸로 가져오면 끝. 3. 카카오에서 정보를 가져와야합니다. 4. 카카오에서 정보를 아무한테나 막 주진 않을텐데? 방금 받아 온 인가코드가 지금 쓰인다.

이렇게 메소드화해서 정리가 되었고, 이를 통해 결과적으로는 JWT를 전달해주는 것입니다.

인증 코드 받기 Request

GET oauthauthorize?clientidRESTAPIKEYredirecturiREDIRECTURIresponsetypecode HTTP1.1Host kauth.kakao.com 최종 로그인 요청 주소 GET httpskauth.kakao.comoauthauthorize?clientid2aef492ccc8fd9af1b188a17a89a355aredirecturihttplocalhost8000authkakaocallbackresponsetypecode 로그인 버튼 생성 후 적용 loginform.js 카카오 로그인을 눌러보시면 로그인 페이지가 뜨고 실제 카카오 계정으로 로그인 하면 다음과 같은 주소가 반환됩니다.

번외 자바스크립트 SDK 사용하기

자바스크립트 SDK를 사용할 경우 자료를 참고하면 됩니다. 나는 처음에 이 방식으로 구현했는데 이렇게 처리할 경우 KakaoTalk이라는 한 단계를 더 거쳐야 하기 때문에 좀 더 간편한 REST API 방식으로 교체하게 되었습니다. 교체하기 전까지의 코드를 조금 남겨봅니다.

index.html 파일의 에 아래의 script를 추가해 SDK를 설치합니다. Kakao.init()에 들어갈 자바스크립트 키는 내 애플리케이션의 앱 키에서 가져오면 됩니다.

이용자 토큰 받기

이 인증된 인증 코드를 통해 엑세스 토큰을 부여받을 것입니다. 카카오 리소스 서버에 등록된 내 개인정보를 응답받기 위해서는 엑세스 토큰이 필요하기 때문입니다.

사실 카카오 로그인이 완전한 것은 아니지만 인증 코드는 받았기 때문에 인증된 사용자로 로그인 처리를 해줄 수도 있긴 하지만 그 사람의 정보를 알려면 엑세스 토큰으로 카카오 리소스 서버에 접근애야 하기 때문에 의미가 없습니다..

OAuth란?

Open Auth를 뜻하는 말로 인증 처리를 대신해주는 서비스입니다. 기존의 로그인 방법 OAuth 적용 OAuth 로그인의 용도 스프링에서 정규적으로 제공해주는 OAuth 주체는 Facebook과 google입니다. OAuthClient 라이브러리에서 Facebook, google을 통한 인증, 권한 처리가 정말 쉽게 이뤄진다. 스프링 프로젝트를 만들 때 OAuthClient를 체크해서 만들면 되는데 지금은 직접 구축해볼 것입니다.

이용자 로그인 처리

이제 내 서버 내에서 토큰검증과 로그인 처리가 진행되면 됩니다. 이전까지 가져왔다 카카오 유저 정보이름, 닉네임, 이메일 정보처럼 동의 할때 체크한 정보들을 가지고, 로그인 혹은 회원가입을 합니다. 그 이후 유저정보로 JWT를 만들어 반환하면 로그인이 완료됩니다. 이곳에서 기존 유저와 카카오 유저가 혼용될 수 있어서 몇가지 방법이 존재하는데 각각의 장단점이 있고 그에 맞게 개발 수정해나아가면 될듯합니다. 복습해야할 것 UserEnumRole RoleUser가 기본값으로 되어있는지? 초기화가 안되어도 role은 User로 되어있다? 더 알아볼 것 RequestEntity, ResponseEntity. MultiValueMap URI vs URL 헷갈린다.

자주 묻는 질문