카카오 인앱 브라우저 탈출하기(feat NextJS)

문제 인식

• 카카오 알림톡에서 링크를 클릭하여 사이트 접속
• 구글 간편 로그인 선택시 로그인 오류 발생

원인

• 구글 정책상 인앱 브라우저에서 로그인 하지 못 하도록 되어 있음
• 카카오톡에서는 URL 링크 클릭시 기본적으로 인앱 브라우저를 강제하도록 되어있음.

해결 방안

• 브라우저의 userAgent를 통해 카카오 인앱 여부 판단
• 카카오 인앱 뷰 인 경우 kakaotalk://web/openExternal 를 통해 외부 브라우저로 오픈 호출
• kakaoweb://closeBrowser 를 통해 인앱 브라우저 닫기
  (미호출시 인앱 브라우저가 닫히지 않고 카카오에 열려있음)

'use client';

import { ReactNode, useEffect } from 'react';

function OpenExternalBrowser({ children }: { children: ReactNode }) {

 const isIOSAgent = (userAgent: string) => {
    return /iphone|ipad|ipod/i.test(userAgent);
  };


 const isKakaoTalkAgent = (userAgent: string) => {
    return /kakaotalk/i.test(userAgent);
  };


  const closeKakaoTalkBrowser = (userAgent: string) => {
    if (isIOSAgent(userAgent)) {
      window.location.href = 'kakaoweb://closeBrowser';
      return;
    }

    window.location.href = 'kakaotalk://inappbrowser/close';
    return;
  };


useEffect(() => {
    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
      return;
    }

    const userAgent = navigator.userAgent.toLowerCase();
    const currentUrl = window.location.href;

    if (isKakaoTalkAgent(userAgent)) {
      openKakaoTalkOpenExernalBrowser(currentUrl);
      setTimeout(() => {
        closeKakaoTalkBrowser(userAgent);
      });
      return;
    }

  }, []);

  return children;
}

export default OpenExternalBrowser;