ฉันกำลังพัฒนาโฟลว์การพิสูจน์ตัวตน OAuth อย่างหมดจดใน JavaScript และฉันต้องการให้ผู้ใช้เห็นหน้าต่าง "ให้สิทธิ์การเข้าถึง" ในป๊อปอัป แต่ถูกบล็อก

ฉันจะป้องกันหน้าต่างป็อปอัพที่สร้างขึ้นโดยwindow.openหรือwindow.showModalDialogถูกบล็อคโดยตัวบล็อกป็อปอัพของเบราว์เซอร์ที่ต่างกันได้อย่างไร

กฎทั่วไปคือว่าอัพป๊อปอัพจะมีส่วนร่วมหากwindow.openหรือคล้ายกันถูกเรียกจากจาวาสคริปต์ที่ไม่ได้เรียกโดยกระทำของผู้ใช้โดยตรง นั่นคือคุณสามารถwindow.openตอบสนองต่อการคลิกปุ่มโดยไม่ได้รับผลกระทบจากตัวป้องกันป๊อปอัป แต่ถ้าคุณใส่รหัสเดียวกันในเหตุการณ์ตัวจับเวลามันจะถูกบล็อก ความลึกของสายโซ่ก็เป็นอีกปัจจัยหนึ่ง - เบราว์เซอร์รุ่นเก่าบางรุ่นจะมองเฉพาะผู้โทรทันทีเบราว์เซอร์ที่ใหม่กว่าสามารถย้อนรอยเล็กน้อยเพื่อดูว่าผู้โทรโทรมานั้นเป็นการคลิกเมาส์เป็นต้นหรือไม่

จากเคล็ดลับที่มีประโยชน์มากของJason Sebringและจากสิ่งที่กล่าวถึงในที่นี้และที่นั่นฉันพบวิธีแก้ปัญหาที่สมบูรณ์แบบสำหรับกรณีของฉัน:

โค้ดหลอกพร้อมตัวอย่าง Javascript:

1. สร้างป๊อปอัพที่ว่างเปล่าทันทีที่การกระทำของผู้ใช้

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

   ไม่บังคับ: เพิ่มข้อความข้อมูล "กำลังรอ" ตัวอย่าง:

   a) หน้า HTML ภายนอก: แทนที่บรรทัดด้านบนด้วย

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

   b) ข้อความ: เพิ่มบรรทัดต่อไปนี้ใต้บรรทัดด้านบน:

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

2. เติมเนื้อหาให้พร้อมเมื่อพร้อม (ตัวอย่างเช่นเมื่อโทร 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 มีค่าส่งคืนและค่านั้นอาจเป็นโมฆะหากการดำเนินการล้มเหลว ตัวอย่างเช่นในรหัสต่อไปนี้:

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 จะคืนค่าว่าง ดังนั้นฟังก์ชันจะคืนค่าเท็จ

ลองจินตนาการถึงการเรียกฟังก์ชั่นนี้โดยตรงจากลิงก์ใด ๆ ที่มีtarget="_blank": หากป๊อปอัพเปิดสำเร็จการกลับมา falseจะบล็อกการทำงานของลิงก์มิฉะนั้นถ้าป๊อปอัปถูกบล็อกการกลับมาtrueจะทำให้พฤติกรรมเริ่มต้น (เปิดหน้าต่าง _blank ใหม่) .

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

วิธีนี้คุณจะมีป๊อปอัปหากใช้งานได้และมีหน้าต่าง _blank หากไม่มี

หากป๊อปอัปไม่เปิดขึ้นคุณสามารถ:

• เปิดหน้าต่างว่างเหมือนในตัวอย่างและดำเนินการต่อ
• เปิดป๊อปอัปปลอม (iframe ภายในหน้า)
• แจ้งผู้ใช้ ("โปรดอนุญาตป๊อปอัปสำหรับไซต์นี้")
• เปิดหน้าต่างว่างแล้วแจ้งผู้ใช้ ฯลฯ

จาก API JavaScript oauth ของ Google:

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

ดูพื้นที่ที่อ่าน:

การตั้งค่าการรับรองความถูกต้อง

การใช้งาน OAuth 2.0 ของลูกค้าใช้หน้าต่างป๊อปอัพเพื่อแจ้งให้ผู้ใช้ลงชื่อเข้าใช้และอนุมัติแอปพลิเคชัน การเรียกครั้งแรกไปที่ gapi.auth.authorize สามารถทริกเกอร์ตัวบล็อกป๊อปอัปเนื่องจากจะเปิดหน้าต่างป๊อปอัพโดยอ้อม เพื่อป้องกันตัวบล็อกป๊อปอัพไม่ให้เรียกใช้การโทรแบบ auth โทร gapi.auth.init (callback) เมื่อไคลเอนต์โหลด การเรียกกลับที่ให้มาจะถูกดำเนินการเมื่อไลบรารีพร้อมที่จะทำการตรวจสอบการโทร

ฉันเดาว่ามันเกี่ยวข้องกับคำตอบที่แท้จริงข้างต้นในวิธีที่มันอธิบายหากมีการตอบสนองทันทีมันจะไม่เดินทางปลุกป๊อปอัพ "gapi.auth.init" กำลังทำให้ api เกิดขึ้นทันที

การใช้งานจริง

ฉันสร้าง microservice การรับรองความถูกต้องโอเพนซอร์ซโดยใช้โหนดพาสปอร์ตบนน. น. และแพคเกจหนังสือเดินทางต่าง ๆ สำหรับแต่ละผู้ให้บริการ ฉันใช้วิธีการเปลี่ยนเส้นทางแบบมาตรฐานไปยังบุคคลที่สามโดยให้ 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);
  });
}

วิธีที่ง่ายที่สุดในการกำจัดสิ่งนี้คือ:

1. อย่าใช้ document.open ()
2. ใช้ this.document.location.href = location แทน โดยที่ location คือ url ที่จะโหลด

เช่น

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

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

มันใช้งานได้ดีมากสำหรับฉัน ไชโย