[Spring boot] OAuth2 login(Google, Facebook, Naver, Kakao)

소셜 OAuth2 서비스 등록

 

구글(Google)

 

구글 OAuth2 서비스를 등록하기위해서는 아래 Google console로 가서 프로젝트 및 클라이언트 ID를 등록해야 한다. 아래 사이트로 가서 본인의 Google 계정으로 로그인을 한다.

https://console.cloud.google.com/apis

 

로그인을 하면 아래 대시보드 메뉴로 가서 우측 프로젝트 만들기를 클릭한다.

 

프로젝트 이름을 입력하고 만들기를 누른다.

 

상단 "API 및 서비스 사용 설정" 을 클릭한다.

 

OAuth 동의 화면 -> 외부 선택 후 만들기 클릭

 

앱이름을 입력한다.

 

나머지는 부가 정보이고 현재 테스트 서버에서 작업중이므로 승인된 도메인은 입력하지 않고 Pass. 개발자 이메일 정보 정도 입력하고 "저장 후 계속" 을 클릭한다.

 

OAuth 동의 화면 의 2번째 범위 에 대해서 설정을 한다. 우측 "범위 추가 또는 삭제" 버튼을 클릭한다.

 

로그인시 사용할 정보로 이메일 주소, 프로필 정보만 활용할 것이므로 위 2개를 선택한다.

 

입력된 정보를 확인하고 "저장 후 계속"을 클릭한다.

 

테스트 사용자를 추가로 등록할수 있다. 필요시 등록한다. "저장 후 계속" 클릭

 

완료 후 좌측 "사용자 인증 정보"를 클릭한다.

 

상단 "사용자 인증 정보 만들기"를 클릭한다.

 

OAuth 클라이언트 ID를 선택한다.

 

아래 OAuth 클라이언트 ID 만들기 화면에서 어플리케이션 유형에 웹 어플리케이션을 선택하고 이름을 입력한다.

 

리다이렉션 URI에 아래와 같이 입력한다. 이 URI는 구글 로그인이 완료된 후 리다이렉션되는 페이지를 의미한다. 

http://localhost:8080/login/oauth2/code/google

입력을 완료하고 하단 "만들기"를 클릭한다.

 

 

최종적으로 아래와 같이 클라이언트 ID와 보안 비밀번호가 출력된다. 보안 정보이므로 잘 적어둔다.

 

페이스북 (Facebook)

 

페이스북 OAuth2 서비스를 등록하기위해서는 아래 Facebook for Developers 메뉴에 가서 프로젝트 및 클라이언트 ID를 등록해야 한다. 아래 사이트로 가서 본인의 페이스북 계정으로 로그인을 한다.

https://developers.facebook.com 

 

상단의 "내 앱" 메뉴 클릭

 

앱만들기 클릭

 

앱 유형 - 비즈니스 선택 후 하단 "다음" 버튼 클릭

 

앱 표시 이름을 지정하고 연락처 이메일을 입력 후 앱만들기 버튼 클릭

 

앱 생성이 완료되면 좌측 상단에 리스트를 펼친 후 "테스트 앱 만들기"를 선택한다.

 

테스트 앱 이름을 입력 후 테스트 앱 만들기 버튼 클릭

 

기본 설정에서 앱 도메인 (포트번호나 http 시작 없이 도메인 명만 적을 것)으 입력하고 앱 목적에 클라이언트를 선택 후 저장 버튼 입력

 

좌측 제품 -> 제품 추가 클릭 -> Facebook 로그인 의 설정을 클릭

 

빠른 시작 -> 웹 선택

 

사이트이 URL을 적는다. (본인은 테스트 서버로 진행하고 localhost:3000 으로 진행)

 

다음 부터는 예제 코드이므로 참고 후 다음 버튼으로 빠르게 지나간다.

 

좌측 Facebook 로그인 -> 설정 -> 하단에 URI 리디렉션 주소를 아래와 같이 입력한다.

 

http://localhost:8080/login/oauth2/code/facebook

 

입력이 완료되면 최종 저장 버튼을 클릭한다.

 

설정 -> 기본 설정에 가면 앱 ID와 앱 시크릿 코드를 확인할 수 있다. 개발 시 Spring boot yml파일에서 사용한다.

 

네이버 (Naver)

 

네이버 OAuth2 서비스를 등록하기위해서는 아래 Naver Debelopers로 가서 프로젝트 및 클라이언트 ID를 등록해야 한다. 아래 사이트로 가서 본인의 네이버 계정으로 로그인을 한다.

https://developers.naver.com 

 

네이버 디벨로퍼 화면 진입 후 상단 Application -> 내 애플리케이션 메뉴를 선택

 

Application 등록 선택

 

애플리케이션 명 입력, 사용 API에 네이버 로그인 선택 -> 권한에 필요한 정보 선택

 

하단으로 내려가서 환경 -> PC 웹 선택, 서비스 URL 및 네이버 로그인 Callback URL 입력

 

개발 서버가 다음과 같아서 다음으로 입력

http://localhost:3000

 

Callback URL 은 위 구글, 페이스북의 redirect_url로써 로그인이 종료되고 불려지는 url을 뜻한다. 아래 주소로 서버를 띄웠으므로 아래 내용 입력 후 등록하기 버튼 입력

