การโทรกลับ Facebook จะเพิ่ม '# _ = _' ต่อท้าย URL ที่ส่งคืน

การติดต่อกลับของ Facebook เริ่มต่อท้าย#_=_แฮชขีดล่างกับ URL ส่งคืนแล้ว

ไม่มีใครรู้ว่าทำไม ทางออกคืออะไร?

ผ่านการอัพเดทแพลตฟอร์มของ Facebook :

การเปลี่ยนแปลงในพฤติกรรมการเปลี่ยนเส้นทางเซสชัน

ในสัปดาห์นี้เราเริ่มเพิ่มส่วน # ____ = ____ ลงใน redirect_uri เมื่อฟิลด์นี้เว้นว่างไว้ โปรดตรวจสอบให้แน่ใจว่าแอปของคุณสามารถจัดการพฤติกรรมนี้ได้

เพื่อป้องกันสิ่งนี้ตั้งค่า redirect_uri ในคำขอ URL การเข้าสู่ระบบของคุณดังนี้: (ใช้ Facebook php-sdk)

$facebook->getLoginUrl(array('redirect_uri' => $_SERVER['SCRIPT_URI'],'scope' => 'user_about_me'));

UPDATE

ด้านบนตรงตามที่เอกสารระบุไว้เพื่อแก้ไขปัญหานี้ อย่างไรก็ตามโซลูชันที่เป็นเอกสารของ Facebook ไม่ทำงาน โปรดพิจารณาการแสดงความคิดเห็นในโพสต์บล็อกการอัปเดตแพลตฟอร์ม Facebookและทำตามข้อบกพร่องนี้เพื่อรับคำตอบที่ดีขึ้น ก่อนหน้านั้นให้เพิ่มสิ่งต่อไปนี้ในแท็กหัวของคุณเพื่อแก้ไขปัญหานี้:

<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        window.location.hash = '';
    }
</script>

หรือทางเลือกที่มีรายละเอียดมากขึ้น (ขอบคุณniftylettuce ):

<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        if (window.history && history.pushState) {
            window.history.pushState("", document.title, window.location.pathname);
        } else {
            // Prevent scrolling by storing the page's current scroll offset
            var scroll = {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            };
            window.location.hash = '';
            // Restore the scroll offset, should be flicker free
            document.body.scrollTop = scroll.top;
            document.body.scrollLeft = scroll.left;
        }
    }
</script>

TL; DR

if (window.location.hash === "#_=_"){
    history.replaceState 
        ? history.replaceState(null, null, window.location.href.split("#")[0])
        : window.location.hash = "";
}

เวอร์ชันเต็มพร้อมคำแนะนำทีละขั้นตอน

// Test for the ugliness.
if (window.location.hash === "#_=_"){

    // Check if the browser supports history.replaceState.
    if (history.replaceState) {

        // Keep the exact URL up to the hash.
        var cleanHref = window.location.href.split("#")[0];

        // Replace the URL in the address bar without messing with the back button.
        history.replaceState(null, null, cleanHref);

    } else {

        // Well, you're on an old browser, we can get rid of the _=_ but not the #.
        window.location.hash = "";

    }

}

เป็นขั้นเป็นตอน:

1. เราจะได้รับในการป้องกันรหัสถ้าเป็นfragment#_=_
2. ตรวจสอบว่าเบราว์เซอร์รองรับwindow.replaceStateวิธีHTML5 หรือไม่
   1. ทำความสะอาด URL โดยแยก#และรับเฉพาะส่วนแรก
   2. บอกhistoryให้แทนที่สถานะหน้าปัจจุบันด้วย URL ที่สะอาด สิ่งนี้จะแก้ไขรายการประวัติปัจจุบันแทนการสร้างรายการใหม่ สิ่งนี้หมายความว่าปุ่มย้อนกลับและไปข้างหน้าจะทำงานในแบบที่คุณต้องการ ;-)
