문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.
Faq 목록 - 10. Android ( Faq 목록 입니다 ) 먼저 확인해주세요.
krankingshow.com 을 firebase로 호스팅하고 있는데요.
제목대로
PC의 Chrome에서는 정상적으로 카카오 로그인이 되는데요.
휴대폰의 Chrome에서는
“사용 중이던 서비스로 이동하여 로그인을 완료해 주세요”
라는 메시지가 뜹니다. 왜그럴까요
로그인 구현부 코드 블럭과 SDK 설정 부분 공유 부탁드려요.
아래는 카카오 로그인 함수 부분이고요
Future kakaoLogin() async {
// TODO: 카카오톡 로그인 -완-
if (await isKakaoTalkInstalled()) {
try {
await UserApi.instance.loginWithKakaoTalk();
print(‘a카카오톡으로 로그인 성공’);
} catch (error) {
print(‘b카카오톡으로 로그인 실패 $error’);
// 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
try {
await UserApi.instance.loginWithKakaoAccount();
print('c카카오계정으로 로그인 성공');
} catch (error) {
print('d카카오계정으로 로그인 실패 $error');
}
}
//카카오톡이 안깔려 있을때 실행됨
} else {
try {
// await AuthCodeClient.instance.authorize(
// redirectUri: '${REDIRECT_URI}',
// );
await UserApi.instance.loginWithKakaoAccount(); // TODO: 여기서 로그인하느라 멈춤..!!
print('e카카오계정으로 로그인 성공');
} catch (error) {
print('f카카오계정으로 로그인 실패 $error');
}
}
print('카카오로그인완료');
// TODO: 카카오톡 로그인 -끝-
// TODO : 카카오 아이디 갖고오기 -완-
User user = await UserApi.instance.me();
print(user.id);
sdk설정 부분은 어디를 얘기할까요? 제가 직장인이고 밤에만 해서 피드백이 좀 느릴 수 있습니다.
이것저것 해봤는데,
일단, pc에서 되는 이유는 pc는 카카오톡을 안깔았고, 휴대폰에는 카카오톡이 깔려 있는게 다른거 같습니다.
그래서 if (await isKakaoTalkInstalled()) 에서 다른 방향으로 간거 같구요.
그래서 카카오톡이 깔려있는 곳에
await UserApi.instance.loginWithKakaoAccount();
가 있는데요. 로그인이 되는거니까 이상해서
그 바로앞에 로그아웃을 붙이니까… 이상하지만, 에러가 뜨다가 어떻게저떻게 되는 경우도 있습니다.
(무슨뜻인지는 휴대폰에서 실제 krankingshow.com에 접속해보면 아실 듯… 합니다.
try {
await UserApi.instance.logout();
await UserApi.instance.loginWithKakaoTalk();
print('a카카오톡으로 로그인 성공');
}
근데 혀튼 좀 많이 불안정합니다. 안정적으로 바꿀 수 없을까요?
“사용 중이던 서비스로 이동하여 로그인을 완료해 주세요” 메시지는 iOS 에서 카카오 로그인 시, 카카오톡에서 표시하는 메시지 인데요
테스트 하신 환경이 어떻게 되시나요? (android or ios)
삼성 갤럭시입니다
아직 아이폰은 안해봤는데 안드로이드는 로그인이 좀 불안한거 같네요.
pc에서 잘되서 안드로이드도 잘될줄 알았는데…
플러터로 개발중이라 안드로이드 어플도 잘되긴 합니다.
갤럭시 크롬에서만…
참고로 처음에 딱한번만 카카오로그인 창이 뜨고
나중에는 카카오로그인이 전혀 안뜹니다.
그래서 로그인은 된 상태인거 같은데…
아니면 로그인 되었는지 확인하는거 넣고서
로그인되어있으면 바로 아이디 불러오는거로 넘어가야겠네요.
단, 위의 코드가 카카오 문서에 있는거 갖고 온거라
제맘대로 변경해도 될지 모르겠네요
로그인 하는 곳은 아래와 같습니다.
@override
Widget build(BuildContext context) {
// 카카오 로그인 함수를 실행시킨다. 반환값은 카카오 아이디
var kakaoId = kakaoLogin(context);
return FutureBuilder(
future: kakaoId,
builder: (context, snapshot) {
if (snapshot.hasData == false) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 10, height: 10),
CircularProgressIndicator(strokeWidth: 10, color: Colors.blueAccent),
SizedBox(width: 10, height: 10),
],
);
}
if (snapshot.hasData) {
print('카카오 아이디는');
print(kakaoId);
return TabPage();
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 10, height: 10),
CircularProgressIndicator(strokeWidth: 10, color: Colors.blueAccent),
SizedBox(width: 10, height: 10),
],
);
});
//return TabPage();
}
해당 서비스에서 사용자의 이벤트 없이 로그인이 API를 사용하는 것으로 보입니다.
클릭 후, 동작할 수 있도록 수정부탁드립니다.
1개의 좋아요
구체적으로 어떻게 클릭을 구현해야할지 궁금합니다.
InitGate 클래스를 실행하면 서클이 돌면서 실행되는데요…
이 InitGate 을 버튼에 할당해서 클릭하면 실행하게 하는건지요?
// 시작
class InitGate extends StatelessWidget {
InitGate({super.key});
Future<String> kakaoLogin(context) async {
if (await isKakaoTalkInstalled()) {
try {
await UserApi.instance.loginWithKakaoTalk(); // 카카오톡으로 로그인하기
} catch (error) {
try {
await UserApi.instance.loginWithKakaoAccount();
} catch (error) {}
}
} else {
try {
await UserApi.instance.loginWithKakaoAccount(); // TODO: 여기서 로그인하느라 멈춤..!!
} catch (error) {}
}
User user = await UserApi.instance.me();
return user.id.toString();
}
@override
Widget build(BuildContext context) {
var kakaoId = kakaoLogin(context);
return FutureBuilder(
future: kakaoId,
builder: (context, snapshot) {
if (snapshot.hasData == false) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 10, height: 10),
CircularProgressIndicator(strokeWidth: 10, color: Colors.blueAccent),
SizedBox(width: 10, height: 10),
],
);
}
if (snapshot.hasData) {
return TabPage();
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width: 10, height: 10),
CircularProgressIndicator(strokeWidth: 10, color: Colors.blueAccent),
SizedBox(width: 10, height: 10),
],
);
});
}
}
안녕하세요.
(1) krankingshow.com 사이트는 페이지에 접근 하자 마자 팝업을 띄우고 카카오 로그인 시도합니다.
이렇게 되면, 팝업 페이지는 브라우저 history에 없어서 카카오톡 앱에서 로그인 후, 팝업이 아닌 부모 페이지로 돌아게게됩니다.
즉, 카카오톡으로 로그인 방식 로그인 후, 카카오톡에서 로그인 성공여부 확인을 위해 폴링 하는데
명시적인 사용자 버튼 클릭 없이 로그인 하셔서 팝업 페이지가 폴링 응답을 못받는 현상이 최초 문의하신 증상입니다.
사용자 액션없이 띄운 팝업이 브라우저 history에 없는 것은 카카오와 무관한 OS 정책입니다.
(2) 현재는 카카오톡 앱으로 로그인이 아니라 카카오 계정으로 로그인 하도록 처리 하셔서 위 증상 없이 정상 로그인 되는 것으로 확인됩니다.
krankingshow.com 사이트에 카카오 로그인 버튼을 두시고 사용자가 클릭하면
카카오 로그인 호출하도록 구현하시면 문제 없이 작동합니다.
(명시적인 사용자 버튼 클릭 액션 없이 실행된 기능이 외부 앱을 호출하는 것은 해킹과 피싱 방지를 위해 OS, 브라우저 레벨 에서 막고 있는 추세 입니다. )
참고 부탁드려요.
2개의 좋아요
안녕하세요
우선 불안정하다고 얘기하신 내용은 정확한 의미를 파악하지 못해서 명확한 해결방법을 남겨드리긴 어려울 것 같습니다.
적어주신 내용들을 토대로 몇 가지 현상이 발생하는 이유에 대해서 안내드리니 참고해서 작업하시면 될 것 같습니다.
모바일 웹 환경에서는 카카오톡 설치 유무와 무관하게 await isKakaoTalkInstalled() 결과가 항상 true로 반환됩니다. (참고 - 가이드)
또한 첫 로그인 시에만 카카오로그인 창이 뜨고, 그 후로는 로그인 창이 뜨지 않는 것은 Prompt.login을 사용하면 해결할 수 있을 것으로 보입니다. (참고 - 가이드)
1개의 좋아요
지금 봤는데요… 말씀하신 것 반영해서 적용해보겠습니다. 감사합니다^^
아… 모바일에서는 항상 true이군요…
불안정하다고 한 것은,
처음에 로그인이 잘 안되서 이것저것해보다가 logout 후 바로 login 하게 했더니…
새로고침을 계속 하면, 어떨때는 로그인이 되고 어떨때는 로그인이 안되는 경우가 랜덤하게 발생을 해서,
결국 로그인이 되기는 하니까 불안정하다고 표현했었습니다.
tim.l 님이 조언해주신대로, 사용자 버튼 클릭을 구현한다음… logout을 빼버리면 해결될꺼 같네요.
조언 감사합니다~ ^^
1개의 좋아요