Firebase $ onAuth ha authData errato dopo $ authWithOAuthRedirect da Facebook

Question

Sto tentando di autenticare gli utenti della mia app Firebase (Angularfire) con accesso Facebook.

Tutto funziona come previsto quando eseguo l'autenticazione con una finestra popup, ma per supportare il maggior numero di browser possibile (Chrome su iOS non supporta i popup, ad esempio) Voglio eseguire il fallback per l'autenticazione con un reindirizzamento ($authWithOAuthRedirect).

ho confermato la mia impostazione di Facebook sono corrette (il mio ID app e segreto, per esempio), ma quando sto reindirizzato alla mia applicazione dopo Facebook autenticazione con un redirect, $onAuth incendi ma io non ho il mio Facebook authData .

Invece, ho l'anonimo authData. Per un po 'di background; tutti gli utenti sono autenticati anonimi se non sono altrimenti autenticati (con Facebook, in questo esempio).

Non riesco a vedere per trovare perché questo sarebbe - l'utente dovrebbe ora essere autenticato con Facebook, e avere il authData di Facebook.

stralci del mio codice sono al di sotto di un certo contesto:

attivato quando un utente fa clic sul pulsante di accesso

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

$onAuth (dentro la mia angolare app 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); 
    } 
} 

resolver di percorso t o autentica altrimenti anonimo utenti

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

Il risolutore percorso (sessionState) controlla se l'utente è autenticato già, e in caso contrario, prova a loro l'autenticazione anonima.

Dopo il reindirizzamento dell'autenticazione Facebook, l'utente sarà già autenticato e pertanto non deve essere autenticato in modo anonimo.

Ma sembra che lo siano? Come $onAuth registra il authData nella console ed è anonimo.

Qualsiasi aiuto con questo sarebbe molto apprezzato! Sono sicuro che abbia qualcosa a che fare con il mio risolutore di route, poiché l'autenticazione pop-up funziona bene (il percorso è già stato risolto).

MODIFICA: Ho provato a rimuovere completamente il mio resolver di route nel caso in cui ciò causasse un problema, ma non ha fatto alcuna differenza. L'utente era semplicemente "non autenticato" invece di essere autenticato con Facebook (dopo $authWithOAuthRedirect) o in modo anonimo.

UPDATE: Ho provato a eseguire l'autenticazione con Twitter e il trasporto di reindirizzamento e ho riscontrato lo stesso identico problema. Ho anche provato ad usare la porta 80, invece della porta 3000, che la mia app veniva servita localmente, ma non è stata una gioia.

UPDATE: quando spengo la modalità html5Mode nella mia app - e percorsi ora comincio con # s - $authWithOAuthRedirect funziona perfettamente. Da questo posso solo supporre che $authWithOAuthRedirect non supporti lo html5Mode di AngularJS. Qualcuno può confermare questo è un problema, o devo cambiare il mio codice per supportare html5Mode e authWithOAuthRedirect?

ESEMPIO REPO Ecco un esempio di pronti contro termine che dimostra il problema: https://github.com/jonathonoates/myapp

Guardate nella directory dist - si dovrebbe essere in grado di scaricare ed eseguire l'applicazione per riprodurre il problema. In scripts/main.js è il JS dell'app; Ho aggiunto un paio di commenti ma è abbastanza auto esplicativo.

Per riprodurre il problema: fare clic sul pulsante "Login Facebook" e verrai reindirizzato su Facebook per l'autenticazione. FB reindirizza indietro al app, ma qui sta il problema - non sarà autenticato, e l'AuthData restituito verrà null - vedrete questo nella console

UPDATE: Quando aggiungo un hashPrefix in html5Mode ad es.

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

L'app funziona come mi aspetto - l'autenticazione con Facebook e le opere di trasporto di reindirizzamento.

paio di piccoli però:

1. L'URL è #%3F aggiunto ad esso, ed è disponibile/visibile nella cronologia del browser.
2. Questo dovrebbe riscrivere gli URL con #! nei browser che non supportano History.pushState (html5Mode) e alcuni motori di ricerca meno avanzati potrebbero cercare un frammento HTML a causa del "hashbang".

Analizzerò l'URL dopo essere stato reindirizzato da Facebook invece di utilizzare hashPrefix. Nell'URL esiste un numero __firebase_request_key che potrebbe essere significativo ad es.

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

Answer 1

Sembra che questo è davvero un'incompatibilità tra Firebase e AngularJS di html5mode come si sospetta. Alla fine del flusso di reindirizzamento, Firebase lasciava l'URL come "http://.../#?", E Angular a quanto pare non gli piaceva, così ha fatto un reindirizzamento a "http://.../" Questo reindirizzamento interrompe Firebase (la pagina si ricarica mentre stiamo provando a auth contro il back-end) e quindi non è in grado di completare il processo di autenticazione.

Ho fatto una correzione sperimentale che garantisce torniamo l'URL http://.../# "alla fine del flusso di reindirizzamento, che angolare è felice con, impedendo così il reindirizzamento problematico È possibile prendere qui se ti piace:. https://mike-shared.firebaseapp.com/firebase.js

farò in modo che questa correzione entra nella prossima versione del client JS. è possibile tenere d'occhio il nostro changelog per vedere quando viene rilasciato.