하이브리드 앱 ios - 커스텀 url 스킴

JavaScript
1

문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.

안녕하세요 . 현재 vue프로젝트를 capacitor를 사용하여 하이브리드 앱을 구현중입니다.
현재 문제는 카카오 간편 로그인시 안드로이드는 제시한 가이드를 통해 웹뷰를 수정하여 정상 동작하지만

ios의 경우 가이드의 내용대로 수정했지만 앱으로 이동하지 않고 인앱브라우저에서 카카오 계정 로그인 페이지를 엽니다.
url.scheme를 출력해보면 모두 https만 출력됩니다.

그리고 출력된 url를 확인해보니 아래와 같은 유니버셜 링크가 출력됩니다.
https://talk-apps.kakao.com/scheme/kakaotalk%3A%2F%2Finappbrowser%3Furl%3Dhttps%253A%252F%252Fkauth.kakao.com%252Foauth%252Fauthorize

유니버셜링크로 이동시 앱이 없는 경우 웹 페이지를 연다고 되어 있는데 로그인 완료 후 다시 앱으로 돌아오는 방법이 있을까요??
그리고 url.scheme에 kakaolink가 존재하려면 다른 설정이 필요한가요?

2

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456

3

ID 806987 입니다.

4

안녕하세요.

(1) iOS 모바일 기기에서 Js SDK 2.0.1, authorize 함수로 카카오 로그인 시, 유니버셜 링크가 호출 되는 것은 정상 동작입니다.

(2) 카카오오톡 앱이 설치 되어 있고 로그인되어 있다면 카카오톡앱으로 로그인 시도하고
설치되어 있지 않다면 카카오 계정 로그인 페이지로 이동하는 것 역시 정상동작입니다.

카카오톡이 잘 설치되어 있는데도 그런가요?

(3) url.scheme에 kakaolink는 카카오 로그인 스킴이 아니라 카카오톡 공유하기 스킴입니다.

유니버셜링크로 이동시 앱이 없는 경우 웹 페이지를 연다고 되어 있는데 로그인 완료 후 다시 앱으로 돌아오는 방법이 있을까요??

로그를 보면 ios에서 authorize하고 redirect_uri로 돌아가 토큰 발급도 정상 처리된 것으로 보입니다.

어떤 상황인지 잘 이해되지 않는데요. 관련 영상 첨부해주시겠어요?

5

안녕하세요.

말씀하신것 처럼 확인해보니 앱이 있는 경우 카카오톡 앱이 실행되고 카카오톡이 없는 경우 웹에서 카카오톡 로그인 페이지를 보여줍니다.

여기서 문제점은 로그인 완료 후 앱으로 돌아오면 기존 앱에서의 UI 구성과 다르게 웹 화면이 보여집니다.(헤더, 푸터)
앱 → 앱 (카톡 o) / 웹(카톡x) → 웹

정상 동작하는 경우 앱 (카톡 o) / 웹(카톡x) → 앱이 맞는거 같은데 추가 사항이 있을까요?

추가로 카톡 앱에서 로그인 후 닫기 버튼을 클릭 했을때 카톡 채팅방이 보이는데 앱으로 돌아가려면 별도로 로직을 추가해야하는건가요??

6

안녕하세요.
혹시 카카오 리다이렉션 url를 설정할때, 커스텀 스킴 등록은 안되나요??
capacitor://~~~~로 테스트 해보고 싶은 부분이 있어 문의 드립니다.

7

안녕하세요.

여기서 문제점은 로그인 완료 후 앱으로 돌아오면 기존 앱에서의 UI 구성과 다르게 웹 화면이 보여집니다.(헤더, 푸터)
앱 → 앱 (카톡 o) / 웹(카톡x) → 웹
정상 동작하는 경우 앱 (카톡 o) / 웹(카톡x) → 앱이 맞는거 같은데 추가 사항이 있을까요?

하이 브리드앱에서 웹뷰를 띄운 상태에서 개발하신 사이트 로그인 페이지 카카오 로그인 버튼으로 JS SDK authorize를 하게 됩니다.
유니버셜링크로 이동 후, 카카오톡이 설치되었다면 카카오톡을 호출해서 로그인하고 / 설치되어 있지 않으면 카카오 계정 로그인 페이지로 리다이렉트합니다.

카카오톡에서 로그인하던, 카카오 계정페이지에서 로그인하던 인가코드를 파라메터로 설정하신 리다이렉트 URI로 리다이렉트합니다.

기존 앱에서 띄운 웹뷰에서 리다이렉트 URI 로 이동하는 것 뿐인데 "기존 앱에서의 UI 구성과 다르게 웹 화면이 보여집니다."라고 하신 부분도 이해가지 않는데요. 이부분도 영상 첨부 부탁드립니다.

추가로 카톡 앱에서 로그인 후 닫기 버튼을 클릭 했을때 카톡 채팅방이 보이는데 앱으로 돌아가려면 별도로 로직을 추가해야하는건가요??

iOS 운영체제 정책 상 호출한 앱으로 자동으로 돌아갈 수 없고 사용자 액션에의해 돌아가야합니다. 왼쪽 상단 호출한 앱으로 돌아가는 항목이 표시됩니다.

혹시 카카오 리다이렉션 url를 설정할때, 커스텀 스킴 등록은 안되나요??

리다이렉트를 커스텀 스킴으로 설정은 불가능합니다. Oauth2 표준에 해당 내용이 없습니다.

추가로
첨부하신 영상은 문의 내용과 달리 Android로 보이며, 카카오톡만 설치되어 있고 로그인 안된 상황으로
이 경우 Activity간통신으로 카카오톡앱에서 NotSupportedError에러를 전달하지만, 안드로이드 OS 특성상 브라우저는 해당 에러 응답을 받을 수 없습니다.

카카오톡 앱에 로그인 후, 테스트 해주세요.

8

안녕하세요.
영상 첨부를 잘못해서 다시 첨부합니다.

요약

9

안녕하세요. 첨부 감사합니다.

카카오톡앱에서 로그인 성공하고, 호출한 앱의 웹뷰는 리다이렉트 URI로 이동하게 되는데요.

iOS 웹뷰 앱 하나 만들어 해당 사이트 띄우고 카카오 로그인해보니 저는 정상적으로 리다이렉트되고
회원가입 전이라 본인 인증 화면으로 넘어가는데요.

로그인에 성공했다면 정상동작인데, 로그인 안되어 있나요?