[Flutter] 카카오 로그인 이슈

Tyger·2022년 6월 25일
2

Kakao Login Issue

이번 글에서는 카카오 로그인 또는 Flutter에서 외부 링크 진입시에 발생하는 이슈에 대해서 설명하려고 한다.

Flutter를 사용해서 개발을 진행하다 보면 카카오 앱 로그인처럼 앱을 벗어났다가 다시 앱으로 진입하는 플로우를 따르는 경우가 많이 발생한다.

하지만 이러한 경우에 앱으로 다시 돌아오지 못하거나 앱에 진입한 이후에 다음 플로우가 진행되지 않는 경우에 대해서 몇가지 이슈를 정리하였다.

내가 현재 개발하는 서비스는 Airbridge SDK를 사용하여 개발이 진행되고 있는데 Airbridge에서 제공되는 Tracking Link를 사용하고 있다. 이런 트래킹 링크를 사용해서 Custom Link를 사용하는 경우 Airbridge Deeplink Listener를 사용하여 딥링크를 수신받게 되는데 여기에 이슈가 많이 발생한다.

네이버와 카카오 로그인을 같이 사용하게 되는 경우에도 이슈가 많이 발생한다.
네이버/카카오 로그인 이슈에 대해서는 많은 오픈 이슈가 등록되어 있어 이에 대한 내용이 많아 해결 방법은 쉽게 찾을 수 있다.

이슈 발생 원인

위에서 설명한 이슈들은 대부분 IOS에서 발생하는 이슈들이고 원인은 딥링크 처리 과정에서 발생하게 되며 Kakao SDK를 사용하는 경우에만 해당이 된다.

Kakao SDK를 통해서 앱 로그인을 진행하면 requestWithTalk() 해당 함수에서 인증 코드를 받아오고 받아온 인증 코드를 통해 access/refresh Token을 요청하게 되고 요청 받은 토큰을 TokenManager에 넣어주면 로그인이 끝난다.

하지만 브레이킹 포인트를 걸어보면 인증 코드를 받아오고 나서 토큰 요청을 하지 않고 멈춘다는 것을 알 수있다. 이러한 이슈가 발생한 원인이 바로 Airbridge SDK의 Deeplink Listener 또는 Naver Login을 사용하게 되면서 해당 인증 코드를 카카오 SDK에 전달되지 않고 에어브릿지나 네이버 SDK가 먼저 수신받아 처리해서 발생하는 이슈다.

카카오에서 보내는 인증코드는 아래와 같이 딥링크로 들어오게 된다

kakao{NATIVE_APP_KEY}://oauth?code=인증코드

처음에는 이렇게 들어온 코드를 수신 받아 직접 카카오 SDK에 넣어 토큰을 받아오는 로직으로 구현하였지만 이 방법은 작동 되지 않았다.

찾은 해결방법은 Airbridge / Naver SDK가 수신받는 부분에서 접두사에 kakao가 포함되어 있으면 바로 앱으로 리턴시켜주는 방법으로 해결하였다.

해결방법

AppDelegate.swift

Airbridge SDK의 Deeplink Listener를 사용하여 이러한 이슈가 발생되었다면 해당 파일의 kakao prefix를 받지 않는 방식으로 이슈 해결이 가능하며, 네이버 로그인도 마찬가지로 아래의 소스코드와 같은 방식으로 처리를 해주면 충돌 이슈를 해결할 수 있다.

에어브릿지나 네이버 둘다 카카오에서 전달 받아야하는 딥링크를 먼저 수신하게 되면서 문제가 발생한거라 딥링크를 수신하지 않게하여야 이슈가 해결된다.

 override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
         var result = false
         if url.absoluteString.hasPrefix("kakao"){
             result = super.application(app, open:url, options: options)
         }
         if !result {
            # Airbridge Or Naver SDK Return
         }
             return result
     }

추가로 카카오 SDK 최신 버전에서는 requestWithTalk() 함수를 사용하여 인증 코드를 리턴받아 토큰을 얻는 로직을 더 이상은 사용하지 말고 loginWithKakaoTalk() 함수를 사용하여 토큰을 바로 생성하는 로직으로 권고하고 있다.

profile
Flutter Developer

1개의 댓글

comment-user-thumbnail
2022년 9월 18일

감사해요ㅜㅜ 진짜 삽질할뻔 했는데 제 은인이십니다 ㅜㅜㅜㅜㅜㅜㅜㅜㅜ

답글 달기