웹 브라우저에서 프로그램 설치 여부 확인

은행 홈페이지를 이용하려고 하면 무슨 무슨 보안 프로그램을 먼저 설치하라고 한다.

 

그런데 설치 페이지로 가면 현재 프로그램이 설치되었는지 알려주고 필수 프로그램이 설치되어있지 않다고 한다. 

 

 

어떻게 구현한 걸까?

 

이전에는 ActiveX 를 이용해서 은행에서 보안 프로그램을 깔려면 익스플로어로 접속해야 하곤 했다.

 

지금은 이게 금지되어서 HTML5 방식이나 별도의 api를 호출해야 한다.

 

프로젝트에서 자주 만나는 문제라 일단 간단하게 여기에 남겨본다.

 

(되게 오래된 소스이고 개발자에게 전달하면 알아서 쓰거나 구글링하거나 하더라)

 

반응형

---

 

① 로그인 중 보안모듈을 통과해야 하거나 뭔가 보안이 적용된 웹페이지를 호출하려고 하면

 

② document.webkitHidden 과 document.hidden 으로 프로그램을 계속 호출한다. 

 

③ 프로그램이 호출되지 않아 타임아웃이 되면 "프로그램 미설치" 안내를 띄워준다.

 

 

 

 

 

---

 

 

아래는 참고용 코드 

 

var appSchem = 'mayapp://launch?Data=abcdefg';

isMyApp();

location.href = appSchem;

function isMyApp(){
    function clearTimers(){
        clearInterval(heartbeat);
        clearTimeout(timer);
    }
    function intervalHeartbeat(){
        if(document.webkitHidden || document.hidden){
            clearTimers();
            console.log('앱이 설치 되어 있습니다.');
        }
    }
    heartbeat = setInterval(intervalHeartbeat, 200);
    var deLay = 1000;
    timer = setTimeout(function() {
        console.log('앱이 없습니다.');
    }, deLay);
}

 

 

 

주의사항

 

크롬, 엣지 등에서는 intent 로 하면 마켓으로 연결된다. 

 

커스텀 스킴으로 하면 현재 화면에 남아있다. 

 

필요에 따라 적용하자.