[Mendix] Kakao Login( 미해결 -> 해결 )

Mendix를 사용해서 Kakao를 통한 Social Login을 구현 해보고 싶었다.

 

예제를 찾던도중에 MendixKakaoLogin예제를 발견하고 OIDC(Open ID Connect)를 사용하는데 OIDC란 OAuth(Open Authorization)을 기반으로 인증을 처리한다. 둘의 차이점은 OIDC는 사용자인증 및 사용자정보 제공을 하고 OAuth는 권한허가를 한다는 차이점이 있다.

---

LoginProcess

그럼 기본적인 Social Login의 프로세스는 어떻게 될지 살펴봐야된다. 문서

STEP1

인가 코드를 받아야된다. 인가코드란 카카오 로그인 동의화면에서 사용자 동의를 거치면 인가 코드를 발급해준다.

아래는 화면을 불러오기위한 주소다. 저부분에 Client_id와 redirect_uri를 입력하면 내 애플리케이션의 동의화면이 사용자에게 표시되고 사용자가 동의를 누르면 kakao에서 우리가 사전에 설정해둔 redirect_uri에 redirect해준다. 문서

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

STEP2

카카오에서 인가된 코드를 받았으니 사용자가 받은 코드를 가지고 사용자의 토큰을 발급받아야된다.

아래의 주소에 값을 채워서 보내면 되는데 code 이부분은 인가받은 코드를 입력하고 redirect_uri 는 Redirect될 uri를 입력하면 된다. 그리고나서 client_secret 는 나중에 카카오로그인의 보안에 있는 Key이며, client_id 는 RESTAPI KEY다.

https://kauth.kakao.com/oauth/token/grant_type=authorization_code&code={2}&redirect_uri={3}&client_secret={4}&client_id={5}

주소에 값을 채워서 보내면 카카오에서 발급된 토큰을 받을 수 있다. 문서

STEP3

토근을 받았으니 카카오에게 토큰의 유효성을 체크해보고 토큰이 유효하면 사용자의 정보를 조회해볼 수 있다.

토큰을 조회해보기 위한 주소는 아래와 같다. 문서 https://kapi.kakao.com/v2/user/me

해더부분에 추가만 해주면 된다!!{ Authorization : Bearer {Token} } 사용자의 정보가 조회되면 내 앱에서 로그인 처리를 해주면 된다.

 

 

---

Kakao설정

예제를 따라서 먼저 Kakao developers에서 애플리케이션을 만들어야 한다.

 

애플리케이션에 들어가보면 요약정보에 REST API KEY가 있는데 이부분이바로 client_id가 된다.

그다음으로 카카오 로그인으로 넘어가면된다.

 

카카오 로그인으로 들어와서 로그인을 동의하고 모든 활성화 설정을 ON으로 한다.

그리고 Redirect URL에 사용할 CallbackURL을 설정해주는데 이부분은 나중에 설정해도된다!!

만약 동의항복에 필요한 정보가 있다면 추가로 설정해주면된다 예를들면 닉네임, 이메일 등이있다.

 

카카오로그인의 보안에 가보면 코드부분이 있는데 이게 위에서본 ClientSecret부분이다.

여기까지 했다면은 Kakao developers에서 설정해줄 수 있는 것들은 끝났다. 이제 개발에 들어가면 된다.

 

---

Mendix

💡 예제를 따라하지는 않았습니다… OIDC를 다운받아서 해보고 그냥 구현을 해봐도 똑같아서
그냥 구현하는 쪽으로 채택했습니다.

로그인페이지에 카카오로그인 버튼을 추가해줬다. 카카오톡 로그인 이미지는 문서 이곳에서 다운로드 할 수 있다.

 

위에서 봤던 STEP1처럼 우리는 먼저 카카오톡 로그인 페이지를 보여주고 인가코드를 발급 받아야 된다.

로그인 버튼을 누르면 아까 말했던 URL을 불러줄 거다.

KakaoAuth의 정보를 담당하는 Model을 만들어서 관리하기 때문에 그곳에서 데이터를 불러와서 URL을 만들어준다.

function windowPopup(popUrl) {
	var popOption = "width=500, height=600";
	window.open(popUrl, "KakaoLogin", popOption);
}

export async function LoginPopup() {
	windowPopup(popupUrl);
}

카카오로그인 버튼을 클릭해본다면!! 팝업이 제대로 열리는게 확인된다. 이부분에서 확인하고 계속하기를 누르면 카카오톡에서 우리가 사전에 설정한 redirect_uri를 불러준다. 그러면 redirect_uri는 어떻게 설정하는지 확인해보겠다.