http://localhost:8080/login/oauth2/code/naver

 

 

최종적으로 클라이언트 ID, Secret이 발급 되었다. Spring boot설정에 활용한다.

 

카카오 (Kakao)

 

카카오 OAuth2 서비스를 등록하기위해서는 아래 Kakao Debelopers로 가서 프로젝트 및 클라이언트 ID를 등록해야 한다. 아래 사이트로 가서 본인의 네이버 계정으로 로그인을 한다.

https://developers.kakao.com

 

카카오 계정으로 로그인 한 후 상단 "내 애플리케이션" 선택

 

애플리케이션 추가하기 선택

 

앱이름, 사업자명을 입력후 저장 버튼 클릭

 

좌측 앱키 -> REST API 키 확인

 

좌측 동의 항목 -> 닉네임 설정 -> 필수 동의 선택 -> 저장

 

프로필 사진 설정 -> 필수 동의 -> 저장

 

카카오계정의 경우 필수는 검수가 필요하니 "선택 동의" 선택

 

좌측 카카오 로그인 선택 -> 카카오 로그인 활성화 선택

 

Redirect URI에 아래 주소 입력 후 저장

 

http://localhost:8080/login/oauth2/code/kakao

 

 

좌측 카카오 로그인 -> 보안 항목을 선택하고 Secret 코드를 확인한다

 

 

앞서 확인한 앱키 -> REST API key와 위 Secret키를 잘 보관해 놓고 개발시에 사용한다.

 

Spring boot OAuth2.0 설정하기

 

application.properties (client id나 secret등 값을 입력할때 앞뒤 따옴표를 빼야 한다. 넣으면 url 요청시 그대로 들어가서 인증 fail 됨)

spring.security.oauth2.client.registration.google.client-id=test
spring.security.oauth2.client.registration.google.client-secret=test
spring.security.oauth2.client.registration.google.scope=email,profile

spring.security.oauth2.client.registration.facebook.client-id=test
spring.security.oauth2.client.registration.facebook.client-secret=test
spring.security.oauth2.client.registration.facebook.scope=nickname

spring.security.oauth2.client.registration.naver.client-id=test
spring.security.oauth2.client.registration.naver.client-secret=test
spring.security.oauth2.client.registration.naver.clientAuthenticationMethod=post
spring.security.oauth2.client.registration.naver.authorizationGrantType=authorization_code
spring.security.oauth2.client.registration.naver.redirectUri="{baseUrl}/{action}/oauth2/code/{registrationId}"
spring.security.oauth2.client.registration.naver.scope=nickname,email,profile_image
spring.security.oauth2.client.registration.naver.clientName=Naver

spring.security.oauth2.client.registration.kakao.clientId=test
spring.security.oauth2.client.registration.kakao.client-secret=test
spring.security.oauth2.client.registration.kakao.clientAuthenticationMethod=post
spring.security.oauth2.client.registration.kakao.authorizationGrantType=authorization_code
spring.security.oauth2.client.registration.kakao.redirectUri="{baseUrl}/{action}/oauth2/code/{registrationId}"
spring.security.oauth2.client.registration.kakao.scope=profile_nickname,profile_image,account_email
spring.security.oauth2.client.registration.kakao.clientName=Kakao

spring.security.oauth2.client.provider.naver.authorization-uri=https://nid.naver.com/oauth2.0/authorize
spring.security.oauth2.client.provider.naver.token-uri=https://nid.naver.com/oauth2.0/token
spring.security.oauth2.client.provider.naver.user-info-uri=https://openapi.naver.com/v1/nid/me
spring.security.oauth2.client.provider.naver.user-name-attribute=response

spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize
spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token
spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me
spring.security.oauth2.client.provider.kakao.user-name-attribute=id

 

위에서 설정한 oauth2 관련 properties는 아래 소스에서 객체로 로딩된다.

 

org/springframework/boot/spring-boot-autoconfigure/2.5.6/spring-boot-autoconfigure-2.5.6-sources.jar!/org/springframework/boot/autoconfigure/security/oauth2/client/OAuth2ClientProperties.java:18

 

/**
 * OAuth 2.0 client properties.
 *
 * @author Madhura Bhave
 * @author Phillip Webb
 * @author Artsiom Yudovin
 * @author MyeongHyeon Lee
 * @since 2.0.0
 */
@ConfigurationProperties(prefix = "spring.security.oauth2.client")
public class OAuth2ClientProperties implements InitializingBean {

   /**
    * OAuth provider details.
    */
   private final Map<String, Provider> provider = new HashMap<>();

   /**
    * OAuth client registrations.
    */
   private final Map<String, Registration> registration = new HashMap<>();

   public Map<String, Provider> getProvider() {
      return this.provider;
   }

   public Map<String, Registration> getRegistration() {
      return this.registration;
   }

   @Override
   public void afterPropertiesSet() {
      validate();
   }

   public void validate() {
      getRegistration().values().forEach(this::validateRegistration);
   }

   private void validateRegistration(Registration registration) {
      if (!StringUtils.hasText(registration.getClientId())) {
         throw new IllegalStateException("Client id must not be empty.");
      }
   }