파이어베이스 구글로그인 403오류 액세스 차단됨 Google정책을 준수하지 않습니다.

인앱 브라우저 구글로그인 문제

파이어베이스의 구글 로그인 인증을 적용한 서비스의 URL을 카카오톡으로 공유했을 때, 링크를 클릭하면 카카오 인앱 브라우저로 열리게 됩니다. 이 인앱 브라우저의 구글 로그인을 시도하면 액세스 차단됨 Google 정책을 준수하지 않는다는 403 오류가 발생합니다.

 

포럼을 찾아보니 이 문제는 구글 내부 정책으로 인하여 발생하며, 안드로이드 인앱 브라우저를 사용하는 앱에서는 로그인을 차단하고 있었습니다. 

어플내의 웹뷰에서 구글로그인 제한으로 접속이 불가능해지는데, 실제 서비스 사용자들은 해당 페이지에서 무엇이 문제인지, 어떻게 해결해야 할지 몰라서 난감한 상황이 발생할 수 있습니다.

 

 

인앱 웹뷰 감지 함수

// 웹뷰 환경 감지 함수
function isWebView() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    const webviewRegex = /(Instagram|Line|Twitter|LinkedIn|Snapchat|WeChat|Weibo|QQ|baidubrowser|UCBrowser|MiuiBrowser|Alipay|Line|Nintendo|Xbox|Zalo|InMobi|GSA|MSI|KAKAO|Facebook|Instagram|trill)/i;

    if (webviewRegex.test(userAgent)) {
        return true;
    }

    return (window.navigator.standalone || document.referrer.includes('android-app://')) ||
           (window.webkit && window.webkit.messageHandlers);
}

프론트엔드에서 로그인을 처리하는 자바스크립트 코드에 새로운 웹뷰 환경 감지 함수를 추가합니다.

 

 

 if (isWebView()) {//웹뷰감지 403에러
        alert("현재 사용 중인 인앱 브라우저에서는 Google 로그인이 지원되지 않습니다. 다른 브라우저를 사용해 주세요.");
    } else {
    정상처리 코드
    }
    });

로그인 버튼을 처리하는 함수에서 'if'문을 사용하여 'isWebView()' 함수를 호출하고, 'userAgent' 문자열에서 'webviewRegex'에 정의된 패턴과 일치하는지 확인하여 인앱 브라우저를 감지합니다.

또한, 'windows.navigator.standalone'을 사용하여 iOS의 웹뷰를 감지하는 등 다양한 조건을 추가하여 감지합니다.

 

사용자가 웹뷰로 로그인을 시도할 경우 'alert'를 사용하여 사용자에게 다른 브라우저를 사용해달라는 안내문을 표시하여 오류페이지를 건너뛸 수 있습니다.