먼저 로그인을 후 개발자 등록을 해줍니다.
로그인이 완료되면 내앱에 들어가 앱 만들기를 클릭해줍니다.
Application.yml
Application.yml 에서 facebook 클라이언트 아이디와 비밀번호를 넣어주고
스코프를 지정해줍니다.
다음으로 페이스북으로 로그인을 하기위한 버튼을 만들어줍니다.
이전에 회원정보를 저장하는 DB의 provider컬럼에 잘못된 형식으로 값이 들어와서 코드를 수정했습니다 facebook으로 로그인한 사용자는 provider 에 facebook google사용자가 로그인을 시도하면 google이라고 값이 들어와야 하므로
기존 코드를 아래 부분 코드처럼 수정해줬습니다.
String provider = userRequest.getClientRegistration().getRegistrationId(); // googleloginForm.html
값이 정상적으로 저장된 것을 확인했지만,
providerId가 null로 저장되어서 추가적으로 클래스와 인터페이스를 작성하여 문제를 해결해야합니다.
PrincipalOauth2UserService 에서 Oauth로그인한 사용자의 정보를 DB에 저장하기위헤 세팅을할 때 google과 facebook 등 사용하는 네임들이 다릅니다.
예를들면 providerId 를 구글은 sub이고 facebook은 id입니다
코드를 다르게 작성해주어야해서 한곳에서 여러 플랫폼의 로그인을 처리하는 것은 유지보수에 비효율적이고 가독성이 떨어질 수 있습니다.
아래처럼 각 플랫폼별로 나누어 값을 받아서 처리해보겠습니다.
파일 구조
OAuth2UserInfo 인터페이스 코드
플랫폼별 클래스에 상속해 줄 인터페이스를 작성합니다.
GoogleUserInfo
FaceBookUserInfo
PrincipalOauth2UserService 수정하기
확대
이제 다시 구글로그인과 페이스북 로그인을 시도하면서 DB에 값이 정상적으로 저장이되는지 확인하겠습니다.
인터페이스를 활용해서 코드를 간결화시키고 가독성을 높혀 유지보수의 난이도를 낮출 수 있습니다.
