[Next.js] kakao 인앱 user-agent 감지

1. 문제상황

카카오톡으로 전송된 링크를 인 앱으로 열었을 때 기능이 제대로 동작하지 않은 경우가 있다.
구글 로그인 기능도 마찬가지!

 

2. 해결방법

강제로 사이트를 외부 브라우저로 열도록 하는 방법도 있지만 안정적인 방법을 찾지 못했다.
사용자가 혼란스러울 경우를 대비해, 카카오톡 인앱 브라우저일 경우
사용자가 구글 로그인을 시도한다면 alert로 안내문구를 띄우기로 했다.

3. 해결 과정 _ 카카오톡 브라우저에 대한 user-agent 감지

- 카카오톡 인앱에는 userAgent에 KAKAOTALK 문구가 포함되어있다.

Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 KAKAOTALK

- useEffect에서 navigator 객체를 통해 userAgent 정보를 가져와 KAKAOTALK 문구를 포함하고 있는지 확인한다.

const [isKakaoBrower, setKakaoBrower] = useState(false); useEffect(() => { const isKakao = navigator.userAgent.match("KAKAOTALK"); console.log(navigator.userAgent); setKakaoBrower(Boolean(isKakao)); }, []);

 

- 조건문을 사용해 버튼을 눌렀을 때 KAKAOTALK 여부에 따라 다르게 동작하도록 한다. 

 <div className="btn-connect" onClick={() => { if (isKakaoBrower === true) { alert(t("kakao_login_alert")); } else { setIsLoginOpen(true); } }} > {t("index_title_btn_1")} </div>

 

* navigator 객체란? 

navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다. 
navigator 객체의 appVersion과 userAgent 프로퍼티는 현재 사용하고 있는 브라우저의 버전 정보를 문자열로 반환한다.

http://www.tcpschool.com/javascript/js_bom_navigator

 

---

https://solbel.tistory.com/1395

https://www.howdy-mj.me/next/how-to-detect-device/