안드로이드 인스타그램 브라우저에서 REST API 기반 카카오톡 로그인 버튼 미작동 문제

REST API
1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

개발환경: React, Next.js
앱ID: 354733

안녕하세요.
현재 React 기반의 Next.js 환경에서 REST API를 사용하여 카카오톡 로그인을 구현하고 있습니다.
다른 OS와 기본 브라우저에서는 정상적으로 동작하지만, 안드로이드 Instagram 인앱 브라우저에서만 redirect_uri로 리디렉션이 이루어지지 않아 문의드립니다.

사용 환경:

  • 개발 환경: React + Next.js
  • 카카오 앱 ID: 354733
  • API 요청 URL:
    https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoRestApiKey}&redirect_uri=${restRedirectUri}&state=${stateId}

문제 상황:

  1. REST API 방식으로 구현하여 https://kauth.kakao.com/oauth/authorize로 요청을 보냅니다.
  2. 다른 OS(예: iOS)나 기본 브라우저(예: Chrome, Safari)에서는 로그인 버튼이 정상적으로 작동합니다.
  3. 안드로이드 Instagram 인앱 브라우저에서만:
    • redirect_uri로 리디렉션되지 않습니다.

확인 및 시도한 사항:

  1. Redirect URI 등록:

    • 카카오 개발자 콘솔에서 redirect_uri가 정상적으로 등록되어 있습니다.
    • 모든 브라우저에서 동일한 redirect_uri를 사용 중입니다.

  2. URL 인코딩 처리:

    • redirect_uri를 encodeURIComponent로 인코딩하여 요청했으나 문제가 해결되지 않았습니다.

  3. User-Agent 기반 처리:

    • Instagram 인앱 브라우저(navigator.userAgent)를 감지하여 REST API 방식을 적용했습니다.

문의 사항:

  1. 안드로이드 Instagram 인앱 브라우저에서 redirect_uri로 리디렉션되지 않는 문제가 발생하는 원인이 무엇일까요?
  2. Instagram 인앱 브라우저의 특수한 환경 제한으로 인해 REST API 방식에 추가적인 설정이 필요한 것인지 궁금합니다.
  3. 해당 문제를 해결하기 위한 가이드나 참고할 자료가 있다면 공유 부탁드립니다.
2

안녕하세요.

JS SDK authorize 사용하시면 인스타그램 웹뷰를 구분하여 REST API 방식으로 처리되기에 브라우저를 직접 식별하실 필요는 없는데요 현재 REST API 호출하는 방식으로 구현된 페이지에서 재현해보았으나 redirect_uri 로 정상 리디렉션되어 접근 토큰 발급되는 것을 확인하였습니다.

3

안녕하세요.

  1. 기존에는 JS SDK authorize로 구현했으나, 인스타그램 인앱 브라우저에서 간편 로그인 기능을 사용하기 위해 REST API 방식으로 전환했습니다.
    참고: 관련 게시글

  2. 재현된 상황을 영상으로 첨부드립니다. 해당 상황은 안드로이드 인스타그램 인앱 브라우저에서 모든 데이터 캐시를 삭제한 후 발생한 것입니다.

  3. 이후 재접근하면 정상적으로 로그인되는 것으로 보아, 토큰은 정상 발급되지만 redirect 과정에 문제가 있는 것으로 추정됩니다.

확인 부탁드립니다.

감사합니다.

4

안녕하세요.

인스타그램 인앱 브라우저에서 카카오톡을 활용한 간편 로그인은 사용하실 수 없습니다.
기존과 같이 JS SDK authorize 기능 사용 부탁드립니다.

배경:
안드로이드에서 다른 앱을 호출하기 위해서는 커스텀 스킴을 사용해아만 합니다.
영상속 “카카오톡으로 로그인” 기능은 커스텀 스킴을 호출하여 카카오톡 앱을 실행하게 됩니다.

일반적인 모바일 브라우저에서는 이와 같은 기능이 정상동작하지만, 웹뷰의 경우 이러한 동작이 정상 작동할 수 있도록 해당 앱에 추가적인 구현이 필요 합니다.

아쉽게도 인스타그램은 이러한 요청이 처리될 수 없도록 구현되어 있습니다.
이러한 배경에 의해 JS SDK에서는 “카카오톡으로 로그인” 버튼이 표시되지 않는 계정 로그인으로 이동시키는점 참고 부탁드립니다.

5

답변 감사드립니다!