3. หากเบราว์เซอร์ไม่สนับสนุนวิธีประวัติ HTML 5 ที่ยอดเยี่ยมเพียงแค่ล้าง URL ให้ดีที่สุดคุณสามารถทำได้โดยตั้งค่าแฮชเป็นสตริงว่าง นี่คือทางเลือกที่น่าสงสารเพราะมันยังคงใบกัญชาท้าย (example.com/#) #_-_และยังจะเพิ่มรายการประวัติศาสตร์ดังนั้นปุ่มย้อนกลับที่จะนำคุณกลับไป

history.replaceStateเรียนรู้เพิ่มเติมเกี่ยวกับ

window.locationเรียนรู้เพิ่มเติมเกี่ยวกับ

หากคุณต้องการลบ "#" ที่เหลือออกจาก URL

$(window).on('load', function(e){
  if (window.location.hash == '#_=_') {
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
  }
})

สิ่งนี้ดำเนินการโดย Facebook โดยการออกแบบเพื่อความปลอดภัย นี่คือคำอธิบายจาก Eric Osgood สมาชิกทีม Facebook:

สิ่งนี้ถูกทำเครื่องหมายเป็น 'โดยการออกแบบ' เพราะมันป้องกันช่องโหว่ความปลอดภัย

เบราว์เซอร์บางตัวจะต่อท้ายส่วนแฮชจาก URL ต่อท้าย URL ใหม่ที่มีการเปลี่ยนเส้นทาง (หาก URL ใหม่นั้นไม่มีแฮชแฟรกเมนต์)

ตัวอย่างเช่นถ้า example1.com ส่งคืนการเปลี่ยนเส้นทางไปยัง example2.com เบราว์เซอร์ที่ไปที่ example1.com # abc จะไปที่ example2.com # abc และเนื้อหาแฮชส่วนจาก example1.com จะสามารถเข้าถึงสคริปต์ใน example2 ได้ .com

เนื่องจากมีความเป็นไปได้ที่จะมีการเปลี่ยนเส้นทางการตรวจสอบใบหนึ่งไปยังอีกที่หนึ่งจึงมีความเป็นไปได้ที่จะมีข้อมูลการตรวจสอบความถูกต้องที่ละเอียดอ่อนจากแอปอื่นที่สามารถเข้าถึงได้

สิ่งนี้ได้รับการบรรเทาโดยการผนวกส่วนแฮชใหม่เข้ากับ URL การเปลี่ยนเส้นทางเพื่อป้องกันพฤติกรรมของเบราว์เซอร์นี้

หากความสวยงามหรือพฤติกรรมฝั่งไคลเอ็นต์ของ URL ที่ได้นั้นเป็นเรื่องที่น่ากังวลคุณสามารถใช้ window.location.hash (หรือแม้แต่การเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์ของคุณเอง) เพื่อลบอักขระที่ละเมิดออกไป

ที่มา: https://developers.facebook.com/bugs/318390728250352/

ไม่แน่ใจว่าทำไมพวกเขาถึงทำเช่นนี้ แต่คุณสามารถแก้ไขได้โดยการแฮชที่ด้านบนของหน้า:

if (window.location.hash == "#_=_")
  window.location.hash = "";

นอกจากนี้คุณยังสามารถระบุกัญชาของคุณเองบนredirect_uriพารามิเตอร์สำหรับการเรียกกลับ Facebook /api/account/callback#homeซึ่งอาจจะเป็นประโยชน์ในบางสถานการณ์เช่น เมื่อคุณเปลี่ยนเส้นทางกลับมาอย่างน้อยมันจะเป็นแฮชที่สอดคล้องกับเส้นทางที่รู้จักถ้าคุณใช้ backbone.js หรือคล้ายกัน (ไม่แน่ใจเกี่ยวกับ jquery mobile)

Facebook ใช้เฟรมและใช้ฟังก์ชันทุกอย่างในการสื่อสาร AJAX ปัญหาที่ใหญ่ที่สุดในกรณีนี้คือการรักษาสถานะหน้าปัจจุบัน เท่าที่ฉันเข้าใจ Facebook ตัดสินใจที่จะใช้จุดยึดจำลอง ซึ่งหมายความว่าหากคุณคลิกที่ใดที่หนึ่งพวกเขาจำลองว่าเป็นจุดยึดภายในหน้าของคุณและเมื่อการสื่อสาร AJAX เริ่มขึ้นพวกเขาก็เปลี่ยนจุดยึดของ URL ของคุณเช่นกัน

โซลูชันนี้ช่วยคุณตามปกติเมื่อคุณพยายามโหลดหน้าเว็บใหม่ (ไม่ใช่ ENTER, กดF5) เนื่องจากเบราว์เซอร์ของคุณส่ง URL ทั้งหมดพร้อมจุดยึดไปยังเซิร์ฟเวอร์ Facebook ดังนั้น Facebook เลือกสถานะล่าสุด (สิ่งที่คุณเห็น) และจากนั้นคุณสามารถดำเนินการต่อจากที่นั่น

เมื่อโทรกลับมาด้วย#_=_หมายความว่าหน้าเว็บนั้นอยู่ในสถานะพื้นฐานก่อนที่จะออกไป เนื่องจากจุดยึดนี้ถูกวิเคราะห์โดยเบราว์เซอร์คุณจึงไม่จำเป็นต้องกังวล

เป็นเรื่องที่น่ารำคาญเป็นอย่างยิ่งโดยเฉพาะอย่างยิ่งสำหรับแอปที่แยก URI และไม่เพียงแค่อ่าน $ _GET ... นี่คือการแฮ็คที่ฉันโยนเข้าด้วยกัน ... สนุก!

<html xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
        <script type="text/javascript">
        // Get rid of the Facebook residue hash in the URI
        // Must be done in JS cuz hash only exists client-side
        // IE and Chrome version of the hack
        if (String(window.location.hash).substring(0,1) == "#") {
                window.location.hash = "";
                window.location.href=window.location.href.slice(0, -1);
                }
        // Firefox version of the hack
        if (String(location.hash).substring(0,1) == "#") {
                location.hash = "";
                location.href=location.href.substring(0,location.href.length-3);
                }
        </script>
</head>
<body>
URI should be clean
</body>
</html>

สิ่งนี้อาจเป็นปัญหาร้ายแรงหากคุณใช้เฟรมเวิร์ก JS กับ URL hashbang (/ #! /) เช่น Angular แน่นอน Angular จะพิจารณา URL ที่มีส่วนที่ไม่ใช่ hashbang ว่าไม่ถูกต้องและมีข้อผิดพลาด:

Error: Invalid url "http://example.com/#_=_", missing hash prefix "#!".

หากคุณอยู่ในกรณีดังกล่าว (และเปลี่ยนเส้นทางไปยังรูทโดเมนของคุณ) แทนที่จะทำ:

window.location.hash = ''; // goes to /#, which is no better

เพียงทำ:

window.location.hash = '!'; // goes to /#!, which allows Angular to take care of the rest

ฉันไม่เห็นว่าปัญหานี้เกี่ยวข้องกับ Facebook AJAX อย่างไร ในความเป็นจริงปัญหานี้ยังเกิดขึ้นกับ JavaScript ถูกปิดใช้งานและเปลี่ยนเส้นทางการเข้าสู่ระบบตามหมดจด

ตัวอย่างการแลกเปลี่ยนกับ Facebook:

1. GET <https://www.facebook.com/dialog/oauth?client_id=MY_APP_ID&scope=email&redirect_uri=MY_REDIRECT_URL> RESPONSE 302 Found Location: <https://www.facebook.com/connect/uiserver.php?[...]>  
2. GET <https://www.facebook.com/connect/uiserver.php?[...]> RESPONSE 302 Found MY_REDIRECT_URL?code=FB_CODE#_  
3. GET MY_REDIRECT_URL?code=FB_CODE#_  

เกิดขึ้นกับ Firefox สำหรับฉันด้วยเช่นกัน

การเพิ่มสิ่งนี้ไปยังหน้าเปลี่ยนเส้นทางของฉันแก้ไขปัญหาให้ฉัน ...

if (window.location.href.indexOf('#_=_') > 0) {
    window.location = window.location.href.replace(/#.*/, '');
}

ด้วยเราเตอร์เชิงมุมและเชิงมุม UI คุณสามารถแก้ไขปัญหานี้ได้

    app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

      // Make a trailing slash optional for all routes
      // - Note: You'll need to specify all urls with a trailing slash if you use this method.
      $urlRouterProvider.rule(function ($injector, $location) {
        /***
        Angular misbehaves when the URL contains a "#_=_" hash.

        From Facebook:
          Change in Session Redirect Behavior
          This week, we started adding a fragment #_=_ to the redirect_uri when this field is left blank.
          Please ensure that your app can handle this behavior.

        Fix:
          http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url#answer-7297873
        ***/
        if ($location.hash() === '_=_'){
          $location.hash(null);
        }

        var path = $location.url();

        // check to see if the path already has a slash where it should be
        if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
          return;
        }
        else if (path.indexOf('?') > -1) {
          $location.replace().path(path.replace('?', '/?'));
        }
        else {
          $location.replace().path(path + '/');
        }
      });

      // etc ...
    });
});

