it-swarm-tr.com

Facebook Geri Arama, URL’ye Geri Döndürür

Facebook callback, Return URL'ye #_=_ hash alt çizgi eklemeye başladı

Nedenini bilen var mı? Çözüm nedir?

442
zing ming

Facebook'un Platform Güncellemeleri ile :

Oturum Yönlendirme Davranışındaki Değişiklik

Bu hafta, redirect_uri'ye # ____ = ____ bir fragman eklemeye başladık. bu alan boş bırakılmıştır. Lütfen uygulamanızın bu numarayı idare edebileceğinden emin olun. davranışı.

Bunu önlemek için, giriş url isteğinizde redirect_uri'yi şöyle yapın: (Facebook php-sdk kullanarak)

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

GÜNCELLEME

Yukarıdaki, aynen belgeler aynen bunu düzeltmek için diyor. Ancak, Facebook'un belgelenmiş çözümü işe yaramıyor. Lütfen daha iyi bir cevap almak için Facebook Platformu Güncellemeleri blog yazısı ve/ bu hatayı Yorum bırak O zamana kadar, bu sorunu çözmek için baş etiketinize aşağıdakini ekleyin:

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

Veya daha ayrıntılı bir alternatif (teşekkürler 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>
229
Ryan

TL; DR

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

Adım adım talimatlarla birlikte tam sürüm

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

    }

}

Adım adım:

  1. Yalnızca fragment#_=_ ise kod bloğuna gireceğiz.
  2. Tarayıcının HTML5 window.replaceState yöntemini destekleyip desteklemediğini kontrol edin .
    1. URL'yi # üzerinde bölerek ve yalnızca ilk kısmı alarak temizleyin.
    2. history 'a geçerli sayfa durumunu temiz URL ile değiştirmesini söyleyin. Bu, yeni bir tane oluşturmak yerine geçerli tarih girişini değiştirir. Bunun anlamı geri ve ileri düğmelerinin istediğiniz gibi çalışmasıdır. ;-)
  3. Tarayıcı harika HTML 5 geçmiş yöntemlerini desteklemiyorsa, URL'yi boş dizeye ayarlayarak en iyi şekilde URL'yi temizleyin. Bu zayıf bir geri dönüş, çünkü hala takip eden bir karmaşa (example.com/#) ayrılıyor ve ayrıca bir tarih girişi ekliyor, böylece geri düğmesi sizi #_-_

history.replaceState hakkında daha fazla bilgi edinin.

window.location hakkında daha fazla bilgi edinin.

99
PapaSierra

url'den kalan "#" harfini kaldırmak istiyorsanız

$(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
  }
})
57
likebeats

Bu, güvenlik nedeniyle Facebook tarafından tasarımla gerçekleştirildi. İşte Facebook Ekibi üyesi Eric Osgood'un açıklaması:

Bu 'tasarım tarafından' işaretlendi. çünkü potansiyel bir güvenlik açığını önler.

