스킴이란? (인앱 브라우저에서 구글 정책에 의해 구글 로그인 액세스 차단되는 현상 해결해보기)

자주 오고 싶지만 .. 어쩌다보니 한 달에 한 번씩 오는 개발 블로그 .....ㅎㅎ...
이번에는 너무 재밌는 작업을 해서 포스팅으로 남기려고 방문했습니당~!
 

 
카톡으로 회사 서비스를 공유하는 경우, 구글 로그인을 하는 경우 403 오류가 발생하며 차단되는 현상이 발생해서 해결이 필요했어요.
 
oauth 사용해보신 분들이라면 많이 마주해보셨을 거 같은데요,
구글 내부에서 자체적으로 막아두었기 때문에 인앱에서 구글로그인이 막히는 지극히 당연한 현상 입니다..ㅎㅎ
 
그래도 서비스 특성상 해결되면 좋을 것 같다 하셔서 다른 서비스의 케이스들 탐구하기 ...~!

 
* 해결을 위해 참고한 서비스 : 원티드

	ios	안드로이드
카카오톡	// 기본브라우저 열리며 표출	// 지원 안함
링크드인	// alert만 표출	// intent 방식 차단으로 접속안됨
네이버	// alert만 표출	// 기본브라우저 열리며 표출

 

원티드는 스킴을 활용한 것 같더라구요 ㅎㅎ
 

⭐️ 스킴(Scheme)

앱을 여는 규칙을 정의한 프로토콜 주소 (ex. kakaotalk://, intent://, x-safari-https://)
 

1. 스킴을 사용 하기 위한 조건

특정 앱이 설치되어 있어야 함
앱이 처리할 수 있는 스킴이어야 함 (앱이 등록한 intent-filter 필요)
 

2. 스킴 예시

1. Android에서 공식적으로 제공하는 intent 스킴
    -> intent://...#Intent;scheme=https;package=com.android.chrome;end;
 
2. 애플 비공식적인 우회 스킴
    -> x-apple-action://openURL?url=…
    -> x-safari-https://...
 
3. 카카오톡 커스텀 스킴
    -> kakaotalk://web/openExternal?...
 
 
[ 사용한 방법 ]
navigator.userAgent를 사용해서 os와 인앱을 구분해주고,
이에 따라서 케이스를 나눠 각 케이스에서 사용 가능한 스킴으로 처리 진행해주었습니다 ㅎㅎ
 
os와 인앱마다 사용 가능하고 우회 가능한 스킴이 조금씩 다르더라구요 ㅎㅎ
애플 비공식 스킴 두가지 중 한 가지만 막힌 인앱도 있었고 두가지 다 막힌 인앱이 있어서 배포 -> 테스트 -> ...는 필수였어요 ..ㅎㅎ

	ios (기종 : 15 pro)	안드로이드 (기종 : s20)
카카오톡	// ✅, 카카오톡에서 지원하는 스킴 사용	// ✅, 안드로이드에서 공식적으로 지원하는 스킴인 intent 활용
링크드인	// ✅, 링크드인에서 공식 스킴을 막아두어 비공식 스킴 활용 (대신 ios 버전 낮은 기종에서는 사파리가 열리지 않을 가능성이 있음)	// 🔼, 기본 브라우저에 따라 막히는 유무가 달라서 예외처리 진행
네이버	// ❌, 비공식적인 스킴 모두 막혀 이동 불가능	// ✅, 안드로이드에서 공식적으로 지원하는 스킴인 intent 활용

 
이런식으로 서비스에서 표출되도록 개발 완료 ㅎㅎ

 
 
+ 지원하지 않는 앱이라도 인앱 조건에 넣어주면 좋을 것 같아서 인앱 판별하는 조건도 추가해줌!
 
const isInAppBrowser = () => {
  const ua = navigator.userAgent || navigator.vendor || (window as any).opera;
 
  const isWebview =
    /(FBAN|FBAV|Instagram|Line|KAKAOTALK|NAVER|Whale|MicroMessenger|Snapchat|Twitter|LinkedIn|TikTok)/i.test(
      ua,
    ) ||
    (/\bwv\b/.test(ua) && /android/i.test(ua)) || // 안드로이드 WebView 체크
    /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(ua); // iOS WebView 체크
 
  return isWebview;
};
 
이걸 통해서 위챗, 인스타그램 등의 케이스도 체크했는데 잘 통과하길래 개발 마무리 했습니당 ㅎㅎ

---

 
+ 해당 기능을 구현하며
 
앱 내부 로직과 시스템 간 연결을 다루는 작업이라 새롭게 배운 부분이 많았습니다 !

스킴을 활용해 우회하는 로직을 구현하였는데, 앱마다 예외 상황이 다르고 os마다도 다르고 브라우저 마다도 달라서
아이폰이랑 안드로이드 폰 두 개 들고 배포 → 테스트 → 수정 무한 반복 했던 것 같아용 ㅎ
 
처음 다뤄보는 영역이라 정신은 없었지만, 새롭고 배운 것도 많았고 하나씩 해결해나가는 과정이 정말 재밌었슴당
 
사실 403 뜨면 그대로 표출하는 사이트들이 대부분인데, 이런 작업 해 볼 수 있어서 럭키~^.^🍀