หากคุณใช้ vue-router คุณสามารถต่อท้ายรายการเส้นทาง:

{
  path: '/_=_',
  redirect: '/', // <-- or other default route
},

มีการแนะนำการเปลี่ยนแปลงในวิธีที่ Facebook จัดการกับการเปลี่ยนเส้นทางเซสชัน ดูที่ "การเปลี่ยนแปลงในพฤติกรรมการเปลี่ยนเส้นทางเซสชัน" ในโพสต์บล็อกOperation Developer Loveสัปดาห์นี้สำหรับการประกาศ

สำหรับฉันฉันจะทำให้การเปลี่ยนเส้นทาง JavaScript #_=_ไปยังหน้าอื่นในการกำจัด แนวคิดด้านล่างควรใช้งานได้ :)

function redirect($url){
    echo "<script>window.location.href='{$url}?{$_SERVER["QUERY_STRING"]}'</script>";        
}

วิธีแก้ปัญหาที่เหมาะกับฉัน (โดยใช้ Backbone.js) คือการเพิ่ม "# /" ลงในส่วนท้ายของ URL การเปลี่ยนเส้นทางที่ส่งไปยัง Facebook Facebook จะเก็บส่วนที่ให้ไว้และจะไม่ผนวก "_ = _" ของตัวเอง

