플러터 카카오 로그인 리다이렉트 방식에 대해서

Flutter
1

시뮬레이터 iOS 16.0 버전

궁금한점.
리다이렉트 방식(AuthCodeClient.instance.authorize) 을 써서 서버에 인가코드 오는것, 서버에서 토큰을 통한 정보까지 확인 완료 됐습니다.
그런데, account 로그인 시에 웹뷰? 팝업이 사라지지 않고 있습니다.
원래 사라지지 않는걸까요? 아니면 인가코드 받은 서버에서 어떤 특정한 값을 리턴해줘야 하는건가요…?(또는 iOS plist 에서 스키마 문제? 이건 해놨습니다 ㅠ)
rest api 키를 사용해서 테스트 구현 했습니다.

app id: 831221

2

안녕하세요.
하이브리드 앱으로 구성되어 있으실까요?

3

플랫폼은 플러터 앱 입니다.
플러터 앱에서 버튼만 누르면 AuthCodeClient.instance.authorize 를 호출하게 했습니다.

child: ElevatedButton(
          child: Text("로그인 테스트"),
          onPressed: () async {
            try {
              print('카카오계정으로 로그인 시작');
              // final value = await UserApi.instance.loginWithKakaoAccount();
              final value = await AuthCodeClient.instance.authorize(redirectUri: "http://localhost:20030/api/v1/auth/login/kakao");
            } catch(error) {
              print('카카오계정으로 로그인 실패 $error');
            }
          },
        )
4

초기화 코드에 사용된 앱키도 REST API 키인가요?
네이티브의 경우 초기화 코드에는 네이티브 앱키를 설정하셔야만 합니다.

5

피드백 계속 주셔서 감사합니다.
현재는 REST API인데, 네이티브 앱키를 사용하면 관리자 설정 이슈(KOE006) 이 출력됩니다.

rest api로 할땐 인가코드가 잘 오고 제가 보낸 값도 잘 오는데, 이걸로 할땐 안옵니다. 어떤 문제일까요… 휴

6

카카오 로그인 → redirect URL 등록은 완료 했습니다(http://localhost:20030/api/v1/auth/login/kakao)

7

내 애플리케이션 > 앱 설정 > 플랫폼 메뉴에서 사이트 도메인 등록하셔도 오류가 발생하실까요?

http://localhost:20030
8

네 안되네요… 같은 오류(KOE006) 이 출력됩니다. 혹시 몰라서 버튼 누를떄(authorize 호출될때) 로그 첨부해드리겟습니다 ㅠ

https://kauth.kakao.com/oauth/authorize?client_id=e0bc81bc1c558ff1757772e48cc37b13&redirect_uri=http%3A%2F%2Flocalhost%3A20030%2Fapi%2Fv1%2Fauth%2Flogin%2Fkakao&response_type=code&ka=sdk%2F1.3.0+sdk_type%2Fflutter+os%2Fios-16.0+lang%2Fko-US+res%2F390.0x844.0+device%2FiPhone+origin%2Fcom.example.testKakao+app_ver%2F1.0.0

pubspec.yaml의 sdk 목록도 올려드립니다.

  • kakao_flutter_sdk: ^1.3.0-beta.4 # 전체 추가
1개의 좋아요
9

알아봐주시면 감사하겠습니다…

10

답변이 늦어 죄송합니다.
확인 후, 답변 드리겠습니다.

11

@choise154
안녕하세요. 답변이 늦어 죄송합니다.

Redirect 방식은 웹 서비스 환경에서 사용되는 기능입니니다.
아쉽지만, 네이티브 환경에서 redirect_uri 처리 후, 앱으로 다시 돌아오는 기능은 제공하고 있지 않습니다.
일반적인 로그인 방식을 사용한 뒤, 서비스측을 호출하는 방식으로 개발하셔야 할것 같습니다.

아래 구현 방식 선택 가이드에 설명 드리고 있습니다.

Flutter | Kakao Developers Flutter

하지만, 전체 문서 내용이 다소 오해를 불러올수 있어 보강하도록 하겠습니다.

12

아! 답변 감사합니다. 좋은하루 보내세요

13

https://8c15-112-151-155-62.ngrok-free.app/auth/kakao/callback
등록된 callback으로 redirect 방식으로 웹에서 잘 동작합니다.

이후, flutter 앱 개발에서 카카오로그인시 뜬 웹브라우저가 access_token을 출력하고,
사라지지 않는 상태에서 flutter 앱으로 access_token이 연계되지 않습니다.

그렇다면, AuthCodeClient.instance.authorizeWithTalk 혹은 AuthCodeClient.instance.authorize는 웹에서만 동작하는 것이라면, 앱에서는 어떨때 사용하는거죠?
앱에서는 redirect 방식은 사용할 수 없고, NestJS + Flutter 카카오 OAuth 로그인 구현하기 이와 같은 방식으로만 사용해야 하는 것인가요?
flutter 앱에서 카카오 로그인 이후, 서비스 서버가 발행하는 토큰을 사용하고 싶은데, 도움 부탁드려요.

14

안녕하세요.

그렇다면, AuthCodeClient.instance.authorizeWithTalk 혹은 AuthCodeClient.instance.authorize 는 웹에서만 동작하는 것이라면, 앱에서는 어떨때 사용하는거죠?

웹 방식으로 처리하실때는 기재하신 함수를 사용하여 인가코드 요청하고 설정한 리다이렉트 URI로 http 리다이렉트 처리합니다.

네이티브 앱 방식일때는 아래 가이드와 같이 loginWithKakaoTalk(), loginWithKakaoAccount() 함수 사용하여 직접 리다이렉트 URI 구현하지 않고 SDK통해 앱으로 리다이렉트 받아 SDK 내 토큰 발급 처리까지 진행합니다. 발급 받은 토큰은 앱내 static변수에 할당됩니다.

구현 방식 선택 Flutter | Kakao Developers Flutter
네이티브앱 구현 예제 코드 Flutter | Kakao Developers Flutter

앱에서는 redirect 방식은 사용할 수 없고, NestJS + Flutter 카카오 OAuth 로그인 구현하기 이와 같은 방식으로만 사용해야 하는 것인가요?

카카오 로그인은 여타 소셜 로그인과 동일하게 OAuth2 표준 스펙으로 동작하여 인가 요청 후, http 리다이렉트를 하게됩니다.
그러므로 네이티브앱에서 redirect 방식을 사용하시려면 앱내 별도 웹뷰를 띄워 구현하시거나
블로그 참조 링크 기재하신 방식처럼 앱으로 리다이렉트 받아 처리 하는 방식을 사용하셔야합니다.

네이티브앱 구현 시, 웹뷰를 띄워 구현하시는 것 보다는 SDK통해 토큰 받는 것을 추천드리며
블로그 내용 처럼 액세스 토큰을 백엔드로 전달하는 것 보다는
카카오와 교신은 플러터에 일임하여 SDK통해 간편하게 조회 하시고

조회된 결과를 백엔드에 전달하시는 것을 추천합니다.

네이티브앱내에서 일반회원 가입 한 것처럼
(1) `loginWithKakaoTalk() 카카오톡으로 간편 로그인 하여 토큰 발급
(2) me() 함수 호출하여 사용자 정보조회
(3) 백엔드로 조회된 정보 전달

1개의 좋아요