주로 휴대폰 본인 인증을 구현할 때 PG 사를 통해서
웹 - 아이프레임이나 혹은 어플 - 웹뷰를 이용하여 PASS 인증 UI를 띄운다.
그렇다면 웹 - 아이프레임으로 구현되어있는 프로젝트를 그대로 반응형 스타일만 다루어서 웹뷰 하이브리드 어플로 배포했을 경우
즉, 어플 프로젝트 > 웹뷰(웹 프로젝트) > 아이프레임 혹은 웹뷰(인증 UI)
이런 구조의 하이브리드 환경일 경우에도 PASS 어플이 정상적으로 연동되는가?
필자가 해당 문제를 해결하기 위해 겪었던 주요 이슈와 개념을 간결하게 포스팅하고자 한다.
먼저, 필자 또한 PASS 어플 직접을 연동하지 않고 PG사를 거쳤기에 설명이 부정확할 수 있다는 점 양해를 구한다.
1. PASS 인증 방식 2가지
- 인증 UI가 모달 방식으로 띄워지고, 모바일 환경을 위해 모달 크기에 따라 반응형 스타일도 적용되어있다.
여기서, '패스 인증' 들어갔을 때, 두 가지 방식으로 인증이 진행될 수 있음을 확인했다.
(1) 푸시 알림
먼저, 이름과 전화번호 등의 개인 정보를 입력하여 패스 인증을 요청하면, 기기에 설치되어 있는 PASS 어플에서 푸시알림이 오는 방식이다.
어플을 직접 연동하는 방식이 아니기 때문에 어느 환경에서도 무난하게 활용 가능하다. 하지만 어플이 없는 경우에는 알림 또한 오지 않는다는 단점이 있다.
(2) 어플 연동
버튼을 눌렀을 때 기기에 설치된 어플을 통해 자동으로 연결되는 방식이다. 만약 어플이 없다면 플레이 스토어 혹은 앱스토어로 연결되는 앱링크 방식이다. 하지만 동일한 scheme 을 사용하는 어플이 있을 경우(ex, 플레이스토어, 원스토어 같은 앱시장 같은 경우에는 market:// 스킴이 동일하게 인텐트로 설정되어 있다) 연결 프로그램을 선택하는 토스트가 올라오거나 위와 같은 하이브리드 환경에서는 오류가 발생할 수 있다.
- 필자가 겪었던 경우는 (2) 어플 연동이었다. 모바일웹 에서는 어플 연동이 되었지만 어플에서는 반응이 없었고, PG 사에서는 (1) 푸시 알림 방식으로 전환하는 별다른 설정이 없다고 하여 이를 해결하고자 했다(ios 앱에서는 (1) 푸시 알림 방식, android 앱에서는 (2) 앱링크 호출 방식으로 고정된 상황있었다).
2. Flutter 외부 앱 연동
- 이를 언급하기 전에 처음에 물어보았던 하이브리드 구조에서 앱링크 호출에 반응하는 질문에 대한 대답은 'No' 이다. 마치 웹뷰 안에 웹뷰가 있는 듯한 구조이었기 때문에 호출 이벤트가 앱프로젝트까지 닿지 못했다. 그렇기 때문에 호출되는 url 정보를 직접 받아서 앱 환경에서 열어주어야 했었다.
플러터에서 외부 앱을 연동할 때 주로 쓰이는 패키지는 두가지가 있다. url_launcher 와 android_intent 이다.
url_launcher 주로 외부브라우저를 띄울때 쓰이는데 앱링크를 받아서 호출할 수도 있다. 해당 방식은 android, ios 모두에서 활용 가능하다. 하지만 android_intent 패키지를 활용하여 추가 인자를 넣어 실행시킬 수 있다. 필자의 경우 앱링크에서 에서 인자까지 담겨 오기 때문에 url_launcher 활용하였다.
그리고 21년 11월 이후로 타겟버전 sdk 30 부터는 외부앱을 호출하기 위해서 매니페스트 파일에 쿼리 태그 안에 패키지를 묶어서 선언해두어야 한다. (https://developer.android.com/training/basics/intents/package-visibility?hl=ko)
3. 앱링크 변환
일단, 해당 url을 호출하기 위해서는 웹뷰 내에서 값을 받아와야 한다. 그러기 위해서는 웹뷰 내에 프로젝트에서 호출되는 url을 감지하는 프로퍼티에 콜백 함수를 삽입해주어야 한다. 플러터 웹뷰는 대표적으로 두가지 패키지가 있는데 webview_flutter 와 inappwebview 이다.
webview_flutter 에서는 navigationDelegate 프로퍼티에서 호출 내용을 받을 수 있고,
inappwebview 에서는 shouldOverrideUrlLoading 프로퍼티에서 받을 수 있다(필자는 inappwebview 를 사용했다).
여기까지 세팅은 완료하였고, 이제 받아온 url을 호출하면 되는데 여기서부터는 PG사 별로 값이 다를 수 있다는 점 염두해주길 부탁하는 바이다. 만약 intent 스킴으로 시작하는 url 이 온다면 이를 앱링크 형식으로 바꿔주거나 해당 인텐트 정보를 파싱하여 AndroidIntent() 형식에 맞추어 실행시키면 된다.
휴대폰 본인 인증 같은 경우, 각 통신사별로 PASS 앱 스킴명은 지정되어 있다. 그렇기 때문에 intent:// 뒤로 오는 인자와 같이 스킴을 해당 통신사에 맞게끔 변환하는 것이다.
[PASS-SKT] tauthlink://
[PASS-KTF] ktauthexternalcall://
[PASS-LGT] upluscorporation://
이런식으로 변환 한뒤 실행한다면 기기에 있는 PASS 어플과 연동될 것이다.
p.s. 몇일간 계속 고민하며 겨우 구현한 내용인데 막상 끝내고 돌아보면 이렇게도 간단해 보일 수가 없다. 해당 포스트가 이와 같은 문제로 고생하는 다른 누군가에게 도움이 되었으면 좋겠다.
참고 링크
https://minwook-shin.github.io/flutter-android-intent/
'study' 카테고리의 다른 글
| boj 13300 javascript (0) | 2022.06.18 |
|---|---|
| C 언어 기초 (0) | 2022.06.17 |
| 컴퓨팅 사고 (0) | 2022.06.15 |
| envoy proxy 에 대하여 (0) | 2021.10.23 |
| RN vs Flutter (0) | 2021.10.17 |