เมื่อกลับมา Backbone จะลบส่วน "# /" สำหรับ AngularJS ให้ต่อท้าย "#!" ไปยัง URL ที่ส่งคืนควรทำงาน

โปรดทราบว่าตัวระบุส่วนของ URL ดั้งเดิมจะถูกเก็บไว้ในการเปลี่ยนเส้นทาง (ผ่านรหัสสถานะ HTTP 300, 301, 302 และ 303) โดยเบราว์เซอร์ส่วนใหญ่เว้นแต่ URL เปลี่ยนเส้นทางจะมีตัวระบุส่วน นี้น่าจะเป็นพฤติกรรมที่แนะนำ

หากคุณใช้สคริปต์ตัวจัดการที่เปลี่ยนเส้นทางผู้ใช้ที่อื่นคุณสามารถผนวก "#" ไปยัง URL การเปลี่ยนเส้นทางที่นี่เพื่อแทนที่ตัวบ่งชี้ชิ้นส่วนด้วยสตริงว่าง

ฉันรู้ว่าคำตอบนี้มาสาย แต่ถ้าคุณใช้ passportjs คุณอาจต้องการเห็นสิ่งนี้

return (req, res, next) => {
    console.log(req.originalUrl);
    next();
};

ฉันได้เขียนมิดเดิลแวร์นี้และนำไปใช้ในการแสดงเช่นเซิร์ฟเวอร์และ URL "#_=_"เดิมฉันมีเป็นได้โดยไม่ต้อง ดูเหมือนว่าเมื่อเราใช้อินสแตนซ์ของ passporJS เป็นมิดเดิลแวร์กับอินสแตนซ์ของเซิร์ฟเวอร์มันไม่ได้ใช้อักขระเหล่านั้น แต่จะปรากฏบนแถบที่อยู่ของเบราว์เซอร์ของเราเท่านั้น

ฉันใช้อันนี้เพื่อลบสัญลักษณ์ '#' เช่นกัน

<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        window.location.href = window.location.href.split('#_=_')[0];
    }
</script>

ใช้ Angular 2 (RC5) และเส้นทางแฮชตามฉันทำสิ่งนี้:

const appRoutes: Routes = [
  ...
  {path: '_', redirectTo: '/facebookLoginSuccess'},
  ...
]

และ

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

เท่าที่ฉันเข้าใจ=ตัวละครในเส้นทางจะถูกตีความเป็นส่วนหนึ่งของข้อกำหนดพารามิเตอร์ทางเลือก (ดูที่https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ) ดังนั้นไม่เกี่ยวข้องกับการจับคู่เส้นทาง

สำหรับผู้ใช้ PHP SDK

ฉันแก้ไขปัญหาได้อย่างง่ายดายโดยการลบส่วนเสริมก่อนที่จะส่ง

 $loginURL = $helper->getLoginUrl($redirectURL, $fbPermissions);
 $loginURL = str_replace("#_=_", "", $loginURL);
 header("Location: " . $loginURL);

สิ่งนี้จะลบอักขระที่ต่อท้ายไปยัง URL ของคุณ

<script type="text/javascript">
 var idx=window.location.toString().indexOf("#_=_"); 
   if (idx > 0) { 
     window.location = window.location.toString().substring(0, idx); 
   } 
</script>

ทางออกที่ง่ายและสะอาดที่สุดในการลบ "# _ = _" (PHP):

แทน "header (" Location: xxx.php ");" เพื่อใช้ "echo (" location.href = 'xxx.php'; ");"