Bazı tarayıcılar, bir URL’den bir .__ bir sonuna karma parçası ekleyecektir. yönlendirildikleri yeni URL (bu yeni URL'nin kendisinin bir karma parçası yoksa).

Örneğin example1.com example2.com adresine bir yönlendirme döndürürse, a browser example1.com # abc adresine giderken example2.com # abc ve .__ 'ya gider. example1.com adresindeki karma parça içeriğine bir example2.com'da komut dosyası.

Bir kimlik doğrulaması akışının bir başkasına yönlendirilmesi mümkün olduğundan, it Bir uygulamadan erişilebilen hassas bir uygulama bilgisine sahip olmak mümkün olabilir. başka bir.

Bu, URL .__ yönlendirmesine yeni bir karma parçası eklenerek hafifletilir. Bu tarayıcı davranışını önlemek için.

Sonuçta elde edilen URL'nin estetiği veya müşteri tarafı davranışı ise endişe verici, rahatsız eden kişiyi kaldırmak için window.location.hash (veya hatta bir sunucu tarafı yönlendirmesi) kullanmak mümkün olacaktır. karakter.

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

33
Mark Murphy

Bunu neden yaptıklarından emin değilim, ancak sayfanızın üstündeki karma değerini sıfırlayarak bu sorunu çözebilirsiniz:

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

Ayrıca, Facebook geri çağırma için redirect_uri parametresinde kendi karma değerinizi belirtebilirsiniz; bu, belirli durumlarda yardımcı olabilir; /api/account/callback#home. Geri yönlendirildiğinde, en azından backbone.js veya benzerini kullanıyorsanız (jquery mobile hakkında emin değilseniz) bilinen bir rotaya karşılık gelen bir karma olacaktır.

9
pkiddie

Başta sinir bozucu, özellikle URI'yi ayrıştıran ve sadece $ _GET'i okuyan uygulamalar için değil ... İşte birlikte attığım kesmek ... Keyfini çıkar!

<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>
8
Jeremy Whitt

Facebook bir çerçeve kullanıyor ve içindeki her şey AJAX iletişimi kullanarak çalışıyor. Bu durumda en büyük sorun, geçerli sayfa durumunu korumaktır. Anladığım kadarıyla, Facebook benzetilmiş çapa kullanmaya karar verdi. Bu, bir yere tıklarsanız, sayfanızın içinde bir bağlantı olarak taklit eder ve AJAX iletişimi başladığında, URL’nizin bağlantı bitini de değiştirdikleri anlamına gelir.

Sayfayı yeniden yüklemeye çalıştığınızda bu çözüm normalde size yardımcı olur (ENTER değil, F5), çünkü tarayıcınız tüm URL’leri çapalarla birlikte Facebook sunucusuna gönderir. Bu nedenle, Facebook en son durumu (gördüğünüzü) alır ve daha sonra oradan devam edebilirsiniz.

Geri arama #_=_ ile döndüğünde, sayfanın ayrılmadan önce temel durumunda olduğu anlamına gelir. Bu bağlantı tarayıcı tarafından ayrıştırıldığı için endişelenmenize gerek yok.

8
Sándor Tóth

Hashbang (/ #! /) URL’lerine sahip bir JS çerçevesi kullanıyorsanız, bu ciddi bir sorun olabilir. Açısal. Gerçekten de, Angular hashbang olmayan bir parçanın bulunduğu URL’leri geçersiz sayır ve bir hata verir:

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

Böyle bir durumdaysanız (ve alan adınıza yönlendiriliyorsanız), yerine:

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

Basitçe yapın:

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

Bu sorunun facebook AJAX ile nasıl ilişkili olduğunu anlamıyorum. Aslında, sorun JavaScript devre dışı bırakıldığında da ortaya çıkar ve tamamen oturum açma tabanlı yönlendirmeler yapar. 

Facebook ile bir örnek alışverişi: 

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

Benim için de sadece Firefox ile olur.

5
Sebastian Tusk

Bunu yönlendirme sayfama eklemek benim için sorunu düzeltti ...

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

Açısal ve açısal kullanıcı arabirimi yönlendiricisi ile bunu düzeltebilirsiniz 

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

Vue-router kullanıyorsanız, rota listesine ekleyebilirsiniz:

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

Facebook'un oturum yönlendirmelerini işleme biçiminde son zamanlarda bir değişiklik yapıldı. Bu haftanın Operasyon Geliştirici Aşkı blog yazısındaki duyuru için "Oturum Yönlendirme Davranışında Değişiklik" bölümüne bakın.

2
Dhiren Patel

Benim için #_=_ 'dan kurtulmak için başka bir sayfaya JavaScript yönlendirmesi yapıyorum. Aşağıdaki fikirler işe yaramalı. :)

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

Bunu da '#' sembolünü silmek için kullanıyorum.

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

Bu cevabın geç olduğunu biliyorum, ancak pasaport kullanıyorsanız, bunu görmek isteyebilirsiniz. 

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

Bu katman yazılımını yazdım ve sunucu örneğini ifade etmek için uyguladım ve elde ettiğim orijinal URL "#_=_" olmadan. PassporJS örneğini sunucu örneğine katman yazılımı olarak uyguladığımızda, bu karakterleri almadığı gibi görünüyor, ancak yalnızca tarayıcılarımızın adres çubuğunda görülebilir. 

1
Krishna

Benim için çalışan bir çözüm (Backbone.js kullanarak), Facebook’a iletilen yönlendirme URL’sinin sonuna "# /" eklemekti. Facebook sağlanan parçayı koruyacak ve kendi "_ = _" değerini eklemeyecek.

Döndüğünde, Backbone "# /" kısmını kaldıracak. AngularJS için "#!" Ekleniyor dönüş URL'ye çalışması gerekir.

Orijinal URL'nin parça tanımlayıcısının, yeniden yönlendirme URL'sinde bir parça tanımlayıcısı olmadığı sürece, çoğu tarayıcı tarafından yeniden yönlendirmede (HTTP durum kodları 300, 301, 302 ve 303 aracılığıyla) korunduğunu unutmayın. Bu önerilen davranış gibi görünüyor .

Kullanıcıyı başka bir yere yönlendiren bir işleyici komut dosyası kullanıyorsanız, parça tanımlayıcısını boş bir dize ile değiştirmek için buradaki yönlendirme URL'sine "#" ekleyebilirsiniz.

1
Ivo Smits

PHP SDK kullanıcıları için

İletmeyi yapmadan önce fazla parçayı kaldırarak sorunu çözdüm.

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

Angular 2 (RC5) ve karma tabanlı rotaları kullanarak bunu yapıyorum:

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

ve

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

Anladığım kadarıyla, rotadaki = karakteri isteğe bağlı rota parametreleri tanımının bir parçası olarak yorumlanır (bkz. https://angular.io/docs/ts/latest/guide/router.html#!#optional-route -parametreler ), bu nedenle rota eşleştirmesinde yer almaz.

0
rcomblen

Bu, eklenen karakterleri url’nize kaldırır

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