1. Captive portal이란?
Captive portal(캡티브 포털)이란 Wi-Fi 또는 유선 네트워크에 새로 연결된 사용자에게 네트워크 리소스에 대한 광범위한 액세 권한이 부여되기 전에 표시되는 웹브라우저로 액세스하는 웹 페이지입니다.
https://en.wikipedia.org/wiki/Captive_portal
Captive portal - Wikipedia
From Wikipedia, the free encyclopedia Jump to navigation Jump to search Web page displayed to new users of a network An example of a captive web portal used to log onto a restricted network. A captive portal is a web page accessed with a web browser that i
en.wikipedia.org
2. Captive portal을 통한 모바일 웹 서비스 적용시 이슈
우선 필자는 Captive portal을 통해 모바일 웹 서비스를 적용중에 있다. 이때 발생하는 이슈로 불완전한 script 및 인증시의 캡티브 포털 창의 자동 닫힘으로 인해 서비스를 지속적으로 제공 할 수 없는 문제가 있었다.
이를 해결하기 위해 Captive portal 접속시 자체 브라우저로 모바일 웹 서비스를 연동 해줘야하는 필요성이 제기되었다.
우선 안드로이드, IOS에서 발생하는 문제의 차이점이 있는데,
안드로이드의 경우에는 Captive portal 인증 후 창이 자동적으로 닫혀서 이후 웹 서비스로의 연결에 성공해도 지속적인 사용이 불가능하였다.
IOS의 경우에는 Captive portal 인증, 웹 서비스로의 연결에 성공하였으나 script에 대해 정상적인 조작이 불가능하였다. 단적인 예로 alert 이벤트도 작동하지 않았다.
위와 같은 문제를 해결하기 위해서는 모바일 브라우저로 인증 및 웹 서비스 연결을 통해 정상적인 서비스의 제공이 꼭 필요한 상황이었다.
3. Captive portal 인증 및 모바일 브라우저 웹 서비스 연결 해결책
필자는 어찌저찌 위의 문제들을 해결을 하였으나, 이같은 방법은 정상적인 방법이라 판단되지 않음을 미리 알리겠다.
또한, 이러한 방법을 통해서라도 정상적인 서비스를 제공 하고자 하는 필자와 같은 사람들에게 도움이 되기를 바란다.
우선, 필자가 이용한 AP는 CISCO사의 AP이다.
CISCO 장비 내에선 Captive portal 기능과 관련하여 splash page 설정 및 인증 이후의 redirection에 대한 설정까지 지원하고 있다.
splach page를 설정함에 있어 프로토콜을 http, https를 지정 할 수 있다. 다른 AP의 경우는 http만 되는 경우도 있을텐데 필자가 성공한 케이스는 https를 통한 케이스만 성공하였다.
안드로이드의 경우 Captive portal 인증 후 인증 창이 닫히기 때문에 우선적으로 모바일 브라우저로 연동이 필요하였다. 이때 이용 할 수 있는 방법이 intent:// 를 통한 방법이다.
location.href = 'intent://splash_page_url#Intent;scheme=http;package=com.android.chrome;end';필자의 경우는 화면 접속과 함께 Captive portal 접속임을 판단하여 위와 같이 작성하였다.
그러면 이미지와 같이 Captive portal 인증 화면이 전환되면서 브라우저에서 계속이라는 링크가 활성화 된다.
활성화 된 링크를 누르게 되면 모바일 브라우저로 전환되면서 AP에서 설정한 splash page로 이동하게 된다. 이때 http일 경우에는 정상적인 화면으로 넘어가지 못한다. 그래서 위에서 적었듯이 https로만 성공한 케이스인 것이다.
모바일 브라우저를 통해 인증 및 웹 서비스 연결이 정상적으로 이뤄졌으며, 일반적인 wifi와 같이 인터넷을 이용 할 수 있다.
IOS의 경우는 안드로이드와 같이 순탄한 과정은 아니였다. 그러나 결과적으로 safari로 웹 서비스를 전환하는데 성공했다.
우선 IOS의 경우에는 인증 전에 safari로 전환을 하지 못했다. 필자는 여러 참고 블로그를 통해 서비스를 구현 해보려했으나 모두 실패했다. 참고한 블로그에 대해서는 아래에 기재해 놓겠다.
IOS의 경우에는 ftp 서버를 만들고 이를 통해서 bridge 페이지에서 호출 하는 방식으로 처리를 하고 있었다. 그러나 이 방식도 IOS15버전부터는 기능이 제한된다하였다. 필자는 이런 가운데 가장 아래의 스택오버플로우에서 한줄기 빛과 같은 답변을 받았다.
답변의 내용은 다음과 같다.
Captive portal 인증 후 요청하고자 하는 url을 a tag에 full path로 기재하면 safari로 전환이 가능하는 답변이었다.
<a href="https://redirection_url">Safari로 열기</a>위와 같이 href 속성 내에 요청하고자 하는 url을 기재하였다니 다음과 같이 성공하였다.
safari로 전환이 성공적으로 이뤄졌으며, 일반적인 wifi와 같이 인터넷을 이용 할 수 있었다.
https://www.burndogfather.com/201
카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]
현재 이 방법은 iOS15 업데이트로 인해 사용이 불가능한 방법입니다. https://burndogfather.tistory.com/257 사용자가 조금 더 불편하게 접속하는 방법이 현재까지는 차선책이네요 ㅠㅜ 더 쾌적하게? 웹 서
www.burndogfather.com
https://burndogfather.tistory.com/257
iOS15 업데이트와 함께 찾아온 인앱브라우저 지옥과 최선
카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 더 쾌적하게? 웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은 브라우저를 사용할때 정말 피곤합니다. 휴대폰 본인
www.burndogfather.com
iOS: Open a Welcome Page in Safari, not CNA (post-authentication)
I'm running a captive portal, target audience are mobile devices only. I would like to open a "welcome page" to the user after he authenticated in the CNA. This page should open in (mobile) Safari,...
stackoverflow.com
4. 느낀점
사실 Captive portal이라는 개념에 대해서는 프로젝트를 접하면서 알게되었다. 이전에 공공와이파이를 이용하여 서비스 자체에 대해서는 접해본적은 있었으나, 이와같이 구성 및 인증에 대해서까지는 알지 못하였다. 이번 기회로 해당 기술에 대해서 배울 수 있어서 좋았으며, 사실 모바일 브라우저로 연동하는 부분에 있어 너무나도 빡침이 있었지만 그건 어찌저찌 해결되었으니 만족한다. 위의 링크해둔 블로그 작성자님께 무한함 감사를 드리며 마치겠다.