[트러블슈팅] 카카오톡 인앱 브라우저에서 구글 OAuth 로그인 차단 문제 해결

Melcoding·2025년 12월 17일

어드벤트 캘린더 프로젝트 회고/트러블슈팅

목록 보기

5/9

문제 상황

어드벤트 캘린더 웹 서비스를 개발하고 배포한 후, 사용자가 카카오톡으로 공유된 링크를 통해 접속했을 때 구글 소셜 로그인이 작동하지 않는다는 제보를 받았다. 데스크톱이나 모바일 브라우저(Safari, Chrome 등)에서는 정상적으로 작동했기 때문에, 특정 환경에서만 발생하는 문제임을 확인할 수 있었다.

카카오톡은 링크를 클릭하면 자체 인앱 브라우저로 웹페이지를 띄우는데, 이 환경에서 구글 로그인을 시도하면 접근이 차단되는 상황이었다. 별도의 브라우저 앱을 열지 않아도 빠르게 링크를 확인할 수 있어 사용자 입장에서는 편리하지만, OAuth 로그인에는 제약이 있었다.

발생 환경

인증: Firebase 12.6.0 (Google OAuth 2.0)
플랫폼: 모바일 (Android/iOS)
브라우저: 카카오톡 인앱 브라우저

문제 증상

카카오톡에서 공유된 링크를 클릭하여 페이지가 열리고, 구글 로그인 버튼을 누르면 다음과 같은 오류 화면이 표시되었다:

![[KakaoTalk_Photo_2025-12-17-17-08-50-1.jpeg]]

403 Error: disallowed_useragent
This user-agent is not permitted to make an OAuth authorization request

데스크톱 브라우저, Safari, Chrome 등 일반 브라우저 환경에서는 정상적으로 로그인이 진행되었으나, 카카오톡 인앱 브라우저에서만 차단되었다.

원인 추적

검색하여 찾은 결과, 구글의 OAuth 보안 정책이 원인임을 확인했다:

구글은 안드로이드 WebView 기반의 인앱 브라우저에서의 OAuth 로그인을 차단하고 있다
이는 보안상의 이유로, 사용자가 어떤 앱 내부에서 로그인하는지 명확히 알 수 없기 때문이다
카카오톡 인앱 브라우저는 WebView 기반이므로 이 정책에 해당한다

즉, 구글 측의 의도적인 제한이었고, 코드나 설정을 바꿔서 해결할 수 있는 문제가 아니었다.

해결 방법

사용자가 카카오톡 인앱 브라우저로 접속한 경우, 자동으로 외부 브라우저로 리디렉션하는 방식으로 해결했다.

1. 브라우저 감지 유틸리티 작성

src/lib/browserDetect.ts 파일을 생성하여 카카오톡 인앱 브라우저 감지 및 외부 브라우저 열기 함수를 구현했다:

// src/lib/browserDetect.ts

export function isKakaoTalkBrowser(): boolean {
  const userAgent = navigator.userAgent.toLowerCase();
  return userAgent.includes('kakaotalk');
}

export function openInExternalBrwoser(url?: string): void {
  const targetUrl = url || window.location.href;
  window.location.replace(`kakaotalk://web/openExternal?url=${encodeURIComponent(targetUrl)}`);
}

2. 로그인 컴포넌트에서 자동 리디렉션 적용

src/components/auth/LoginForm.tsx에서 컴포넌트 마운트 시점에 카카오톡 인앱 브라우저를 감지하고, 해당하는 경우 외부 브라우저로 자동 리디렉션하도록 구현했다:

// src/components/auth/LoginForm.tsx

import { isKakaoTalkBrowser, openInExternalBrwoser } from "@/lib/browserDetect";

export const LoginForm = ({returnUrl}: LoginFormProps) => {
  // ... 기타 코드 ...

  useEffect(()=>{
    if (isKakaoTalkBrowser()) {
      openInExternalBrwoser();
    }
  }, [])

  // ... 나머지 로그인 로직 ...
}

이렇게 하면 카카오톡 인앱에서 로그인 페이지를 열었을 때, 자동으로 기본 브라우저(Safari, Chrome 등)로 전환되어 구글 로그인을 정상적으로 진행되었다.

3. 동작 방식

사용자가 카카오톡에서 공유된 링크를 클릭
LoginForm 컴포넌트가 마운트되면서 useEffect 실행
isKakaoTalkBrowser()로 User-Agent 확인
카카오톡 인앱 브라우저인 경우 openInExternalBrwoser() 호출
kakaotalk://web/openExternal 스킴을 통해 외부 브라우저로 자동 전환
외부 브라우저에서 구글 로그인 정상 진행

정리

핵심: 구글은 WebView 기반 인앱 브라우저에서의 OAuth 로그인을 차단한다. 카카오톡 인앱 브라우저 사용자를 감지하여 외부 브라우저로 유도하는 것이 현실적인 해결책이다.

팁: 로그인 페이지 진입 시점에 브라우저 환경을 체크하고, 필요하면 사용자에게 "외부 브라우저로 열기"를 안내하는 UI를 추가하는 것도 좋은 방법이다. 현재 구현은 자동 리디렉션 방식으로, 사용자 경험을 최대한 매끄럽게 만들었다.

참고 자료

느낀 점

웹 서비스를 개발할 때는 다양한 브라우저 환경을 고려해야 하고, 특히 모바일에서는 인앱 브라우저 환경도 테스트해봐야 한다는 것을 경험할 수 있었다.
사용자 입장에서는 한 번의 전환이 불편할 수 있지만, 보안을 위한 구글의 정책이라는 점에서 이해할 수 있었고, 최대한 자동화하여 마찰을 줄이는 방향으로 구현하는 방식을 배웠다.