Tôi đang phát triển luồng xác thực OAuth hoàn toàn bằng JavaScript và tôi muốn hiển thị cho người dùng cửa sổ "cấp quyền truy cập" trong cửa sổ bật lên, nhưng nó bị chặn.

Làm cách nào tôi có thể ngăn chặn các cửa sổ bật lên được tạo bởi window.openhoặc window.showModalDialogbị chặn bởi các trình chặn cửa sổ bật lên của các trình duyệt khác nhau?

Nguyên tắc chung là các trình chặn cửa sổ bật lên sẽ tham gia nếu window.openhoặc tương tự được gọi từ javascript không được gọi bằng hành động trực tiếp của người dùng . Nghĩa là, bạn có thể gọi window.openđể phản hồi lại bằng cách nhấp vào nút mà không bị chặn bởi trình chặn cửa sổ bật lên, nhưng nếu bạn đặt cùng một mã trong một sự kiện hẹn giờ thì nó sẽ bị chặn. Độ sâu của chuỗi cuộc gọi cũng là một yếu tố - một số trình duyệt cũ hơn chỉ nhìn vào người gọi ngay lập tức, các trình duyệt mới hơn có thể quay lại một chút để xem liệu trình gọi của người gọi có phải là một cú click chuột hay không.

Dựa trên mẹo rất hữu ích của Jason Sebring , và trên những thứ được đề cập ở đây và đó , tôi đã tìm thấy một giải pháp hoàn hảo cho trường hợp của mình:

Mã giả với đoạn mã Javascript:

1. ngay lập tức tạo một cửa sổ bật lên trống trên hành động của người dùng

   var importantStuff = window.open('', '_blank');

   Tùy chọn: thêm một số thông báo "chờ". Ví dụ:

   a) Một trang HTML bên ngoài: thay thế dòng trên bằng

   var importantStuff = window.open('http://example.com/waiting.html', '_blank');

   b) Văn bản: thêm dòng sau bên dưới dòng trên:

   importantStuff.document.write('Loading preview...');

2. điền nội dung khi sẵn sàng (ví dụ: khi cuộc gọi AJAX được trả lại)

   importantStuff.location.href = 'http://shrib.com';

Làm phong phú cuộc gọi đến window.openvới bất kỳ tùy chọn bổ sung nào bạn cần.

Tôi thực sự sử dụng giải pháp này để chuyển hướng mailto và nó hoạt động trên tất cả các trình duyệt của tôi (windows 7, Android). Các _blankchút giúp cho mailto chuyển hướng để làm việc trên điện thoại di động, btw.

Kinh nghiệm của bạn? Bất kỳ cách nào để cải thiện điều này?

Ngoài bài đăng Swiss Mister, trong trường hợp của tôi, window.open đã được đưa ra bên trong một lời hứa, điều này đã bật trình chặn cửa sổ bật lên, giải pháp của tôi là: trong góc:

$scope.gotClick = function(){

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

    }
  );
};

dịch vụ trình duyệt:

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

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

đây là cách bạn có thể mở một tab mới bằng cách sử dụng phản hồi lời hứa và không gọi trình chặn cửa sổ bật lên.

Như một thực tiễn tốt, tôi nghĩ rằng nên kiểm tra xem cửa sổ bật lên có bị chặn hay không và hãy hành động trong trường hợp. Bạn cần biết rằng window.open có giá trị trả về và giá trị đó có thể là null nếu hành động thất bại. Ví dụ: trong đoạn mã sau:

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;
}

nếu cửa sổ bật lên bị chặn, window.open sẽ trả về null. Vì vậy, hàm sẽ trả về false.

Ví dụ: hãy tưởng tượng gọi hàm này trực tiếp từ bất kỳ liên kết nào với target="_blank": nếu cửa sổ bật lên được mở thành công, việc trả về falsesẽ chặn hành động liên kết, nếu không thì cửa sổ bật lên bị chặn, việc trả về truesẽ cho phép hành vi mặc định (mở cửa sổ _blank mới) và tiếp tục .

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

Bằng cách này, bạn sẽ có một cửa sổ bật lên nếu nó hoạt động và cửa sổ _blank nếu không.

Nếu cửa sổ bật lên không mở, bạn có thể:

• mở một cửa sổ trống như trong ví dụ và tiếp tục
• mở một popup giả mạo (một iframe bên trong trang)
• thông báo cho người dùng ("vui lòng cho phép cửa sổ bật lên cho trang web này")
• mở một cửa sổ trống và sau đó thông báo cho người dùng, v.v.

từ API JavaScript oauth của Google:

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

Xem khu vực nơi nó đọc:

Thiết lập xác thực

Việc triển khai OAuth 2.0 của khách hàng sử dụng cửa sổ bật lên để nhắc người dùng đăng nhập và phê duyệt ứng dụng. Cuộc gọi đầu tiên đến gapi.auth. Mượtize có thể kích hoạt trình chặn cửa sổ bật lên, vì nó gián tiếp mở cửa sổ bật lên. Để ngăn chặn trình chặn cửa sổ bật lên kích hoạt các cuộc gọi auth, hãy gọi gapi.auth.init (gọi lại) khi máy khách tải. Cuộc gọi lại được cung cấp sẽ được thực thi khi thư viện sẵn sàng thực hiện các cuộc gọi auth.

Tôi đoán nó liên quan đến câu trả lời thực sự ở trên trong cách giải thích nếu có phản hồi ngay lập tức, nó sẽ không vấp phải báo động bật lên. "Gapi.auth.init" đang khiến nó xuất hiện ngay lập tức.

Ứng dụng thực tế

Tôi đã tạo một microservice xác thực nguồn mở bằng cách sử dụng hộ chiếu nút vào npm và các gói hộ chiếu khác nhau cho mỗi nhà cung cấp. Tôi đã sử dụng cách tiếp cận chuyển hướng tiêu chuẩn cho bên thứ 3 để cung cấp cho nó URL chuyển hướng để quay lại. Đây là chương trình để tôi có thể có các địa điểm khác nhau để chuyển hướng trở lại nếu đăng nhập / đăng ký và trên các trang cụ thể.

github.com/sebringj/athu

Passportjs.org

Tôi đã thử nhiều giải pháp, nhưng anh ấy là giải pháp duy nhất thực sự hiệu quả với tôi trong tất cả các trình duyệt

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

Tôi không muốn tạo trang mới trừ khi gọi lại thành công, vì vậy tôi đã làm điều này để mô phỏng nhấp chuột của người dùng:

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);
  });
}

Cách dễ nhất để thoát khỏi điều này là:

1. Không sử dụng tài liệu.open ().
2. Thay vào đó hãy sử dụng this.document.location.href = location; vị trí là url được tải

Ví dụ :

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

Điều này làm việc rất tốt cho tôi. Chúc mừng