我正在嘗試使用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身份驗證重定向之後,用戶將已經通過身份驗證,因此不需要進行匿名身份驗證。
但是,看起來他們是?由於$onAuth
將authData
記錄到控制檯,並且它是匿名的。
任何與此有關的幫助將不勝感激!我相信它與我的路由解析器有關,因爲彈出式身份驗證正常工作(路由已經解決)。
編輯:我試圖完全刪除我的路由解析器,以防萬一它是導致問題,但它沒有區別。用戶只是'未經認證',而不是通過Facebook(在$authWithOAuthRedirect
之後)或匿名認證。
更新:我嘗試使用Twitter和重定向傳輸進行身份驗證,並且遇到了完全相同的問題。我也嘗試使用端口80,而不是端口3000,我的應用程序在本地服務,但沒有喜悅。
UPDATE:當我關閉html5Mode
模式在我的應用程序 - 和路線現在#
s。開頭 - $authWithOAuthRedirect
完美的作品。由此我只能假設$authWithOAuthRedirect
不支持AngularJS的html5Mode
。任何人都可以確認這是一個問題,或者我是否需要更改我的代碼以支持html5Mode
和authWithOAuthRedirect
?
例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的,但:
- 的URL已
#%3F
附加到它,並使用/在瀏覽器的歷史記錄中看到。 - 這會在不支持
History.pushState
(html5Mode
)的瀏覽器中重寫網址#!
,而一些不太先進的搜索引擎可能會因爲「hashbang」而尋找HTML片段。
我會考慮從Facebook重新導向而不是使用hashPrefix
來劫持URL。在URL中有一個__firebase_request_key
,這可能是重要的,例如,
http://localhost:3000/#%3F&__firebase_request_key=
喬納森,你可以嘗試下載2.4.0?一在那個版本中修復了哈希URL,我懷疑它會有幫助。 – Kato
然後,而不是代碼摘錄,我們將需要一個最小的repro。請參閱[創建一個mcve] – Kato
這裏有一個MCVE讓你看看 - 在這裏,我已經驗證了Facebook的重定向傳輸不能與'html5mode'打開。我還會用鏈接更新我的Q:https://github.com/jonathonoates/myapp –