Supabase를 활용하여 웹뷰에서 kakao 인증을 하려고 합니다

JavaScript
1

웹뷰 로그인 화면에서 로그인을 클릭 시, 카카오 로그인 화면으로 넘어갑니다
아래는 카카오 로그인 페이지로 넘어갈 때, queryParams입니다.

{
    "scope": "account_email profile_image profile_nickname",
    "response_type": "code",
    "redirect_uri": "https://test.supabase.co/auth/v1/callback", // url도 마찬가지로 test로 마스킹 처리
    "state": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MDcyMTQ3NDgsInNpdGVfdXJsIjoiaHR0cHM6Ly93d3cuZ29wYXJrZ29sZi5hcHAvIiwiaWQiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAiLCJmdW5jdGlvbl9ob29rcyI6bnVsbCwicHJvdmlkZXIiOiJrYWthbyIsInJlZmVycmVyIjoiZ29wYXJrZ29sZjovLyIsImZsb3dfc3RhdGVfaWQiOiIifQ.8k4H7Zru8vuRru6nOm2LSYt7_b8z8NOjJN-4Uy5KIqY",
    "through_account": "true",
    "client_id": "test", // test로 임의 설정
    "redirect_to": "goparkgolf://"
}

이 상태에서 카카오톡으로 로그인(카카오톡 앱으로 이동) 을 클릭하면 로그인이 되지 않고,
하단 이메일과 비밀번호를 직접 넣었을 때는 로그인이 되는데, 어떠한 이유가 있을까요??

웹뷰에서 로그인 버튼을 클릭하면 플로우는 아래와 같습니다
로그인 버튼 클릭 → test.supabase.co/auth/v1/authorize?provider=kakao&redirect_to=goparkgolf%3A%2F%2F
supabase url로 이동 → supabase에서 카카오계정 페이지로 redirect (위 본문에 포함된 queryparams와 함께) → 카카오톡으로 로그인 버튼 클릭 → 카카오톡이 정상적으로 열리지 않고, 브라우저가 닫힘

추가적으로 필요하신 정보가 있다면 알려주세요

2 
kakaotalk://~~~

카카오 계정 로그인 페이지에서 카카오톡으로 로그인하면, 위와 같이 앱 실행을 위한 커스텀 스킴이 호출됩니다.
개발하신 앱에서 관련 스킴을 호출할 처리가 없어서 그런것 같습니다.

앱내 웹뷰인데 해당 버튼이 표시되나요? (기본적으로 앱내 웹뷰에는 해당 버튼 지원하지 않습니다.)
어떤 상황인지 구체적으로 확인위해 관련 영상 첨부 부탁드립니다.

앱ID도 기재해주세요.

3

안녕하세요 빠른 답변 감사합니다
앱 ID는 976691이고, 증상 영상 첨부합니다

앱내 웹뷰인데 해당 버튼이 표시되나요? (기본적으로 앱내 웹뷰에는 해당 버튼 지원하지 않습니다.)
이건 몰랐네요
확인 해보시고 답변 부탁드립니다

4

해당 버튼은 User-Agent 기준으로 표시되며 표시기준은 아래 내용 참고 부탁드립니다.

모바일웹에서 "카카오톡으로 로그인" 버튼은 언제 표시될까?

로그를보니 User-Agent가 앱내 인앱브라우저가 아닌 일반 기본 브라우저라 해당 버튼이 표시되는 듯하네요.

kakaotalk://~~~

앱내 웹뷰에서 위 커스텀 스킴 실행 시, 실행되도록 앱내 하이브리드앱 처리 해주시면됩니다.

android 하이브리드 앱 가이드 | Kakao Developers 하이브리드 앱 가이드
ios 하이브리드 앱 가이드 | Kakao Developers 하이브리드 앱 가이드
flutter Flutter 웹뷰에서 카카오 로그인 시도시 intent.dataString 이 null 이 반환되는 문제 - tony.mb 님의 게시물 #6