네이티브 앱에서 특정 공간에 웹뷰로 일반 react 웹브라우저를 열고, 카카오로그인을 한다고 했을때, 가능한건가요?
일단 테스트를 해보니, 카카오로그인 버튼 클릭하면 로그인창이 웹뷰화면에 전환됩니다.
그래서 아이디, 패스워드 입력하고 로그인누르면
“사용중이던 서비스로 이동하여 로그인을 완료해주세요” 라는 문구가 뜨는데, 액션을 할 수 있는 버튼이라든지가 없어서요. 할수 있는게 없는데,
일단 네이티브앱과 웹브라우저를 다루는 회사가 틀려서 네이티브로 로그인은 안되는 상황입니다.
안녕하세요.
(1) 우선, 네이티브 앱이라면 네이티브 Android/iOS SDK를 사용하는 것을 권장드립니다.
(2) iOS 정책상, 이전앱으로 되돌아가는 것은 자동으로 처리할 수 없고 사용자가 닫기 혹은 뒤로가기 액션을 직접해야합니다.
이전앱으로 돌아가 로그인이 된다면 정상작동입니다.
(3) 앱내 웹뷰로 로그인 처리도 가능합니다. 다만, 웹뷰와 네이티브앱간 로그인 상태 처리등 추가 개발을 해야하는데 이렇게 처리하는 것보다는 SDK사용하시는게 좋을 것 같습니다.
참고 부탁드려요.
회사가 달라서 로그인정보를 얻어올 수 가 없습니다. 네이티브공간에 저희 웹사이트가 특정공간만 열리는 형식으로 구성되어있습니다.
“사용 중이던 서비스로 이동하여 로그인을 완료해주세요.” 에 닫기버튼은 어떻게 해야 달리는건가요?
현재 네이티브 앱의 메뉴 중 하나에 브라우저를 링크하는식으로 들어가있습니다. 예시처럼이라기 보다 웹뷰로 열리는 형식으로
그럼 2번처럼은 안될것 같고 결국 3번밖에는 없어보이는데, 로그인 정보를 받아와야하는 서비스가 react웹이 아닌 네이티브 앱에서의 호출이면 또 안되는데, 혹시 제가 잘못 이해하는게 있을까요?
“사용 중이던 서비스로 이동하여 로그인을 완료해주세요.” 에 닫기버튼은 어떻게 해야 달리는건가요?
따로 조치하지 않고 기본 표시되는데요.
해당 버튼이 없다면 다른 상황 같습니다. 재현할 수 있는 URL알려주시겠어요?
(“카카오 로그인” 버튼 클릭 시, 웹뷰에서 호출하는 URL)
현재 네이티브 앱의 메뉴 중 하나에 브라우저를 링크하는식으로 들어가있습니다. 예시처럼이라기 보다 웹뷰로 열리는 형식으로
그럼 2번처럼은 안될것 같고 결국 3번밖에는 없어보이는데, 로그인 정보를 받아와야하는 서비스가 react웹이 아닌 네이티브 앱에서의 호출이면 또 안되는데, 혹시 제가 잘못 이해하는게 있을까요?
로그인 방식 및 웹뷰와 네이티브앱간 어떤 정보를 주고받는지를 알 수 없어서 정확한 안내는 어려운데요.
웹뷰에서 웹페이지를 띄우고 카카오 로그인 처리하는 것은 가능한 부분입니다.
하지만 단순히 웹뷰로 페이지를 띄워 서비스하는 것이 아니라
네이티브앱과 인터랙션이 있다면 어떤 식으로든 네이티브앱에 수정은 필요할 것으로 보입니다.
현재 reactnative에서 웹뷰로 열어서 테스트하고 있습니다. 환경이 좀 다르지만, 가능한지를 확인해보고 그다음에 해보려구요.
로그인 후, iOS의 경우는 아래와 같이 뜨고, Android에서는 빈화면으로 뜹니다.
“사용 중이던 서비스로 이동하여 로그인을 완료해주세요.”
그리고 네이티브와 웹뷰와의 통신은 전혀 없이 웹뷰안에서만 로그인여부가 되는지 판단중입니다. 다만, 맨 하단에 말씀해주신대로네이티브 수정이 필요하다고 하셔서 답변이 된 것 같습니다.
하나 더 질문드릴게 있는데, 당사에서 카카오로그인으로 redirect_url등으로 현재 서비스 중인게 있는데,
타사의 앱에 브라우저로 열리게 하는 서비스를 준비하고 있습니다. 그곳에 카카오로그인시 당사의 정보(Kakao Developers에 드등록된 어플리케이션)로 된 유저의 access_token을 받아와야하는데, 네이티브와 연계한다고 하더라도 이게 가능한건가요?
Android에서는 빈화면
이 증상은 팝업 방식 로그인 이후, 부모 웹뷰를 찾지못해 발생하는 증상으로 추정되네요.
iOS의 경우는 “사용 중이던 서비스로 이동하여 로그인을 완료해주세요.”
이 증상은 iOS정책상 카카오톡앱으로 로그인 시, 카카오톡앱에서 표시하고 이전 앱으로 돌아가면 정상 로그인되는 형태로 정상동작인데요.
웹뷰에서 표시된다면 뭔가 잘못된 상황같습니다.
하나 더 질문드릴게 있는데, 당사에서 카카오로그인으로 redirect_url등으로 현재 서비스 중인게 있는데,
타사의 앱에 브라우저로 열리게 하는 서비스를 준비하고 있습니다. 그곳에 카카오로그인시 당사의 정보(Kakao Developers에 드등록된 어플리케이션)로 된 유저의 access_token을 받아와야하는데, 네이티브와 연계한다고 하더라도 이게 가능한건가요?
(1) “당사에서 카카오로그인으로 redirect_url등으로 현재 서비스”
이부분은 제공하고 계신 웹사이트를 의미하는 것 같습니다.
(2) 타사의 앱에 브라우저로 열리게 하는 서비스
이부분은 타사의 앱에서 인앱브라우저로 제공하시는 웹사이트를 띄운다는 의미인가요?
(3) 웹사이트에서 카카오 로그인 하셔서 액세스 토큰을 발급받고
카카오와 무관하게 네이티브앱은 웹사이트에 API로 발급받은 액세스토큰을 요청하여 가져가능 방법은 있을듯한데…
액세스토큰을 주고받는 것은 보안상 추천드리지는 않습니다.
(사이트를 직접 확인하지 못해서 일반적인 내용만 말씀드렸어요.)
Android에서는 빈화면
이 증상은 팝업 방식 로그인 이후, 부모 웹뷰를 찾지못해 발생하는 증상으로 추정되네요.
→ 로그인 클릭시 보통 팝업으로 열리면 상관없는데, 그게 아니라서 열려있는 웹뷰자체에서 열려서 못찾는듯 합니다. 이러면 어떻게 해야하나요?
iOS의 경우는 “사용 중이던 서비스로 이동하여 로그인을 완료해주세요.”
이 증상은 iOS정책상 카카오톡앱으로 로그인 시, 카카오톡앱에서 표시하고 이전 앱으로 돌아가면 정상 로그인되는 형태로 정상동작인데요.
웹뷰에서 표시된다면 뭔가 잘못된 상황같습니다.
→ 제가 접근을 잘못한걸까요?
하나 더 질문드릴게 있는데, 당사에서 카카오로그인으로 redirect_url등으로 현재 서비스 중인게 있는데,
타사의 앱에 브라우저로 열리게 하는 서비스를 준비하고 있습니다. 그곳에 카카오로그인시 당사의 정보(Kakao Developers에 드등록된 어플리케이션)로 된 유저의 access_token을 받아와야하는데, 네이티브와 연계한다고 하더라도 이게 가능한건가요?
(1) “당사에서 카카오로그인으로 redirect_url등으로 현재 서비스”
이부분은 제공하고 계신 웹사이트를 의미하는 것 같습니다.
→ 네 맞습니다.
(2) 타사의 앱에 브라우저로 열리게 하는 서비스
이부분은 타사의 앱에서 인앱브라우저로 제공하시는 웹사이트를 띄운다는 의미인가요?
→ 네
(3) 웹사이트에서 카카오 로그인 하셔서 액세스 토큰을 발급받고
카카오와 무관하게 네이티브앱은 웹사이트에 API로 발급받은 액세스토큰을 요청하여 가져가능 방법은 있을듯한데…
액세스토큰을 주고받는 것은 보안상 추천드리지는 않습니다.
→ 말씀드린 구조상에서 일반적으로 사용되는 로그인하는 시나리오가 있을까요?
(사이트를 직접 확인하지 못해서 일반적인 내용만 말씀드렸어요.)
앞에 Android / iOS 두 증상은 웹사이트를 확인하기 전에는 정확한 내용파악이 어려워서요.
URL을 제공해주시거나 로그인 관련 코드 블럭을 공유해주시면 추가 안내드리도록 하겠습니다.
→ 말씀드린 구조상에서 일반적으로 사용되는 로그인하는 시나리오가 있을까요?
(1) 네이티브앱에서는 SDK를 사용해 로그인하는 것이 대부분이구요.
(2) 앱에서 웹뷰로 서비스하는 경우 웹뷰로 전체 화면을 띄운채 그대로 서비스 하기때문에
앱과 웹뷰가 교신할 일이 없기는 합니다. 앱을 브라우저처럼 사용하므로
(3) 부득이하게 네이티브앱에서 웹사이트에게 정보를 요청하는 경우
예를들어 사용자 정보 조회를 한다면
(X) 액세스 토큰을 네이티브앱에 전달해서 카카오 API를 호출하도록 하지 않고
(O) 네이티브앱이 웹사이트에 요청하면 웹사이트는 액세스토큰으로 카카오 API를 호출한뒤, 네이티브앱에는 사용자 정보를 전달하는 방식을 권장합니다.
이렇게 되면 액세스토큰이 유출될 가능성이 없기 때문에
카카오 디벨로퍼스 보안 권장사항에도 가이드하고 있는 내용입니다.
참고 부탁드려요.
URL을 제공해주시거나 로그인 관련 코드 블럭을 공유해주시면 추가 안내드리도록 하겠습니다.
사이트는 https://tangopick.co.kr 입니다.
네이티브앱이 웹사이트에 요청하면 웹사이트는 액세스토큰으로 카카오 API를 호출한뒤, 네이티브앱에는 사용자 정보를 전달하는 방식을 권장합니다.
지칭하신 웹사이트는 저희 사이트(탱고픽)일까요?
일단 로그인은 저희 사이트에만 사용하고 네이티브앱에는 통신 또는 전달할 필요는 없습니다.
사이트는 https://tangopick.co.kr 입니다.
해당 사이트는 팝업방식 카카오 로그인입니다.
네이티브앱에서 아래 가이드와 같이 팝업 웹뷰처리를 하지 않으면 로그인은 동작하지 않습니다.
android 팝업웹뷰 JavaScript | Kakao Developers JavaScript
iOS 팝업웹뷰 JavaScript | Kakao Developers JavaScript
네이티브앱에서 위 처리를 하시거나
https://tangopick.co.kr에서 JS SDK authorize방식 또는 REST-API방식으로 카카오로그인 방법을 변경하셔야합니다.
지칭하신 웹사이트는 저희 사이트(탱고픽)일까요?
네, 맞습니다.
일단 로그인은 저희 사이트에만 사용하고 네이티브앱에는 통신 또는 전달할 필요는 없습니다.
네이티브앱과 웹사이트가 교신할 필요 없다면 위에 안내드린 로그인 처리 부분만 개선하시면
앱내 웹뷰로 서비스 가능합니다.