Spring security와 OAuth2.0으로 로그인 구현하기 - 카카오 로그인

 

이 책에서 [chapter5. 스프링 시큐리티와 OAuth2.0으로 로그인기능 구현하기]를 따라 읽다보면 구글과 네이버로 로그인 만들기가 있다. 

네이버와 구글을 만들었으면 카카오 로그인을 구현하는 게 인지상정.. 카카오로그인을 구현해보자

1. 카카오 Developers 사이트로 이동 

카카오 Developers

Kakao Developers

 

(1) REST API 키 

 [내 애플리케이션] > [앱 설정] > [요약정보]
REST API 키 -> application-oauth 에 등록할 client-id

(2) 카카오 로그인 활성 및 Rediret URI 설정

카카오 로그인에 들어가서 활성상태를 ON 으로 바꿔주고 Redirect URI를 바꿔줘야하는데..

책과 똑같이 따라한다면.. 이 주소를 입력하면 된다. 난.. login을 빼먹고 자꾸 안되서 한시간을 해맸다.. 😥

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

 

(3) 동의항목

동의항목은 닉네임, 프로필사진, email로 설정했음. 카카오는 client-secret이 필수가 아니라고 해서 발급받지 않음.  

발급받을 경우, [카카오 로그인]>[보안]에 Client Secret이 있음. 

2. application-oauth.yml

http://www.allencoders.online/converters/props2yaml

Props To YAML - Online Converters | All Online Tools

기존 책은 properties로 되어있는데.. 보기 불편해서 yaml 파일로 변경하기로 했다. 근데 하나하나 변경하려고 하니.. 힘들어서 검색해보니 역시 이런 사이트가 존재😆 싹 변환해줌 

spring:
  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: 발급받은 Rest Api key
            client-name: Kakao
            redirect-uri: '{baseUrl}/{action}/oauth2/code/{registrationId}'
            # http://localhost:8080/login/oauth2/code/kakao
            scope: profile_nickname, profile_image, account_email
            authorization-grant-type: authorization_code
            client-authentication-method: POST
        provider:
          kakao:
            authorization_uri: https://kauth.kakao.com/oauth/authorize
            token_uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user_name_attribute: id

• 스프링이 지원하는 서비스는 구글, 깃헙, 페이스북, 옥타라 그 외 서비스(ex. 네이버, 카카오) 는 provider를 입력해줘야된다고 한다. 
• client-authentication-method: POST : 다른 서비스와 달리 카카오는 필수 파라미터 값들을 담아 POST로만 요청이 가능하다. 그래서 yml 에 명시해줘야함. 
• scope : 검색하는 블로그마다 다 달라서 헷갈렸는데.. 일단 동의 항목에 있는 ID를 적어주니까 됐다. 
• user_name_attribute 는 id로 설정 

3.OAhthAttributes 설정

    public static OAuthAttributes ofKakao(String userNameAttributeName, Map<String, Object> attributes) {
        Map<String,Object> response = (Map<String, Object>)attributes.get("kakao_account");
        Map<String,Object> profile = (Map<String, Object>) response.get("profile");
        return OAuthAttributes.builder()
                .name((String) profile.get("nickname"))
                .email((String) response.get("email"))
                .picture((String) profile.get("profile_image_url"))
                .attributes(attributes)
                .nameAttributeKey(userNameAttributeName)
                .build();
    }

Response 성공시 JSON 데이터

HTTP/1.1 200 OK
{
    "id":123456789,
    "kakao_account": { 
        "profile_needs_agreement": false,
        "profile": {
            "nickname": "홍길동",
            "thumbnail_image_url": "http://yyy.kakao.com/.../img_110x110.jpg",
            "profile_image_url": "http://yyy.kakao.com/dn/.../img_640x640.jpg",
            "is_default_image":false
        },
        "email_needs_agreement":false, 
        "is_email_valid": true,   
        "is_email_verified": true,   
        "email": "sample@sample.com",
        "age_range_needs_agreement":false,
        "age_range":"20~29",
        "birthday_needs_agreement":false,
        "birthday":"1130",
        "gender_needs_agreement":false,
        "gender":"female"
    },  
    "properties":{
        "nickname":"홍길동카톡",
        "thumbnail_image":"http://xxx.kakao.co.kr/.../aaa.jpg",
        "profile_image":"http://xxx.kakao.co.kr/.../bbb.jpg",
        "custom_field1":"23",
        "custom_field2":"여"
        ...
    }
}

kakao_account 에서 email을 가지고 오고 profile에 nickname과 profile_image_url을 가지고 온다. 

    public static OAuthAttributes of(String registrationId, String userNameAttributeName, Map<String, Object> attributes) {
        if("naver".equals(registrationId)){
            return ofNaver("id", attributes);
        }

        if("kakao".equals(registrationId)){
            return ofKakao("id", attributes);
        }

        return ofGoogle(userNameAttributeName, attributes);
    }

위에 ofKakao도 추가해주자.

 

4.index.mustache에 kakao로그인 추가

    <!-- 로그인 기능 영역 -->
    <div class="row">
        <div class="float-right">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
        {{#userName}}
            Logged in as : <span id="user">{{userName}}</span>
                            <a href="/logout" class="btn btn-info active" role="button">Logout</a>
        {{/userName}}
        {{^userName}}
            <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>

            <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>

            <a href="/oauth2/authorization/kakao" class="btn btn-warning active" role="button">Kakao Login</a>
        {{/userName}}
        </div>
    </div>

 

5. 로그인 성공🎉

---

책에 구글이랑 네이버가 있어서 카카오 쯤 금방이지 하고 했는데.. 심지어 블로그에 자세히 나왔는데.. 오래 걸려서 민망하다.. 😅 역시 개발에 간단한 건 없따.. 

강같은 도움을 주신 두 블로그.. 갓블로그 소개.. 자세한 설명은 여기로.. 

https://sundries-in-myidea.tistory.com/89

Spring Boot Security로 카카오 소셜 로그인 만들기

https://loosie.tistory.com/302#

[Spring] 스프링으로 OAuth2 로그인 구현하기3 - 카카오