2016-01-16 28 views
6

我正在嘗試使用Facebook登錄驗證我的Firebase(Angularfire)應用的用戶。

當我使用彈出式窗口進行身份驗證時,一切都按預期工作,但支持儘可能多的瀏覽器(iOS上的Chrome不支持彈出式窗口,例如)我想使用重定向進行身份驗證($authWithOAuthRedirect)。

我已經證實了我在Facebook的設置是正確的(我的應用程序ID和祕密,對EG),但是當我在Facebook的一個重定向驗證後重定向回我的應用程序,$onAuth大火,但我沒有我的Facebook authData做。

相反,我有匿名authData。有點背景;所有用戶如果未經其他方式認證(例如在此例中爲Facebook),則匿名認證。

我不明白爲什麼會這樣 - 用戶現在應該通過Facebook進行身份驗證,並有Facebook authData。我的代碼

節選低於一些背景:

觸發,當用戶點擊登錄按鈕

function logIn() { 
    firebaseAuth 
     .$authWithOAuthRedirect('facebook', function (error) { 
      if (error) { 
       console.log(error); 
      } 
     }); 
} 

$onAuth(在我的角度應用程序的run

function run ($rootScope, firebaseAuth, sessionStore) { 
    $rootScope 
     .$on('$routeChangeError', function (event, next, prev, error) { 
      if (error === 'AUTH_REQUIRED') { 
       console.log(error); 
      } 
     }); 

    $rootScope 
     .$on('$routeChangeSuccess', function (event, current, prev) { 
      $rootScope.title = current.$$route.title; 
     }); 

    firebaseAuth 
     .$onAuth(onAuth); 

    function onAuth (authData) { 
     console.log(authData); 
    } 
} 

路由解析器t o否則匿名用戶進行身份驗證

function sessionState ($q, firebaseAuth) { 
    var deferred = $q.defer(); 

    firebaseAuth 
     .$requireAuth() 
     .then(deferred.resolve, guest); 

    return deferred.promise; 

    function guest() { 
     firebaseAuth 
      .$authAnonymously() 
      .then(deferred.resolve, rejected); 
    } 

    function rejected() { 
     deferred.reject('AUTH_REQUIRED'); 
    } 
} 

路由解析(sessionState)檢查是否用戶已經通過身份驗證,如果沒有,嘗試以匿名方式驗證他們的身份。

在Facebook身份驗證重定向之後,用戶將已經通過身份驗證,因此不需要進行匿名身份驗證。

但是,看起來他們是?由於$onAuthauthData記錄到控制檯,並且它是匿名的。

任何與此有關的幫助將不勝感激!我相信它與我的路由解析器有關,因爲彈出式身份驗證正常工作(路由已經解決)。

編輯:我試圖完全刪除我的路由解析器,以防萬一它是導致問題,但它沒有區別。用戶只是'未經認證',而不是通過Facebook(在$authWithOAuthRedirect之後)或匿名認證。

更新:我嘗試使用Twitter和重定向傳輸進行身份驗證,並且遇到了完全相同的問題。我也嘗試使用端口80,而不是端口3000,我的應用程序在本地服務,但沒有喜悅。

UPDATE:當我關閉html5Mode模式在我的應用程序 - 和路線現在# s。開頭 - $authWithOAuthRedirect完美的作品。由此我只能假設$authWithOAuthRedirect不支持AngularJS的html5Mode。任何人都可以確認這是一個問題,或者我是否需要更改我的代碼以支持html5ModeauthWithOAuthRedirect

例REPO下面是一個例子演示回購問題:https://github.com/jonathonoates/myapp

照照dist目錄 - 你應該能夠下載這個並運行應用程序來重現問題。在scripts/main.js是應用程序的JS;我已經添加了一些評論,但它很自我解釋。

重現問題:點擊'Facebook登錄'按鈕,你會被重定向到Facebook進行身份驗證。 FB將重定向你回到應用程序,但是,這裏存在的問題 - 你會不會進行認證,並返回的authData將是空的 - 你會在控制檯中看到這個

UPDATE:當我添加hashPrefix in html5Mode eg

$locationProvider 
    .html5Mode(true) 
    .hashPrefix('!'); 

的應用工程,我所期望的 - 與Facebook和重定向交通工程驗證。

夫婦niggles的,但:

  1. 的URL已#%3F附加到它,並使用/在瀏覽器的歷史記錄中看到。
  2. 這會在不支持History.pushStatehtml5Mode)的瀏覽器中重寫網址#!,而一些不太先進的搜索引擎可能會因爲「hashbang」而尋找HTML片段。

我會考慮從Facebook重新導向而不是使用hashPrefix來劫持URL。在URL中有一個__firebase_request_key,這可能是重要的,例如,

http://localhost:3000/#%3F&__firebase_request_key= 
+0

喬納森,你可以嘗試下載2.4.0?一在那個版本中修復了哈希URL,我懷疑它會有幫助。 – Kato

+0

然後,而不是代碼摘錄,我們將需要一個最小的repro。請參閱[創建一個mcve] – Kato

+0

這裏有一個MCVE讓你看看 - 在這裏,我已經驗證了Facebook的重定向傳輸不能與'html5mode'打開。我還會用鏈接更新我的Q:https://github.com/jonathonoates/myapp –

回答

4

看起來這確實是Firebase和AngularJS的html5mode之間的不兼容性,正如您懷疑的那樣。在重定向流程結束時,Firebase將URL作爲「http://.../#?」,而Angular顯然不喜歡這樣做,因此它重定向到了「http://.../」。此重定向中斷Firebase(頁面在我們嘗試auth對後端),因此無法完成身份驗證過程。

我做了一個實驗性的修復,以確保我們恢復的網址http://.../#「的重定向流量,這是角與快樂,從而防止問題的重定向結束時,如果你願意,你可以在這裏抓住它。https://mike-shared.firebaseapp.com/firebase.js

我會確保此修復程序進入的JS客戶端的下一個版本,你可以確保我們對changelog的眼睛看到當它被釋放。

+0

感謝您的回覆 - 這裏需要大量的試驗和錯誤,但我很高興我們正在接近解決方案。有一點需要注意;我沒有使用AngularJS 2 - 我在應用程序和repro中使用1.4.4。你認爲這是同樣的問題嗎? –

+0

哦,對不起。那只是讓我感到困惑。我想你提到過Angular 2,但我看到我錯了。 :-)我會編輯我的答案。我使用你的repro應用程序調試了這個問題,所以它絕對是一樣的。 :-) –

+0

太棒了,我會尋找下一個版本的Firebase。希望它不會太遙遠!相當有趣,我發現了一個錯誤;-) –

相關問題