SDK 버전 정보: https://pub.dev/packages/kakao_flutter_sdk/versions/1.3.0-beta.4
kakao_flutter_sdk 가 최근 웹을 지원하게 되면서 웹도 해당 SDK 를 사용해서 개발했는데
redirect url 을 설정할 수 있는 방법을 모르겠네요.
아래와 같이 redirectUri 를 설정해도 제대로 설정이 안돼서 KOE006 에러가 발생합니다.
final authCode = await AuthCodeClient.instance.authorize(
redirectUri: redirectUri,
webPopupLogin: true,
);
어떻게 하면 redirect url 을 설정할 수 있을까요?
안녕하세요
우선 플러터 웹에서 로그인할 수 있는 방법은 크게 2가지 방식이 있습니다.
참고: Flutter | Kakao Developers Flutter
첨부해주신 코드를 봤을 때는 어떤 방식을 사용하려고 하시는건지 정확히 알기가 어렵네요ㅠㅠ
우선 플러터 웹을 통해 로그인을 구현하기 위해서는 카카오 디벨로퍼스에서 redirect uri를 필수로 등록해야합니다.
참고: 설정하기 | Kakao Developers 설정하기
redirect 방식을 사용해서 구현하시는거라면 토큰 발급을 위한 서버 개발이 필요하고, 해당 서버의 url을 카카오 디벨로퍼스에 등록하고, 파라미터로 넘겨주면 됩니다. 그리고 redirect 방식을 사용할 때는 webPopupLogin 값은 입력하지 않아야합니다.
별도의 서버 개발 없이 로그인을 구현하시는 상황이라면 UserApi#loginWithKakaoAccount 를 사용해 로그인을 구현하시면 되고, 구현하고 계신 웹 서비스의 url을 카카오 디벨로퍼스에 등록하시면 됩니다.
안녕하세요
빠르게 답변해주셔서 감사합니다.
제가 설명이 부족했네요.
Flutter web app 을 http://dev.example.com 에서 실행하고
redirectUri 는 https://auth.example.com/callback/kakao 이고 카카오 디벨로퍼스에도 등록했어요.
로그인 시도하고 아래의 Kakao login check 크롬 확장 프로그램으로 redirect url 을 확인해보면
http://dev.example.com 으로 넘어갑니다.
Chrome extension for Kakao login check - Chrome 웹 스토어
AuthCodeClient.instance.authorize() 에 들어간 redirectUri 가 제대로 전달되지 않아요.
제가 공유한 코드에서 webPopupLogin 을 넘기지 않으면 webapp 이 카카오 로그인 페이지로 전환되고 로그인하면
https://auth.example.com/callback/kakao 페이지로 전환되는데 빈 화면이 보이고 탭에 로딩 애니메이션이 보입니다.
안녕하세요.
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456
안녕하세요,
앱 ID 가 민감 정보일 것 같아서 메일로 회신했는데 금요일 밤에 메일을 배달하지 못했다는 메일을 받아서 여기에 다시 댓글을 올립니다.
배경 설명 더 드리면 flutter 로 앱과 웹을 개발 중인데 kakao_flutter_sdk 가 웹을 지원하지 않아 웹에서의 카카오 로그인은 oauth2_client 을 사용하여 개발했습니다.
oauth2_client 로 개발한 웹은 대부분의 상황에서 잘 동작하는데 크롬에서 유저가 팝업을 차단한 경우 카카오 로그인 후 웹앱에서 redirection 이 발생할 때 주소표시줄에 [팝업 차단됨] 이라는 표시가 보이고 로그인에 실패합니다.
이런 유저들도 팝업 허용 절차 없이 로그인 가능하게 하는 방법을 알아보던 중 kakao_flutter_sdk 1.3.0-beta.4 이 웹도 지원하는 것을 발견하여 연동을 시도 했습니다.
UserApi.instance.loginWithKakaoAccount() API는 redirect url 을 전달할 수 없어서 해당 API 내부에서 사용 중인 AuthCodeClient.instance.authorize() 과 AuthApi.instance.issueAccessToken() 을 사용하여 redirect url 을전달했는데
Redirect url 가 제대로 전달되지 않고 WebApp Url 이 전달돼서 KOE006 에러가 발생합니다.
관련 정보 공유합니다.
앱 ID: ******
WebApp Url: https://feature-kakao-sdk-beta.app.example.io
Redirect Url: https://develop.app.example.io/callback/web
감사합니다.
위에서 설명드렸듯이 redirect 방식을 사용하려면 별도의 서버 개발이 필요한데요, 첨부해주신 redirect uri를 봤을 때는 별도의 서버는 준비가 된 것 같아서 추가로 설명드리겠습니다.
문서에 나와있는 카카오 로그인 과정 문서를 보시면 인가 코드는 클라이언트에서 요청하고, 별도의 서버는 redirect uri를 통해 인가 코드를 전달받습니다. 그리고나서 인가코드를 전달받은 서버에서 토큰 요청을 함으로써 토큰이 발급되는 것을 확인할 수 있습니다. (문서에는 카카오톡으로 로그인 과정만 나와있지만 카카오계정으로 로그인 과정도 동일합니다)
현재 구현하신 코드는 redirect 방식의 로그인이 아니기 때문에 에러가 발생하고 있습니다.
가이드를 좀 더 확인하신 후 redirect 방식에 맞게 수정 부탁드리겠습니다.