JavaScript에서 순전히 OAuth 인증 흐름을 개발 중이며 팝업에서 사용자에게 “grant access”창을 보여주고 싶지만 차단됩니다.

어떻게에 의해 하나 생성 창 팝업 방지 할 수 있습니다 window.open또는 window.showModalDialog다른 브라우저 ‘팝업 차단에 의해 차단되는가?

답변

일반적인 규칙은 팝업 사용자window.open 가 직접 사용자 조치에 의해 호출되지 않는 자바 스크립트에서 또는 이와 유사한 호출이 발생 하는 경우 팝업 차단기가 참여하는 것 입니다. 즉, window.open팝업 차단기에 치지 않고 버튼 클릭에 대한 응답으로 호출 할 수 있지만 타이머 이벤트에 동일한 코드를 넣으면 차단됩니다. 콜 체인의 깊이 또한 중요한 요소입니다. 일부 구형 브라우저는 즉시 발신자를보고, 최신 브라우저는 발신자의 발신자가 마우스 클릭인지 등을 조금 뒤로 추적 할 수 있습니다. 팝업 차단기를 피하려면 최대한 얕게 유지하십시오.

답변

를 기반으로 제이슨 세브링 의 매우 유용한 팁을 하고, 물건에 덮여 여기 와 거기 , 내 경우에 대한 완벽한 솔루션을 발견 :

자바 스크립트 스 니펫이 포함 된 의사 코드 :

사용자 작업에 즉시 빈 팝업을 만듭니다.
```
var importantStuff = window.open('', '_blank');
```
선택 사항 : “대기 중”정보 메시지를 추가하십시오. 예 :

a) 외부 HTML 페이지 : 위의 줄을
```
var importantStuff = window.open('http://example.com/waiting.html', '_blank');
```
b) 텍스트 : 위의 줄 아래에 다음 줄을 추가하십시오.
```
importantStuff.document.write('Loading preview...');
```
준비가되면 내용으로 채 웁니다 (예 : AJAX 호출이 반환 될 때)
```
importantStuff.location.href = 'http://shrib.com';
```

window.open필요한 추가 옵션으로 전화를 풍부하게하십시오 .

실제로이 솔루션을 mailto 리디렉션에 사용하며 모든 브라우저 (Windows 7, Android)에서 작동합니다. 이 _blank비트는 mailto 리디렉션이 모바일에서 작동하는 데 도움이됩니다.

당신의 경험은? 이것을 향상시킬 수있는 방법이 있습니까?

답변

또한 스위스 미스터 게시물, 내 경우에는 window.open 이 약속 내에서 시작되어 팝업 차단기가 켜지고 내 솔루션은 다음과 같습니다.

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

browserService :

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

이것은 약속 응답을 사용하고 팝업 차단기를 호출하지 않고 새 탭을 여는 방법입니다.

답변

좋은 습관 으로 팝업이 차단되었는지 테스트하고 경우에 따라 조치를 취하는 것이 좋습니다 . window.open에 반환 값이 있으며 작업이 실패하면 해당 값이 null 일 수 있음을 알아야합니다. 예를 들어 다음 코드에서

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

팝업이 차단되면 window.open은 null을 반환합니다. 따라서 함수는 false를 반환합니다.

예를 들어, target="_blank"팝업이 성공적으로 열리면 리턴
false하면 링크 동작이 차단되고 그렇지 않으면 팝업이 차단되면 true기본 동작 (새 _blank 창 열기)으로 돌아가서 계속됩니다. .

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

이렇게하면 작동하면 팝업이 표시되고 그렇지 않으면 _blank 창이 나타납니다.

팝업이 열리지 않으면 다음을 수행 할 수 있습니다.

예제와 같이 빈 창을 열고 계속하십시오.
가짜 팝업 (페이지 내부의 iframe)을 엽니 다.
사용자에게 알립니다 ( “이 사이트에 팝업을 허용하십시오”).
빈 창을 열고 사용자에게 알리십시오.

답변

Google의 oauth JavaScript API에서 :

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

읽는 영역을 참조하십시오.

인증 설정

클라이언트의 OAuth 2.0 구현은 팝업 창을 사용하여 사용자에게 응용 프로그램에 로그인하고 승인하라는 메시지를 표시합니다. gapi.auth.authorize에 대한 첫 번째 호출은 팝업 창을 간접적으로 열 때 팝업 차단기를 트리거 할 수 있습니다. 인증 차단시 팝업 차단기가 트리거되지 않도록하려면 클라이언트가로드 될 때 gapi.auth.init (callback)을 호출하십시오. 라이브러리가 인증 전화를 걸 준비가되면 제공된 콜백이 실행됩니다.

즉각적인 응답이 있는지 설명하는 방법에서 위의 실제 답변과 관련이 있다고 생각하면 팝업 경보가 작동하지 않습니다. “gapi.auth.init”는 API가 즉시 발생하도록합니다.

실용적인 응용 프로그램

npm의 노드 패스포트와 각 공급자에 대한 다양한 패스포트 패키지를 사용하여 오픈 소스 인증 마이크로 서비스를 만들었습니다. 나는 다시 리디렉션 URL을 제공하는 타사에 대한 표준 리디렉션 접근 방식을 사용했습니다. 이것은 프로그래밍 방식이므로 로그인 / 가입 및 특정 페이지에서 다른 곳으로 리디렉션 할 수 있습니다.

github.com/sebringj/athu

passportjs.org

답변

여러 솔루션을 시도했지만 실제로는 모든 브라우저에서 나를 위해 일한 유일한 솔루션입니다.

let newTab = window.open(); newTab.location.href = url;

답변

콜백이 성공적으로 반환되지 않으면 새 페이지를 만들고 싶지 않았으므로 사용자 클릭 을 시뮬레이트 하기 위해이 작업을 수행했습니다 .

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}