HTTP/1.1 302 Found
Content-Length: 0
Location: ${REDIRECT_URI}?code=${AUTHORIZE_CODE}

 

redirect_uri를 만들어주기 위해서 RestService를 하나 생성해주었다.

주소는 우리가 Kakaodevelopers에서 설정한 주소를 입력해주면 카카오에서 uri로 요청을 한다. 그리고 get parameter에는 code를 넣어주면 된다. 그리고 주소에 get으로 요청하면 ACT_getToken이라는 flow가 실행된다.

 

ACT_getToken은 간단하게 작성되어있다. Token에 request하기위한 데이터를 만들고 아까 말한 주소 https://kauth.kakao.com/oauth/token/grant_type=authorization_code&code={2}&redirect_uri={3}&client_secret={4}&client_id={5} 이곳에 POST로 요청을 한다. 그러면 응답을 받을 수 있다.

 

💡 이부분에서 조금 해맸습니다. Request를 어떻게 해야되는지 JsonMapping도 해보고 이것저것 했는데 계속 Kakao에서 응답값으로 010을주는데 인자값이 잘못됐다고해서 확인해보니 아래와 같은 형식으로 넣어주면 된다고 해서 해결했습니다.

curl -v -X POST "<https://kauth.kakao.com/oauth/token>" \\
 -H "Content-Type: application/x-www-form-urlencoded" \\
 -d "grant_type=authorization_code" \\
 -d "client_id=${REST_API_KEY}" \\
 --data-urlencode "redirect_uri=${REDIRECT_URI}" \\
 -d "code=${AUTHORIZE_CODE}"
 
HTTP/1.1 200 OK
Content-Type: application/json;charset=UTF-8
{
    "token_type":"bearer",
    "access_token":"${ACCESS_TOKEN}",
    "expires_in":43199,
    "refresh_token":"${REFRESH_TOKEN}",
    "refresh_token_expires_in":5184000,
    "scope":"account_email profile"
}

 

응답을 받았다면 토큰을 가지고 사용자의 정보를 조회해볼 수 있다.

아까말했던 { Authorization : Bearer {Token} } 이 헤더의 값을 만들어주고 요청을 보낸다.

그러면 사용자의 정보를 받아 볼 수있다.

HTTP/1.1 200 OK
{
    "id":123456789,
    "connected_at": "2021-09-23T06:08:31Z",
    "kakao_account": { 
        "profile_nickname_needs_agreement": false,
        "profile_image_needs_agreement": false,
        "profile": {
            "nickname": "Ryan",
            "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,
            "is_default_nickname": false
        },
        "email_needs_agreement": false, 
        "is_email_valid": true,   
        "is_email_verified": true,   
        "email": "sample@sample.com",
        "name_needs_agreement": false,
        "name": "Cool Mike",
        "age_range_needs_agreement": false,
        "age_range": "20~29",
        "birthyear_needs_agreement": false,
        "birthyear": "2002",
        "birthday_needs_agreement": false,
        "birthday_type": "SOLAR",
        "birthday": "1130",
        "gender_needs_agreement": false,
        "gender": "male",
        "phone_number_needs_agreement": false,
        "phone_number": "+82 10-1234-5678",
        "ci_needs_agreement": false,
        "ci": "${CI}",
        "ci_authenticated_at": "2022-05-31T07:50:55Z"
    },
    "properties":{
        "${CUSTOM_PROPERTY_KEY}": "${CUSTOM_PROPERTY_VALUE}",
        ...
    },
    "for_partner": {
        "uuid": "${UUID}"
    }
}

 

---

미해결사건( 2024-06-04 업데이트 )

토큰도… 유저정보도 너무나 잘 받아오고 있지만… 로그인 팝업을 멘딕스 기능으로 닫을수도 없을뿐더러 microflow에서 로그인을 처리해야되는데 nanoflow의 로그인은 알겠는데 microflow에서는 어떻게 해야되는지 모르겠어서 혹시 Marketplace에 있나 찾아보니 있어서 사용해봤는데 로그인은 된다… 하지만 화면이 로그인페이지에서 넘어가지를 않는다…

* 추가: 팝업을 닫는거는 Javascript Action으로 처리를 했지만 Microflow에서 Login을 진행할 수 가없다..

2024-06-04 업데이트
Javascript Action을 index.html에 이벤트를 옮겨서 사용하니 잘 넘어가게되었다.