Facebook Callback menambahkan '# _ = _' ke Return URL

Facebook callback telah mulai menambahkan #_=_garis bawah hash ke URL Kembali

Adakah yang tahu mengapa? Apa solusinya?

melalui Pembaruan Platform Facebook :

Ubah Perilaku Pengalihan Sesi

Minggu ini, kami mulai menambahkan fragmen # ____ = ____ ke redirect_uri ketika bidang ini dibiarkan kosong. Harap pastikan bahwa aplikasi Anda dapat menangani perilaku ini.

Untuk mencegah hal ini, atur redirect_uri dalam permintaan url login Anda seperti: (menggunakan Facebook php-sdk)

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

MEMPERBARUI

Di atas persis seperti yang dikatakan dokumentasi untuk memperbaikinya. Namun, solusi yang didokumentasikan Facebook tidak berfungsi. Silakan pertimbangkan untuk meninggalkan komentar di posting blog Pembaruan Platform Facebook dan ikuti bug ini untuk mendapatkan jawaban yang lebih baik. Sampai saat itu, tambahkan yang berikut ke tag kepala Anda untuk menyelesaikan masalah ini:

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

Atau alternatif yang lebih detail (terima kasih 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 = "";
}

Versi lengkap dengan petunjuk langkah demi langkah

// 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 = "";

    }

}

Selangkah demi selangkah:

1. Kami hanya akan masuk ke blok kode jika fragmentadalah#_=_ .
2. Periksa apakah browser mendukung HTML5 window.replaceState metode .
   1. Bersihkan URL dengan memisahkan # dan hanya mengambil bagian pertama.
   2. Katakan historyuntuk mengganti keadaan halaman saat ini dengan URL bersih. Ini mengubah entri riwayat saat ini daripada membuat yang baru. Artinya, tombol kembali dan maju akan berfungsi seperti yang Anda inginkan. ;-)
3. Jika browser tidak mendukung metode riwayat HTML 5 yang mengagumkan, maka bersihkan URL sebaik mungkin dengan mengatur hash to string kosong. Ini adalah fallback yang buruk karena masih meninggalkan hash yang tertinggal (example.com/#) dan juga menambahkan entri riwayat, sehingga tombol kembali akan membawa Anda kembali ke #_-_.

Pelajari lebih lanjut tentang history.replaceState.

Pelajari lebih lanjut tentang window.location.

jika Anda ingin menghapus "#" yang tersisa dari 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
  }
})

Ini diimplementasikan oleh Facebook dengan desain untuk alasan keamanan. Berikut penjelasan dari Eric Osgood, anggota Tim Facebook:

Ini telah ditandai sebagai 'oleh desain' karena mencegah potensi kerentanan keamanan.

Beberapa browser akan menambahkan fragmen hash dari URL ke akhir URL baru yang telah dialihkan (jika URL baru itu sendiri tidak memiliki fragmen hash).

Misalnya, jika example1.com mengembalikan pengalihan ke example2.com, maka browser yang menuju example1.com # abc akan pergi ke example2.com # abc, dan konten fragmen hash dari example1.com akan dapat diakses ke skrip pada example2 .com.

Karena dimungkinkan untuk memiliki satu aliran pengalihan otomatis ke yang lain, akan mungkin untuk memiliki data auth yang sensitif dari satu aplikasi yang dapat diakses oleh yang lain.

Ini dikurangi dengan menambahkan fragmen hash baru ke redirect URL untuk mencegah perilaku browser ini.

Jika estetika, atau perilaku sisi klien, dari URL yang dihasilkan menjadi perhatian, akan mungkin untuk menggunakan window.location.hash (atau bahkan pengalihan sisi-server Anda sendiri) untuk menghapus karakter yang menyinggung.

Sumber: https://developers.facebook.com/bugs/318390728250352/

Tidak yakin mengapa mereka melakukan ini tetapi, Anda bisa menyiasatinya dengan mengatur ulang hash di bagian atas halaman Anda:

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

Anda juga dapat menentukan hash Anda sendiri pada redirect_uriparameter untuk panggilan balik Facebook, yang mungkin bisa membantu dalam keadaan tertentu misalnya /api/account/callback#home. Ketika Anda diarahkan kembali, setidaknya akan menjadi hash yang sesuai dengan rute yang diketahui jika Anda menggunakan backbone.js atau yang serupa (tidak yakin tentang jquery mobile).

Facebook menggunakan bingkai dan di dalamnya semuanya berfungsi menggunakan komunikasi AJAX. Masalah terbesar dalam hal ini adalah mempertahankan status halaman saat ini. Sejauh yang saya mengerti, Facebook memutuskan untuk menggunakan jangkar simulasi. Ini berarti jika Anda mengklik di suatu tempat, mereka mensimulasikan itu sebagai jangkar di dalam halaman Anda, dan ketika komunikasi AJAX dimulai, mereka juga mengubah bit jangkar URL Anda.

