ID 906916
사용환경 : Iphone, Safari, Flutter , KakaoSDK , mobile web browser,
SDK : kakao_flutter_sdk: ^1.4.3
Flutter Mobile Web(Safari) 에서 로그인이 진행되지 않아요.
user agent값은 아래와 같아요.
{browserName: BrowserName.safari, appCodeName: Mozilla, appName: Netscape, appVersion: 5.0 (iPhone; CPU iPhone OS 16_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.1 Mobile/15E148 Safari/604.1, deviceMemory: null, language: ko-KR, languages: [ko-KR], platform: iPhone, product: Gecko, productSub: 20030107, userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.1 Mobile/15E148 Safari/604.1, vendor: Apple Computer, Inc., vendorSub: , hardwareConcurrency: 4, maxTouchPoints: 5}
사파리만 이런 문제가 있고요. Chrome에서는 문제없이 진행됩니다.
- 모바일 + 크롬 = OK
- 모바일 + 사파리 = X
- 팝업 true 로 해도 팝업이 뜨지않는다.
코드는 아래와 같아요.
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';
try {
if (await isKakaoTalkInstalled()) {
try {
response = await AuthCodeClient.instance.authorizeWithTalk(
redirectUri: '$REDIRECT_URI',
webPopupLogin: popup,
);
print('authorizeWithTalk $response');
return true;
} catch (error) {
print('카카오톡으로 로그인 실패 $error');
return false;
}
} else {
try {
response = await AuthCodeClient.instance.authorize(
redirectUri: '$REDIRECT_URI',
webPopupLogin: popup,
);
print('authorize $response');
return true;
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
return false;
}
}
} catch (e) {
return false;
}
}
확인 부탁드립니다.
안녕하세요
동일 환경에서 재현해봤을 때 정상적으로 동작하고 있어서 브라우저 캐시 문제의 가능성이 있어보입니다. 사파리 브라우저의 캐시 삭제 후 다시 로그인을 시도하거나, 개인정보 보호 브라우징 상태에서 로그인을 시도해봤을 때도 정상적으로 동작하지 않는지 확인 부탁드립니다.
그리고 남겨주신 내용을 봤을 때 웹에서 팝업을 띄워 로그인을 진행하고 싶으신 것으로 보입니다. 팝업 방식으로 로그인을 진행하고 싶은 것이 맞다면 AuthCodeClient.instance.authorizeWithTalk(), AuthCodeClient.instance.authorize() 메소드를 직접 호출하기보다는 UserApi.instance.loginWithKakaoTalk()과 UserApi.instance.loginWithKakaoAccount() 를 호출하는 것을 권장하고 있습니다.
가이드 참고하셔서 코드 수정하시면 좋을 것 같습니다.
" UserApi.instance.loginWithKakaoTalk() 과 UserApi.instance.loginWithKakaoAccount()"
https://developers.kakao.com/docs/latest/ko/kakaologin/flutter#kakaologin
이렇게 했는데요
- 모바일 + 크롬 = OK
- 모바일 + 사파리 = X
이전과 동일한 결과입니다.
-
kakao_flutter_sdk: ^1.4.3
모바일(사파리)에서 아래와 같은 코드가 리턴돼요 그리고 다음으로 넘어가지를 않아요.
{
“error_code”: “300”,
“error”: “not_found_auth_code”,
“error_description”: “can’t get an authorization_code”,
“status”: “error”
}
설정에 문제인가요?
2.
" uthCodeClient.instance.authorizeWithTalk() , AuthCodeClient.instance.authorize() 메소드를 직접 호출하기보다는"
이부분은 리다렉트를 쓰려고 했어요. 추천하는 함수로 했을때는 리다렉트를 쓰지 않는건가요? (설정하는 곳이 없어서요)
리다이렉트 방식을 사용하려고 하시는건줄 모르고 제가 답변을 잘못 드렸네요ㅠㅠ
제가 이전에 가이드해드린 UserApi.instance.loginWithKakaoTalk()과 UserApi.instance.loginWithKakaoAccount()는 리다이렉트 방식이 아닌 팝업을 띄워 인가 코드 요청, 토큰 발급 요청을 완료하는 메소드이므로 리다이렉트 로그인 방식을 원하신다면 해당 메소드들은 사용하지 않는 것이 맞습니다.
리다이렉트 방식 로그인을 사용하시려면 가이드에 나와있는 것처럼 AuthCodeClient.instance.authorizeWithTalk() 또는 AuthCodeClient.instance.authorize() 메소드에 redirectUri 파라미터를 넣어서 호출하는 것이 맞습니다.
(popup 파라미터는 SDK 내부에서 사용하는 파라미터로 직접 값을 넣어서 사용하면 비정상적으로 동작할 수 있기 때문에 코드에서 제거 부탁드립니다)
다만 리다이렉트 방식 로그인의 경우 인가 코드가 redirectUri 파라미터에 입력한 주소로 전달되고, 해당 서버에서 토큰 발급을 진행해야하기 때문에 AuthCodeClient.instance.authorize(), AuthCodeClient.instance.authorizeWithTalk 메소드의 리턴 값을 전달받도록 구현한 부분은 수정이 필요할 것 같아요.
response = await AuthCodeClient.instance.authorizeWithTalk()
=> await AuthCodeClient.instance.authorizeWithTalk()
또한 직접 구현하신 서버로부터 토큰을 전달받아 SDK 내부의 토큰 매니저에 저장하는 코드 추가가 필요한데요, 가이드 참고하셔서 해당 부분 구현하시면 정상적으로 동작할 것으로 보입니다.
감사합니다. 다시 해볼게요.
지금 저의 질문이 모바일-사파리 문제인데요. 혹시 여기에 관련해서 리다이렉트 문제나 최근에 발견된
국내 문제는 없는거죠?
제보들어온 적이 없는 이슈이기도 하고, 직접 테스트해봤을 때도 이슈가 없어서 원인 파악이 어렵네요
위에서 로그인 진행이 되지 않는다고 적어주신 부분도 정확히 어떤 상황인지 파악하지 못했습니다. 조금 번거로우시더라도 이슈 재현 영상과 로그인 전체 코드 (토큰 전달받아 토큰 설정하는 부분까지 포함한 전체 코드) 첨부해주시면 이슈 파악에 도움이 될 것 같습니다.
다시 말씀드리면
아이폰-사파리에서 https://app.orderia.io 해서 로그인을 하면 안되는 현상이예요.
(다른 상황에서는 로그인이 잘됩니다. )
아래 코드 첨부 드립니다.
Future<bool> loginKakaoWeb(BuildContext context, String? redirectUrl) async {
String? response;
OAuthToken? _token = await TokenManagerProvider.instance.manager.getToken();
if (_token != null && FFAppState().JSONAstroCodeToken != null) {
print("token: $_token");
return true;
}
if (redirectUrl != null) {
REDIRECT_URI = redirectUrl;
}
try {
if (await isKakaoTalkInstalled()) {
try {
print('instance.authorizeWithTalk start');
await AuthCodeClient.instance
.authorizeWithTalk(redirectUri: '$REDIRECT_URI');
print('instance.authorizeWithTalk = $response');
//print('authorizeWithTalk $token');
return true;
} catch (error) {
print('카카오톡으로 로그인 실패 $error');
return false;
}
} else {
try {
print('instance.authorize start');
await AuthCodeClient.instance.authorize(redirectUri: '$REDIRECT_URI');
print('instance.authorize = $response');
//print('authorize $token');
return true;
} catch (error) {
print('카카오계정으로 로그인 실패 $error');
return false;
}
}
} catch (e) {
return false;
}
}
링크 주신 페이지에서 이슈 재현되는 것 확인했는데, 사파리 브라우저에서 카카오톡으로 이동 자체를 못하고 있는걸로 보입니다.
그런데 제가 테스트용으로 구현한 웹페이지에서는 이슈가 재현되지 않아서 조금 번거로우시겠지만 SDK 소스를 수정했을 때 이슈가 해결되는지 확인 부탁드리겠습니다.
현재 1.4.3 버전을 사용하고 계셔서 1.4.3 버전으로 말씀드리면 External Libraries → Flutter Plugins → kakao_flutter_sdk_common → lib → src → kakao_flutter_sdk_plugin.dart 파일의 121, 122, 123, 125번 라인을 제거했을 때 정상적으로 동작하는지 확인해주시면 감사하겠습니다. (파일 위치는 첨부한 이미지 참고 부탁드려요)
