Kakao 로그인하기

마지막으로 카카오 로그인을 구현하자.

앱 등록

https://developers.kakao.com/

상단의 내 애플리케이션 버튼을 통해 등록하자.

앱설정 -> 요약정보: REST API 키 확인

앱설정 -> 플랫폼: Web 도메인 입력

로그인 설정

제품 설정 -> 카카오 로그인: 활성화

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

제품 설정 -> 카카오 로그인 -> 보안: client Secret 코드 생성

제품설정 -> 카카오 로그인 -> 동의항목: 닉네임, 이메일 동의

환경설정 추가

특정 설정은 Security 버전에 따라 상이할 수 있다.

spring.security.oauth2.client.registration.kakao.client-id=
spring.security.oauth2.client.registration.kakao.client-secret=
spring.security.oauth2.client.registration.kakao.scope=profile_nickname, account_email
spring.security.oauth2.client.registration.kakao.client-name=kakao-login
spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.kakao.redirect-uri=http://localhost:8080/login/oauth2/code/kakao
spring.security.oauth2.client.registration.kakao.client-authentication-method=client_secret_post

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

CustomOauth2UserService

KakaoUserInfo

public class KakaoUserInfo implements OAuth2UserInfo {
    private Map<String, Object> attributes;
    private Map<String, Object> kakaoAccountAttributes;
    private Map<String, Object> profileAttributes;

    public KakaoUserInfo(Map<String, Object> attributes) {
        this.attributes = attributes;
        this.kakaoAccountAttributes = (Map<String, Object>) attributes.get("kakao_account");
        this.profileAttributes = (Map<String, Object>) this.kakaoAccountAttributes.get("profile");
    }

    @Override
    public String getProviderId() {
        return attributes.get("id").toString();
    }

    @Override
    public String getName() {
        return (String) profileAttributes.get("nickname");
    }

    @Override
    public String getEmail() {
        return (String) kakaoAccountAttributes.get("email");
    }

    @Override
    public String getProvider() {
        return "kakao";
    }

}

processOAuth2User

    private OAuth2User processOAuth2User(OAuth2UserRequest userRequest, OAuth2User oAuth2User) {
        // 사용자 정보 객체 생성
        OAuth2UserInfo oAuth2UserInfo = null;
        if (userRequest.getClientRegistration().getRegistrationId().equals("google")) {
            oAuth2UserInfo = new GoogleUserInfo(oAuth2User.getAttributes());
        } else if (userRequest.getClientRegistration().getRegistrationId().equals("facebook")) {
            oAuth2UserInfo = new FaceBookUserInfo(oAuth2User.getAttributes());
        } else if (userRequest.getClientRegistration().getRegistrationId().equals("naver")){
            oAuth2UserInfo = new NaverUserInfo((Map)oAuth2User.getAttributes().get("response"));
        } else if (userRequest.getClientRegistration().getRegistrationId().equals("kakao")){
            oAuth2UserInfo = new KakaoUserInfo(oAuth2User.getAttributes());
        }

타임리프 템플릿

<a href="/oauth2/authorization/kakao" class="btn">
    <img th:src="@{/images/kakao-login-button.png}" src="/images/kakao-login-button.png" alt="kakao">
	Sign in with Kakao
</a>

로그인 버튼을 누르면

카카오 로그인 화면으로 넘어간다.

사용자 정보 확인