Solusi ini membantu Anda secara normal ketika Anda mencoba memuat ulang halaman (bukan ENTER, tekan F5), karena browser Anda mengirimkan seluruh URL dengan jangkar ke server Facebook. Karena itu Facebook mengambil status terbaru (apa yang Anda lihat) dan Anda kemudian dapat melanjutkan dari sana.

Ketika kembali panggilan #_=_itu berarti bahwa halaman itu dalam keadaan dasar sebelum meninggalkannya. Karena jangkar ini diuraikan oleh browser, Anda tidak perlu khawatir.

Sangat menjengkelkan, terutama untuk aplikasi yang mem-parsing URI dan tidak hanya membaca $ _GET ... Inilah hack yang saya lempar bersama ... Selamat menikmati!

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

Ini bisa menjadi semacam masalah serius jika Anda menggunakan kerangka kerja JS dengan URL hashbang (/ #! /), Misalnya Angular. Memang, Angular akan menganggap URL dengan fragmen non-hashbang sebagai tidak valid dan membuat kesalahan:

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

Jika Anda dalam kondisi seperti itu (dan mengalihkan ke root domain Anda), alih-alih melakukan:

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

Cukup lakukan:

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

Saya tidak melihat bagaimana masalah ini terkait dengan facebook AJAX. Bahkan masalah juga terjadi dengan JavaScript dinonaktifkan dan murni login berbasis ulang.

Contoh pertukaran dengan 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#_  

Terjadi hanya dengan Firefox untuk saya juga.

Menambahkan ini ke halaman pengalihan saya memperbaiki masalah bagi saya ...

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

Dengan router ui angular dan angular, Anda dapat memperbaikinya

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

Jika Anda menggunakan vue-router, Anda dapat menambahkan ke daftar rute:

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

Perubahan baru-baru ini diperkenalkan dalam cara Facebook menangani pengalihan sesi. Lihat "Perubahan dalam Perilaku Pengalihan Sesi" di posting blog Cinta Pengembang Operasi minggu ini untuk pengumuman.

Bagi saya, saya melakukan pengalihan JavaScript ke halaman lain untuk menyingkirkan #_=_. Ide-ide di bawah ini harus bekerja. :)

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

Solusi yang berhasil untuk saya (menggunakan Backbone.js), adalah menambahkan "# /" ke akhir URL pengalihan yang diteruskan ke Facebook. Facebook akan menyimpan fragmen yang disediakan, dan tidak menambahkan sendiri "_ = _".

Setelah kembali, Backbone akan menghapus bagian "# /". Untuk AngularJS, menambahkan "#!" ke URL kembali harus bekerja.

Perhatikan bahwa pengidentifikasi fragmen dari URL asli dipertahankan pada pengalihan (melalui kode status HTTP 300, 301, 302 dan 303) oleh sebagian besar browser, kecuali URL pengalihan juga memiliki pengidentifikasi fragmen. Perilaku ini sepertinya direkomendasikan .

Jika Anda menggunakan skrip handler yang mengarahkan ulang pengguna di tempat lain, Anda dapat menambahkan "#" ke URL pengalihan di sini untuk mengganti pengidentifikasi fragmen dengan string kosong.

Saya tahu balasan ini terlambat, tetapi jika Anda menggunakan passportjs, Anda mungkin ingin melihat ini.

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

Saya telah menulis middleware ini dan menerapkannya untuk mengekspresikan instance server, dan URL asli yang saya dapatkan adalah tanpa "#_=_". Sepertinya ketika kita menerapkan instance passporJS 'sebagai middleware ke instance server, itu tidak mengambil karakter tersebut, tetapi hanya terlihat pada bilah alamat browser kita.

Saya menggunakan ini, untuk menghapus simbol '#' juga.

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

Menggunakan Angular 2 (RC5) dan rute berbasis hash, saya melakukan ini:

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

dan

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

Sejauh yang saya mengerti, =karakter dalam rute ditafsirkan sebagai bagian dari definisi parameter rute opsional (lihat https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ) , jadi tidak terlibat dalam pencocokan rute.

Untuk pengguna PHP SDK

Saya memperbaiki masalah hanya dengan menghapus bagian tambahan sebelum meneruskan.

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

Ini akan menghapus karakter yang ditambahkan ke url Anda

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

Solusi termudah dan bersih untuk menghapus "# _ = _" (PHP):

Alih-alih "tajuk (" Lokasi: xxx.php ");" untuk menggunakan "echo (" location.href = 'xxx.php'; ");"